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.
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.