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