nextJS build fails on Vercel because of Webpack errors

Question

Im trying to deploy to Vercel I've done it before with other projects but in this case, the build is failing, it mentions that it doesn't find Footer component, the build works perfectly on local machine.

11:55:14.850    Cloning completed in 533ms
11:55:14.851    Analyzing source code...
11:55:17.183    Installing build runtime...
11:55:17.605    Build runtime installed: 422.099ms
11:55:18.023    Looking up build cache...
11:55:18.054    Build cache not found
11:55:18.481    Installing dependencies...
11:55:18.694    yarn install v1.22.4
11:55:18.757    [1/4] Resolving packages...
11:55:19.090    [2/4] Fetching packages...
11:55:27.361    info fsevents@2.1.3: The platform "linux" is incompatible with this module.
11:55:27.361    info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.365    info fsevents@1.2.13: The platform "linux" is incompatible with this module.
11:55:27.365    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.369    [3/4] Linking dependencies...
11:55:27.371    warning "@apollo/react-hooks > @apollo/client@3.1.2" has unmet peer dependency "subscriptions-transport-ws@^0.9.0".
11:55:27.376    warning " > eslint-config-airbnb@18.2.0" has unmet peer dependency "eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0".
11:55:30.997    [4/4] Building fresh packages...
11:55:31.210    Done in 12.52s.
11:55:31.233    Running "yarn run build"
11:55:31.491    yarn run v1.22.4
11:55:31.513    $ next build
11:55:31.973    Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
11:55:32.044    Warning: No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
11:55:32.044    Creating an optimized production build...
11:55:32.098    Attention: Next.js now collects completely anonymous telemetry regarding usage.
11:55:32.098    This information is used to shape Next.js' roadmap and prioritize features.
11:55:32.099    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
11:55:32.099    https://nextjs.org/telemetry
11:55:44.385    Failed to compile.
11:55:44.385    ./components/App.js
11:55:44.385    Module not found: Can't resolve './Footer' in '/vercel/2e0a566d/components'
11:55:44.385    > Build error occurred
11:55:44.386    Error: > Build failed because of webpack errors
11:55:44.386        at build (/vercel/2e0a566d/node_modules/next/dist/build/index.js:13:900)
11:55:44.410    error Command failed with exit code 1.
11:55:44.410    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11:55:44.419    Error: Command "yarn run build" exited with 1
11:55:46.448    Done with "package.json"

It cannot find your Footer component, have you fixed that? – Freestyle09 Feb 19 '21 at 21:14 — Freestyle09, Feb 19 '21 at 21:14

score 19 · Accepted Answer · answered Aug 06 '20 at 19:28

19

I got help from support, it seems that even though my local components are Capitalized the remote branch had some components lowercased.

answered Aug 06 '20 at 19:28

ricardoNava

685
1
7
26

3

Thanks man, I had a similar problem. How bizarre, some of my files becomes lowercase and it caused build to fail – hadi tedi Aug 07 '20 at 13:27
can you give an example cause I get the same issue but no one of my files are in lowercase – La pach' Mar 01 '21 at 16:57
3

This typically happens if you do a case-sensitive only file rename. Just so that you don't have to look elsewhere, you can force updating the case on git with this command: `git mv -f OldFileNameCase newfilenamecase` (from https://stackoverflow.com/q/17683458/12094598) – Killian Huyghe Mar 08 '21 at 17:54

score 2 · Answer 2 · answered Jan 04 '21 at 16:41

Ensure that you're importing your components properly with the exact folder/file name. E.g If you have a folder called main and index.js inside it exported as a component. You'll have to export Main component from the exact folder name (case-sensitive)

// Content of index.js inside main folder
export default function Main() {}

// Use main component like this:

import Main from "./main";

export default function Home() {
  return <Main />;
}

score 1 · Answer 3 · answered Nov 11 '20 at 09:13

I have a similar problem. It builds just fine locally, but fail when building on vercel.

I have done some tests and I have found that the problem is related to the total length of the path + file name.

I have my apollo queries organized so that they are in folders that has the same name as the collections tey query. And the filenames are descriptive. The result is long path and filenames.

An example


09:53:38.510    Failed to compile.
09:53:38.510    ModuleNotFoundError: Module not found: Error: Can't resolve 'urbalurba/apollo/queries/entitynetmember/EntityNetworkMembershipByEntityIDandNetworkID' in '/vercel/workpath0/urbalurba/lib'
09:53:38.510    > Build error occurred
09:53:38.511    Error: > Build failed because of webpack errors
09:53:38.511        at build (/vercel/workpath0/node_modules/next/dist/build/index.js:15:918)
09:53:38.511        at runMicrotasks (<anonymous>)
09:53:38.511        at processTicksAndRejections (internal/process/task_queues.js:97:5)

As you see the file that holds my graphql mutation has the long filename EntityNetworkMembershipByEntityIDandNetworkID The folder in the example above is entitynetmember.

I shortened the folder name from entitynetworkmembership to entitynetmember. After doing that, all the other files in that folder was found by the build process.

So my conclusion is that the total length is what causes build to fail.

score 1 · Answer 4 · answered Feb 19 '21 at 21:08

1

I gon the same problem, delete .next folder and rebuild the new version.

answered Feb 19 '21 at 21:08

Ruslan Semenov

319
3
5

score 0 · Answer 5 · answered May 22 '22 at 23:00

I was also experiencing Vercel build errors (and no problems running in localhost) and it was a capitalization issue. When I attempted to import a Comment component into a page I was getting Vercel build errors:

Failed to compile.
./pages/{mypage.js}
Module not found: Can't resolve '../components/comment' in '/vercel/path0/pages/'

> Build failed because of webpack errors
error Command failed with exit code 1.

I finally resolved by capitalizing the Comment component. If I changed the Header or Footer components capitalization though to match the Comment component then the same error cropped up. This is what I ended up needing to do to get the build errors to go away...

import Comment from '../components/Comment'; //updated this import from comment to Comment
import Header from '../components/header'
import Footer from '../components/footer'

My package.json

  "dependencies": {
    "@formspree/react": "^2.2.5",
    "@fortawesome/fontawesome-pro": "^6.0.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
    "@fortawesome/pro-light-svg-icons": "^6.0.0",
    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
    "@fortawesome/pro-solid-svg-icons": "^6.0.0",
    "@fortawesome/pro-thin-svg-icons": "^6.0.0",
    "@fortawesome/react-fontawesome": "^0.1.17",
    "add": "^2.0.6",
    "babel-plugin-macros": "^3.1.0",
    "disqus-react": "^1.1.3",
    "next": "^12.1.6",
    "nextjs-breadcrumbs": "^1.1.9",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-images": "^1.2.0-beta.7",
    "react-photo-gallery": "^8.0.0",
    "tailwindcss-hero-patterns": "^0.0.1",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "<8.0.0",
    "eslint-config-next": "^12.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.23"
  }

nextJS build fails on Vercel because of Webpack errors

5 Answers5