Webpack can't resolve url only during cloud build, working fine locally

Support
, ,
1

Hi,

I’ve spent longer than I care to admit trying to figure this out and I was hoping someone could help out with this.

I have a React frontend SPA with a Node Express server on the backend in a monorepo. This question only pertains to the deployment of the React SPA though. I’ve encountered this while trying to deploy to both Netlify and Vercel.

Here’s the project structure of my repo:

myproject
- package.json
- packages
  - api
    - ...
  - web
    - dist
      - index.html
      - static  // all minified by webpack 
        - js
        - css
        - media
        - fonts
          - x.hash.ttf
          - y.hash.ttf
          - ... .hash.ttf
    - public
      - index.html  // source html file
    - src
      - index.css
      - index.tsx
      - assets
        - roboto
          - x.ttf
          - y.ttf
          - ... .ttf
      - ...

However, during the build, I get an error message. I understand this is to do with resolving of the urls during the build, but I can’t wrap my head around why this would be occuring during the build process in the cloud deployments.

I’ve tinkered with the webpack configuration quite a bit, trying to see if changing the output.publicPath property would make any difference, but values of “/”, “./”, “…/”, and “…/…/” for the outputs.publicPath property still result in the error, although they still allow my local build to be successful as well.

I’d really appreciate any help with getting this sorted out.

Site Name: stupefied-hawking-c1cdae

Build Settings:

image
image1276×895 46.4 KB

Build Log:

