Error: No Output Directory named "public" found after the Build completed. Can't deploy Swell to Vercel

[taro350]

I wanted to create a commerce website with Next.js and Swell, and I cloned vercel/commerce and changes remote to my local repo, then succeeded to build it in my local development and even start. I see my demo website that looks like https://<mystorefront>.swell.store/admin/store (I assume integrating with Swell storefront from my local development is currently working now) in localhost:3000.

Pushing to my repository, connected to Vercel, Vercel automatically tries to deploy my application but the error occurs, which says Error: No Output Directory named "public" found after the Build completed.

./package.json

{
  "name": "commerce",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "site",
    "packages/*"
  ],
  "scripts": {
    "build": "turbo run build --filter=next-commerce...",
    "dev": "turbo run dev",
    "start": "turbo run start",
    "types": "turbo run types",
    "prettier-fix": "prettier --write ."
  },
  "devDependencies": {
    "husky": "^7.0.4",
    "prettier": "^2.5.1",
    "turbo": "^1.2.16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "turbo run lint"
    }
  },
  "packageManager": "yarn@1.22.17"
}

./site/package.json

{
  "name": "next-commerce",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "analyze": "BUNDLE_ANALYZE=both next build",
    "lint": "next lint",
    "prettier-fix": "prettier --write .",
    "find:unused": "npx next-unused"
  },
  "sideEffects": false,
  "dependencies": {
    "@radix-ui/react-dropdown-menu": "^0.1.6",
    "@react-spring/web": "^9.4.1",
    "@vercel/commerce": "^0.0.1",
    "@vercel/commerce-bigcommerce": "^0.0.1",
    "@vercel/commerce-commercejs": "^0.0.1",
    "@vercel/commerce-kibocommerce": "^0.0.1",
    "@vercel/commerce-local": "^0.0.1",
    "@vercel/commerce-ordercloud": "^0.0.1",
    "@vercel/commerce-saleor": "^0.0.1",
    "@vercel/commerce-shopify": "^0.0.1",
    "@vercel/commerce-spree": "^0.0.1",
    "@vercel/commerce-swell": "^0.0.1",
    "@vercel/commerce-vendure": "^0.0.1",
    "autoprefixer": "^10.4.2",
    "body-scroll-lock": "^4.0.0-beta.0",
    "clsx": "^1.1.1",
    "email-validator": "^2.0.4",
    "js-cookie": "^3.0.1",
    "keen-slider": "^6.6.3",
    "lodash.random": "^3.2.0",
    "lodash.throttle": "^4.1.1",
    "next": "^12.0.8",
    "next-themes": "^0.0.15",
    "postcss": "^8.3.5",
    "postcss-nesting": "^8.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-fast-marquee": "^1.3.1",
    "react-merge-refs": "^1.1.0",
    "react-use-measure": "^2.1.1",
    "tabbable": "^5.2.1",
    "tailwindcss": "^3.0.13"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^12.0.8",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/js-cookie": "^3.0.1",
    "@types/lodash.random": "^3.2.6",
    "@types/lodash.throttle": "^4.1.6",
    "@types/node": "^17.0.8",
    "@types/react": "^17.0.38",
    "eslint": "^8.6.0",
    "eslint-config-next": "^12.0.8",
    "eslint-config-prettier": "^8.3.0",
    "lint-staged": "^12.1.7",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.2.3",
    "prettier": "^2.5.1",
    "typescript": "4.3.4"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint",
      "prettier --write",
      "git add"
    ],
    "**/*.{md,mdx,json}": [
      "prettier --write",
      "git add"
    ]
  },
  "next-unused": {
    "alias": {
      "@lib/*": [
        "lib/*"
      ],
      "@assets/*": [
        "assets/*"
      ],
      "@config/*": [
        "config/*"
      ],
      "@components/*": [
        "components/*"
      ],
      "@utils/*": [
        "utils/*"
      ]
    },
    "debug": true,
    "include": [
      "components",
      "lib",
      "pages"
    ],
    "exclude": [],
    "entrypoints": [
      "pages"
    ]
  }
}

./packages/commerce/src/config.cjs

const path = require('path')
const merge = require('deepmerge')
const importCwd = require('import-cwd')

function withCommerceConfig(nextConfig = {}) {
  const commerce = nextConfig.commerce || {}
  const { provider } = commerce
  const newProvider = provider.split('-')[1]

  if (!newProvider) {
    throw new Error(
      `The commerce provider is missing, please add a valid provider name`
    )
  }

  process.chdir('../')
  process.chdir('./packages')
  onst commerceNextConfig = importCwd(
    path.join(process.cwd(), newProvider, 'src', 'next.config.cjs')
  )
  const config = merge(nextConfig, commerceNextConfig)
  process.chdir('../')
  process.chdir('./site')

  config.env = config.env || {}

  Object.entries(config.commerce.features).forEach(([k, v]) => {
    if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
  })

  return config
}

module.exports = { withCommerceConfig }`

I see public in ./site/public, but have no idea where to put public, or should do I change Output Directory?

[cond0r]

@taro350 Did you set the Root Directory from the project settings like so?

[taro350]

@cond0r I had simply set yarn build before and changed to cd... && yarn build. The error is gone! But now I got error Couldn't find a package.json file in "/vercel". I have a hard time figuring out a path to get it right.

[cond0r]

@cond0r I had simply set yarn build before and changed to cd... && yarn build. The error is gone! But now I got error Couldn't find a package.json file in "/vercel". I have a hard time figuring out a path to get it right.

@taro350 did you set the root directory to site also ?

[taro350]

@cond0r It worked! And I will acknowledge that I completely missed the Root Directory part in your first screenshot. Thank you very much.