next.js: Local Build Successful, but when deploying on ZEIT, I get "Module not found: Can't resolve '../../assets/meAvatar.jpg' "

Bug report

As the title says

Describe the bug

When i build locally, using npm run build, the build loads just fine as it should. I can then run it using npm start and view it on localhost:3000. I then upload the repository to github and go to watch my project fail to deploy as it has countless times while trying to fix the issue. Here is the log that is reported:

23:52:18.923 Retrieving list of deployment files… 23:52:19.086 Downloading 52 deployment files… 23:52:47.935 Installing build runtime… 23:52:48.377 Build runtime installed: 442.214ms 23:52:48.736 Looking up build cache… 23:52:48.766 Build cache not found 23:52:49.132 Installing dependencies… 23:52:58.140 npm WARN portfolio@1.0.0 No description 23:52:58.141 npm WARN portfolio@1.0.0 No repository field. 23:52:58.141 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/webpack/node_modules/fsevents): 23:52:58.141 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”}) 23:52:58.141 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/next/node_modules/fsevents): 23:52:58.141 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”}) 23:52:58.141 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents): 23:52:58.141 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”}) 23:52:58.143 added 682 packages from 263 contributors in 8.675s 23:52:58.402 14 packages are looking for funding 23:52:58.402 run npm fund for details 23:52:58.443 Running “npm run build” 23:52:58.626 > portfolio@1.0.0 build /zeit/621d0a52 23:52:58.626 > next build 23:52:59.199 Creating an optimized production build… 23:52:59.213 Attention: Next.js now collects completely anonymous telemetry regarding usage. 23:52:59.213 This information is used to shape Next.js’ roadmap and prioritize features. 23:52:59.213 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: 23:52:59.213 https://nextjs.org/telemetry 23:53:05.505 Failed to compile. 23:53:05.505 ./components/TopBarNavigator/index.js 23:53:05.505 Module not found: Can’t resolve ‘…/…/assets/meAvatar.jpg’ in ‘/zeit/621d0a52/components/TopBarNavigator’ 23:53:05.506 > Build error occurred 23:53:05.507 Error: > Build failed because of webpack errors 23:53:05.507 at build (/zeit/621d0a52/node_modules/next/dist/build/index.js:13:900) 23:53:05.519 npm ERR! code ELIFECYCLE 23:53:05.519 npm ERR! errno 1 23:53:05.520 npm ERR! portfolio@1.0.0 build: next build 23:53:05.520 npm ERR! Exit status 1 23:53:05.520 npm ERR! 23:53:05.520 npm ERR! Failed at the portfolio@1.0.0 build script. 23:53:05.520 npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 23:53:05.523 npm ERR! A complete log of this run can be found in: 23:53:05.523 npm ERR! /zeit/.npm/_logs/2020-04-06T04_53_05_520Z-debug.log 23:53:05.532 Error: Exited with 1 23:53:05.532 at ChildProcess.<anonymous> (/zeit/60d2972f44a2442d/.build-utils/node_modules/@now/build-utils/dist/index.js:31349:24) 23:53:05.532 at ChildProcess.emit (events.js:223:5) 23:53:05.532 at ChildProcess.EventEmitter.emit (domain.js:475:20) 23:53:05.532 at maybeClose (internal/child_process.js:1021:16) 23:53:05.533 at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5) 23:53:07.128 Done with “package.json”

To Reproduce

  1. npm run build
  2. npm start and view behavior
  3. verify the application works the way I want then upload repo to github.
  4. go to ZEIT now and view the building process

Expected behavior

expect the build to have no errors

Screenshots

here is my package.json package

here is my next.config.js image

where the issue is said to occur, but actually occurs at every import image

System information

  • OS: Windows 10
  • Browser chrome
  • Version of Next.js:

Additional context

Add any other context about the problem here.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 6
  • Comments: 18 (4 by maintainers)

Commits related to this issue

Most upvoted comments

ok =.= I solved this. Change the name of component from layout.js to Layout.js 😐 Can’t understand why 😐

This is likely a duplicate of #11742.

Also there is a bug in my git (macOS v2.21.0) where changing a letter in lowercase in a file name won’t be counted as a commit. gosh.

I had the same exact problem hahaha even the git one. That was stupid for 30 minutes hahahah.

Thanks for sharing

Also there is a bug in my git (macOS v2.21.0) where changing a letter in lowercase in a file name won’t be counted as a commit. gosh.

Hello Please i still face this issue…

My app works well on local but doesn’t work well on vercel

01:39:39 Failed to compile.
01:39:39 ModuleNotFoundError: Module not found: Error: Can’t resolve ‘common/src/theme/agency’ in ‘/vercel/2ca039a8/pages’
01:39:39 > Build error occurred
01:39:39 Error: > Build failed because of webpack errors
01:39:39 at build (/vercel/2ca039a8/node_modules/next/dist/build/index.js:15:918)
01:39:39 at processTicksAndRejections (internal/process/task_queues.js:97:5)
01:39:39 error Command failed with exit code 1.

Package.json ; { “name”: “next-landing”, “version”: “6.0.0”, “private”: true, “scripts”: { “dev”: “next”, “build”: “next build”, “start”: “next start”, “export”: “next build && next export”, “now-build”: “next build && next export -o dist”, “netlify-build”: “next build && next export” },

“dependencies”: { “@glidejs/glide”: “^3.4.1”, “@reach/accordion”: “^0.10.4”, “@redq/reuse-modal”: “^1.1.9”, “@styled-system/theme-get”: “^5.1.2”, “@zeit/next-css”: “^1.0.1”, “firebase-admin”: “^8.12.1”, “firebase-functions”: “^3.7.0”, “next”: “9.5.0”, “next-compose-plugins”: “^2.2.0”, “next-fonts”: “1.0.3”, “next-optimized-images”: “^2.6.1”, “next-transpile-modules”: “4.0.0”, “prop-types”: “^15.7.2”, “rc-drawer”: “^4.1.0”, “rc-progress”: “^3.0.0”, “rc-tabs”: “9.7.0”, “react”: “^16.13.1”, “react-accessible-accordion”: “3.0.1”, “react-anchor-link-smooth-scroll”: “^1.0.12”, “react-collapser”: “^1.5.10”, “react-content-loader”: “^5.1.0”, “react-countdown-now”: “^2.1.2”, “react-countup”: “^4.3.3”, “react-dom”: “^16.13.1”, “react-icons-kit”: “^1.3.1”, “react-id-swiper”: “^4.0.0”, “react-image”: “^4.0.1”, “react-image-gallery”: “0.8.18”, “react-masonry-component”: “^6.2.1”, “react-particles-js”: “^3.2.1”, “react-reveal”: “^1.2.2”, “react-rnd”: “^10.1.10”, “react-scroll-parallax”: “^2.3.3”, “react-scrollspy”: “^3.4.2”, “react-select”: “^3.1.0”, “react-stickynode”: “2.1.1”, “styled-components”: “^5.1.1”, “styled-system”: “5.1.5”, “swiper”: “^5.4.5” }, “devDependencies”: { “babel-plugin-styled-components”: “^1.10.7”, “imagemin-mozjpeg”: “^9.0.0”, “imagemin-optipng”: “^8.0.0”, “imagemin-svgo”: “^8.0.0” }, “engines”: { “node”: “12.x” }, “module”: “pages/index.js” }