11:08:29 AM: Build ready to start
11:08:31 AM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68
11:08:31 AM: build-image tag: v3.6.1
11:08:31 AM: buildbot version: d35018babe252245044d3565f193fa426818b4b1
11:08:31 AM: Fetching cached dependencies
11:08:31 AM: Starting to download cache of 142.2MB
11:08:33 AM: Finished downloading cache in 1.31536565s
11:08:33 AM: Starting to extract cache
11:08:42 AM: Finished extracting cache in 9.233550232s
11:08:42 AM: Finished fetching cache in 10.607661791s
11:08:42 AM: Starting to prepare the repo for build
11:08:42 AM: Preparing Git Reference refs/heads/master
11:08:44 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'packages/web' versus '/packages/web' in the Netlify UI
11:08:44 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'packages/web/dist' versus 'dist' in the Netlify UI
11:08:44 AM: Starting build script
11:08:45 AM: Installing dependencies
11:08:45 AM: Python version set to 2.7
11:08:45 AM: Started restoring cached node version
11:08:48 AM: Finished restoring cached node version
11:08:49 AM: v12.18.0 is already installed.
11:08:50 AM: Now using node v12.18.0 (npm v6.14.4)
11:08:50 AM: Started restoring cached build plugins
11:08:50 AM: Finished restoring cached build plugins
11:08:50 AM: Attempting ruby version 2.7.1, read from environment
11:08:52 AM: Using ruby version 2.7.1
11:08:52 AM: Using PHP version 5.6
11:08:52 AM: Started restoring cached node modules
11:08:52 AM: Finished restoring cached node modules
11:08:52 AM: Installing NPM modules using NPM version 6.14.4
11:09:03 AM: npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
11:09:08 AM: npm notice created a lockfile as package-lock.json. You should commit this file.
11:09:08 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules/chokidar/node_modules/fsevents):
11:09:08 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
11:09:08 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
11:09:08 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
11:09:08 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
11:09:08 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
11:09:08 AM: npm WARN @reach/router@1.3.4 requires a peer of react@15.x || 16.x || 16.4.0-alpha.0911da3 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN @reach/router@1.3.4 requires a peer of react-dom@15.x || 16.x || 16.4.0-alpha.0911da3 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN create-react-context@0.3.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN dotenv-webpack@1.8.0 requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN react-helmet-async@1.0.7 requires a peer of react@^16.6.0 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN react-helmet-async@1.0.7 requires a peer of react-dom@^16.6.0 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN react-inspector@5.1.0 requires a peer of react@^16.8.4 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN react-sizeme@2.6.12 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN react-sizeme@2.6.12 requires a peer of react-dom@^0.14.0 || ^15.0.0-0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN webpack-filter-warnings-plugin@1.2.1 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
11:09:08 AM: npm WARN web@0.0.1 No repository field.
11:09:08 AM: added 24 packages from 14 contributors and audited 1880 packages in 14.374s
11:09:09 AM: 176 packages are looking for funding
11:09:09 AM:   run `npm fund` for details
11:09:09 AM: found 1 high severity vulnerability
11:09:09 AM:   run `npm audit fix` to fix them, or `npm audit` for details
11:09:09 AM: NPM modules installed
11:09:10 AM: Started restoring cached go cache
11:09:10 AM: Finished restoring cached go cache
11:09:10 AM: go version go1.14.4 linux/amd64
11:09:10 AM: go version go1.14.4 linux/amd64
11:09:10 AM: Installing missing commands
11:09:10 AM: Verify run directory
11:09:12 AM: ​
11:09:12 AM: ────────────────────────────────────────────────────────────────
11:09:12 AM:   Netlify Build                                                 
11:09:12 AM: ────────────────────────────────────────────────────────────────
11:09:12 AM: ​
11:09:12 AM: ❯ Version
11:09:12 AM:   @netlify/build 9.0.0
11:09:12 AM: ​
11:09:12 AM: ❯ Flags
11:09:12 AM:   deployId: 6020107d8fae5d0007e26622
11:09:12 AM:   mode: buildbot
11:09:12 AM: ​
11:09:12 AM: ❯ Current directory
11:09:12 AM:   /opt/build/repo/packages/web
11:09:12 AM: ​
11:09:12 AM: ❯ Config file
11:09:12 AM:   No config file was defined: using default values.
11:09:12 AM: ​
11:09:12 AM: ❯ Context
11:09:12 AM:   production
11:09:12 AM: ​
11:09:12 AM: ────────────────────────────────────────────────────────────────
11:09:12 AM:   1. Build command from Netlify app                             
11:09:12 AM: ────────────────────────────────────────────────────────────────
11:09:12 AM: ​
11:09:12 AM: $ webpack --env mode=production
11:09:32 AM: assets by status 467 KiB [cached] 4 assets
11:09:33 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
11:09:32 AM: orphan modules 3.78 MiB [orphan] 72 modules
11:09:32 AM: runtime modules 917 bytes 5 modules
11:09:32 AM: cacheable modules 4.03 MiB
11:09:32 AM:   modules by path ./node_modules/ 256 KiB
11:09:32 AM:     modules by path ./node_modules/axios/ 41.3 KiB 27 modules
11:09:32 AM:     modules by path ./node_modules/@babel/runtime/ 6.04 KiB 18 modules
11:09:32 AM:     modules by path ./node_modules/normalize-wheel/ 16.8 KiB 5 modules
11:09:32 AM:     modules by path ./node_modules/prop-types/ 2.58 KiB 3 modules
11:09:32 AM:     modules by path ./node_modules/react/ 6.48 KiB 2 modules
11:09:32 AM:     modules by path ./node_modules/react-dom/ 119 KiB 2 modules
11:09:32 AM:     modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
11:09:32 AM:     modules by path ./node_modules/react-is/ 2.69 KiB 2 modules
11:09:32 AM:   modules by path ./src/ 3.78 MiB
11:09:32 AM:     ./src/index.tsx + 70 modules 3.78 MiB [built] [code generated]
11:09:32 AM:     ./src/index.css 39 bytes [built] [code generated] [1 error]
11:09:32 AM: ERROR in ./src/index.css
11:09:32 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
11:09:32 AM: ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
11:09:32 AM: Error: Can't resolve 'assets/fonts/roboto/Roboto-Thinitalic.ttf' in '/opt/build/repo/packages/web/src'    at finishWithoutResolve (/opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:362:15
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
11:09:32 AM:     at eval (eval at create (/opt/build/repo/packages/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
11:09:32 AM:     at eval (eval at create (/opt/build/repo/packages/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
11:09:32 AM:     at eval (eval at create (/opt/build/repo/packages/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
11:09:32 AM:     at processResult (/opt/build/repo/packages/web/node_modules/webpack/lib/NormalModule.js:598:19)
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/webpack/lib/NormalModule.js:692:5
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/loader-runner/lib/LoaderRunner.js:399:11
11:09:32 AM:     at /opt/build/repo/packages/web/node_modules/loader-runner/lib/LoaderRunner.js:251:18
11:09:32 AM:     at context.callback (/opt/build/repo/packages/web/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
11:09:32 AM:     at Object.loader (/opt/build/repo/packages/web/node_modules/css-loader/dist/index.js:155:5)
11:09:32 AM:     at processTicksAndRejections (internal/process/task_queues.js:97:5)
11:09:32 AM:  @ ./src/index.tsx 4:0-21
11:09:32 AM: 1 ERROR in child compilations
11:09:32 AM: webpack 5.21.1 compiled with 2 errors in 19039 ms
11:09:32 AM: ​
11:09:32 AM: ────────────────────────────────────────────────────────────────
11:09:32 AM:   "build.command" failed                                        
11:09:32 AM: ────────────────────────────────────────────────────────────────
11:09:32 AM: ​
11:09:32 AM:   Error message
11:09:32 AM:   Command failed with exit code 1: webpack --env mode=production
11:09:32 AM: ​
11:09:32 AM:   Error location
11:09:32 AM:   In Build command from Netlify app:
11:09:32 AM:   webpack --env mode=production
11:09:32 AM: ​
11:09:32 AM:   Resolved config
11:09:32 AM:   build:
11:09:32 AM:     base: /opt/build/repo/packages/web
11:09:32 AM:     command: webpack --env mode=production
11:09:32 AM:     commandOrigin: ui
11:09:32 AM:     publish: /opt/build/repo/packages/web/dist
11:09:32 AM: Caching artifacts
11:09:32 AM: Started saving node modules
11:09:32 AM: Finished saving node modules
11:09:32 AM: Started saving build plugins
11:09:32 AM: Finished saving build plugins
11:09:32 AM: Started saving pip cache
11:09:33 AM: Finished saving pip cache
11:09:33 AM: Started saving emacs cask dependencies
11:09:33 AM: Finished saving emacs cask dependencies
11:09:33 AM: Started saving maven dependencies
11:09:33 AM: Finished saving maven dependencies
11:09:33 AM: Started saving boot dependencies
11:09:33 AM: Finished saving boot dependencies
11:09:33 AM: Started saving rust rustup cache
11:09:33 AM: Finished saving rust rustup cache
11:09:33 AM: Started saving go dependencies
11:09:33 AM: Finished saving go dependencies
11:09:33 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
11:09:33 AM: Failing build: Failed to build site
11:09:33 AM: Finished processing build request in 1m2.004091389s
2

Hi everyone, this was (unsurprisingly) a very silly mistake on my part. I had mixed up the casing in a character in the imports “italic” vs “Italic” - my local OS still picked this up fine but when deploying to cloud, the file was not resolved.

Thanks to anyone who took the time to try to help!

1 Like
3

Good catch! Those case sensitive difference can really trip us up. Glad you got things resolved. :+1: