Home
Support Forums

Webpack Assets Module not found: Error: Can't resolve

Hey guys I’m having some troubles with deploying to Netlify with image assets.

I’m not sure if this is a problem with my Webpack configuration or with Netlify. I’ve looked at a few other posts here related to this problem and I’ve tried setting the names to lowercase with no success.

Any help is much appreciated!

BUILD LOG

6:54:54 PM: Build ready to start
6:54:56 PM: build-image version: 73def8bb10593b9b818f44989a75ea508018ccb7 (focal)
6:54:56 PM: build-image tag: v4.5.2
6:54:56 PM: buildbot version: 7d40428c709b14aae87a26f47a2b538b1889885f
6:54:56 PM: Fetching cached dependencies
6:54:56 PM: Failed to fetch cache, continuing with build
6:54:56 PM: Starting to prepare the repo for build
6:54:57 PM: No cached dependencies found. Cloning fresh repo
6:54:57 PM: git clone GitHub - victorsh/personal-site: Victor S's personal website build using React and Threejs
6:54:58 PM: Preparing Git Reference refs/heads/main
6:54:58 PM: Parsing package.json dependencies
6:54:59 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: ‘’ versus ‘/’ in the Netlify UI
6:54:59 PM: Starting build script
6:54:59 PM: Installing dependencies
6:54:59 PM: Python version set to 2.7
6:55:00 PM: v16.13.1 is already installed.
6:55:00 PM: Now using node v16.13.1 (npm v8.1.2)
6:55:00 PM: Started restoring cached build plugins
6:55:00 PM: Finished restoring cached build plugins
6:55:00 PM: Attempting ruby version 2.7.2, read from environment
6:55:02 PM: Using ruby version 2.7.2
6:55:02 PM: Using PHP version 8.0
6:55:02 PM: Started restoring cached node modules
6:55:02 PM: Finished restoring cached node modules
6:55:03 PM: Installing NPM modules using NPM version 8.1.2
6:55:14 PM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
6:55:15 PM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
6:55:15 PM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
6:55:16 PM: npm WARN deprecated request@2.88.2: request has been deprecated, see Request’s Past, Present and Future · Issue #3142 · request/request · GitHub
6:55:18 PM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
6:55:18 PM: npm WARN deprecated mkdirp-promise@5.0.1: This package is broken and no longer maintained. ‘mkdirp’ itself supports promises now, please switch to that.
6:55:23 PM: npm WARN deprecated multibase@0.6.1: This module has been superseded by the multiformats module
6:55:24 PM: npm WARN deprecated multicodec@0.5.7: This module has been superseded by the multiformats module
6:55:28 PM: npm WARN deprecated uuid@3.3.2: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
6:55:29 PM: npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (ReDos Vulnerability Regression Visibility Notice · Issue #797 · debug-js/debug · GitHub)
6:55:29 PM: npm WARN deprecated multicodec@1.0.4: This module has been superseded by the multiformats module
6:55:29 PM: npm WARN deprecated multibase@0.7.0: This module has been superseded by the multiformats module
6:55:31 PM: npm WARN deprecated cids@0.7.5: This module has been superseded by the multiformats module
6:55:46 PM: added 1270 packages, and audited 1271 packages in 42s
6:55:46 PM: 146 packages are looking for funding
6:55:46 PM: run npm fund for details
6:55:46 PM: 10 moderate severity vulnerabilities
6:55:46 PM: To address issues that do not require attention, run:
6:55:46 PM: npm audit fix
6:55:46 PM: To address all issues (including breaking changes), run:
6:55:46 PM: npm audit fix --force
6:55:46 PM: Run npm audit for details.
6:55:46 PM: NPM modules installed
6:55:46 PM: Started restoring cached go cache
6:55:46 PM: Finished restoring cached go cache
6:55:46 PM: go version go1.16.5 linux/amd64
6:55:46 PM: go version go1.16.5 linux/amd64
6:55:46 PM: Installing missing commands
6:55:46 PM: Verify run directory
6:55:48 PM: ​
6:55:48 PM: ────────────────────────────────────────────────────────────────
6:55:48 PM: Netlify Build
6:55:48 PM: ────────────────────────────────────────────────────────────────
6:55:48 PM: ​
6:55:48 PM: ❯ Version
6:55:48 PM: @netlify/build 26.1.0
6:55:48 PM: ​
6:55:48 PM: ❯ Flags
6:55:48 PM: baseRelDir: true
6:55:48 PM: buildId: 61d659fed1916e0007fb637a
6:55:48 PM: deployId: 61d659fed1916e0007fb637c
6:55:48 PM: ​
6:55:48 PM: ❯ Current directory
6:55:48 PM: /opt/build/repo
6:55:48 PM: ​
6:55:48 PM: ❯ Config file
6:55:48 PM: No config file was defined: using default values.
6:55:48 PM: ​
6:55:48 PM: ❯ Context
6:55:48 PM: production
6:55:48 PM: ​
6:55:48 PM: ────────────────────────────────────────────────────────────────
6:55:48 PM: 1. Build command from Netlify app
6:55:48 PM: ────────────────────────────────────────────────────────────────
6:55:48 PM: ​
6:55:48 PM: $ npm run build
6:55:48 PM: > new-personal-site@1.0.0 build
6:55:48 PM: > webpack --mode production --config ./webpack.config.js
6:55:57 PM: assets by status 2.02 MiB [cached] 4 assets
6:55:57 PM: Entrypoint main = main.css main.bundle.js
6:55:57 PM: orphan modules 2.51 MiB (javascript) 937 bytes (runtime) [orphan] 878 modules
6:55:57 PM: runtime modules 1.13 KiB 5 modules
6:55:57 PM: cacheable modules 2.01 MiB (javascript) 820 bytes (css/mini-extract)
6:55:57 PM: modules by path ./node_modules/ 305 KiB 38 modules
6:55:57 PM: modules by path ./src/ 1.71 MiB (javascript) 820 bytes (css/mini-extract)
6:55:57 PM: ./src/index.js + 131 modules 1.71 MiB [built] [code generated]
6:55:57 PM: css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss 66 bytes [built] [code generated]
6:55:57 PM: css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss (1) 754 bytes [built] [code generated]
6:55:57 PM: ERROR in ./src/components/Footer.js 2:0-64
6:55:57 PM: Module not found: Error: Can’t resolve ‘…/assets/github-mark-light-120px-plus.png’ in '/opt/build/repo/src/components’resolve ‘…/assets/github-mark-light-120px-plus.png’ in ‘/opt/build/repo/src/components’
6:55:57 PM: using description file: /opt/build/repo/package.json (relative path: ./src/components)
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration using description file: /opt/build/repo/package.json (relative path: ./src/assets/github-mark-light-120px-plus.png)
6:55:57 PM: no extension
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png doesn’t exist .js
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.js doesn’t exist .ts
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.ts doesn’t exist .mjs
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.mjs doesn’t exist .json
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.json doesn’t exist .wasm
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.wasm doesn’t exist .gltf
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.gltf doesn’t exist .bin
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.bin doesn’t exist .glb
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/github-mark-light-120px-plus.png.glb doesn’t exist as directory
6:55:57 PM: /opt/build/repo/src/assets/github-mark-light-120px-plus.png doesn’t exist @ ./src/pages/Home.js 9:0-42 50:266-272
6:55:57 PM: @ ./src/App.js 14:0-32 35:46-50
6:55:57 PM: @ ./src/index.js 9:0-24 13:36-39
6:55:57 PM: ERROR in ./src/components/Footer.js 3:0-47
6:55:57 PM: Module not found: Error: Can’t resolve ‘…/assets/li-in-bug.png’ in '/opt/build/repo/src/components’resolve ‘…/assets/li-in-bug.png’ in ‘/opt/build/repo/src/components’
6:55:57 PM: using description file: /opt/build/repo/package.json (relative path: ./src/components)
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration using description file: /opt/build/repo/package.json (relative path: ./src/assets/li-in-bug.png)
6:55:57 PM: no extension
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png doesn’t exist .js
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.js doesn’t exist .ts
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.ts doesn’t exist .mjs
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.mjs doesn’t exist .json
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.json doesn’t exist .wasm
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.wasm doesn’t exist .gltf
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.gltf doesn’t exist .bin
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.bin doesn’t exist .glb
6:55:57 PM: Field ‘browser’ doesn’t contain a valid alias configuration /opt/build/repo/src/assets/li-in-bug.png.glb doesn’t exist as directory
6:55:57 PM: /opt/build/repo/src/assets/li-in-bug.png doesn’t exist @ ./src/pages/Home.js 9:0-42 50:266-272
6:55:57 PM: @ ./src/App.js 14:0-32 35:46-50
6:55:57 PM: @ ./src/index.js 9:0-24 13:36-39
6:55:57 PM: webpack 5.65.0 compiled with 2 errors in 7283 ms
6:55:57 PM: ​
6:55:57 PM: ────────────────────────────────────────────────────────────────
6:55:57 PM: “build.command” failed
6:55:57 PM: ────────────────────────────────────────────────────────────────
6:55:57 PM: ​
6:55:57 PM: Error message
6:55:57 PM: Command failed with exit code 1: npm run build
6:55:57 PM: ​
6:55:57 PM: Error location
6:55:57 PM: In Build command from Netlify app:
6:55:57 PM: npm run build
6:55:57 PM: ​
6:55:57 PM: Resolved config
6:55:57 PM: build:
6:55:57 PM: base: /opt/build/repo
6:55:57 PM: command: npm run build
6:55:57 PM: commandOrigin: ui
6:55:57 PM: publish: /opt/build/repo/dist
6:55:57 PM: publishOrigin: ui
6:55:57 PM: Caching artifacts
6:55:57 PM: Started saving node modules
6:55:57 PM: Finished saving node modules
6:55:57 PM: Started saving build plugins
6:55:57 PM: Finished saving build plugins
6:55:57 PM: Started saving pip cache
6:55:57 PM: Finished saving pip cache
6:55:57 PM: Started saving emacs cask dependencies
6:55:57 PM: Finished saving emacs cask dependencies
6:55:57 PM: Started saving maven dependencies
6:55:57 PM: Finished saving maven dependencies
6:55:57 PM: Started saving boot dependencies
6:55:58 PM: Finished saving boot dependencies
6:55:58 PM: Started saving rust rustup cache
6:55:58 PM: Finished saving rust rustup cache
6:55:58 PM: Started saving go dependencies
6:55:58 PM: Finished saving go dependencies
6:55:59 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:55:59 PM: Creating deploy upload records
6:55:59 PM: Failing build: Failed to build site
6:56:00 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
6:56:00 PM: Finished processing build request in 1m3.480030455s

Hi @victorsh

Welcome to the forums

The issue here is one of case-sensitivity. The file import github-mark-light-120px-plus.png does not match the file in GitHub which is GitHub-Mark-Light-120px-plus.png. The same applies to li-in-bug.png which is LI-In-Bug.png.

Filenames used in imports must match that of the filesystem. Windows (and sometimes macOS) doesn’t care about filename case. Linux does.

Just tried building again after changing the image names to just github.png and linkedin.png. That resulted in a successful build. My issue for this case wasn’t the capitalization, I believe it was the dashes.

1 Like

I’m fairly certain it was the capitalisation, not the dashes.

Good that you got the build to succeed/

1 Like

Glad everything is working now! Thanks for letting us know :netliconfetti: