Next Build Fails with Webpack Error

I’ve been trying to deploy my next site, but I keep getting a “webpack error”. I’ve read through some github issues and other forums. But nothing seems to be working.

I’ve checked for case-sensitivity issues, tried changing next.config and netlify.toml but still can’t get it working, any help is appreciated, and thank you in advanced!

  • site name: el-arte-de-la-abuelita.netlify.app
  • Build Settings:
Runtime: Next.js
Base directory: Not set
Build command: next build
Publish directory: .next
Deply log visibility: Logs are public
Build status: Active

@codeyStein One visible error relates to the ./components/Footer.js file.

I know that you mention having checked case-sensitivity issues, but have you ensured that the file exists (that it’s not footer.js for example, or isn’t in the components folder)?

6:06:56 AM: ./components/Footer.js
6:06:56 AM: Module not found: Can't resolve 'next/Link' in '/opt/build/repo/components'
6:06:56 AM: Import trace for requested module:
6:06:56 AM: ./components/Footer.js
6:06:56 AM: > Build failed because of webpack errors

If you would like others to check for you, please provide access to your repository.

Didn’t find anything :frowning:
Here’s the repo

Hi @codeyStein, is the project building fine locally?

yup, works fine when I run it.

When you run it as npm start or npm run dev or have you tried building (as eluded to by Kyle) i.e. npm run build?

I ask because when I try building the clone repository locally I see

warn  - Compiled with warnings

./node_modules/next/Link.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/coel/projects/forums/el-arte-de-la-abuelita/node_modules/next/Link.js
    Used by 1 module(s), i. e.
    /Users/coel/projects/forums/el-arte-de-la-abuelita/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[3].oneOf[2].use!/Users/coel/projects/forums/el-arte-de-la-abuelita/components/Footer.js
* /Users/coel/projects/forums/el-arte-de-la-abuelita/node_modules/next/link.js
    Used by 3 module(s), i. e.
    /Users/coel/projects/forums/el-arte-de-la-abuelita/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[3].oneOf[2].use!/Users/coel/projects/forums/el-arte-de-la-abuelita/components/Navbar.js

Import trace for requested module:
./node_modules/next/Link.js
./components/Footer.js

If you look closely at the import statement in components/Footer.js and compare this to the next/link documentation you’ll find the answer. Specifically the import is

import Link from 'next/Link'

whereas the documentation shows

import Link from 'next/link'

This is a matter of case as mentioned in the warning shown above.

2 Likes

Good spot @jasiqli people like you make the forums great :netliheart:

Many thanks @kylesloper.

1 Like