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 [email protected]: The platform "linux" is incompatible with this module.
11:55:27.361    info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.365    info [email protected]: The platform "linux" is incompatible with this module.
11:55:27.365    info "[email protected]" 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/[email protected]" has unmet peer dependency "subscriptions-transport-ws@^0.9.0".
11:55:27.376    warning " > [email protected]" 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"

Answer 1

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

Answer 2

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 />;
}

Answer 3

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.