Build is failing after switching to @pmmmwh/react-refresh-webpack-plugin

Builds are failing after I switched to @pmmmwh/react-refresh-webpack-plugin from react-hot-loader. I’m guessing that it’s that package after looking at this line:

Error: Cannot find module '@pmmmwh/react-refresh-webpack-plugin

Netlify site name:
naughty-euler-40a419.netlify.app

Link to the full build:
https://app.netlify.com/sites/naughty-euler-40a419/deploys/5f34860086a2fd000823d6a1

The repo is private, do I need to share the code?

5:14:56 PM: Build ready to start
5:14:58 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
5:14:58 PM: build-image tag: v3.4.1
5:14:58 PM: buildbot version: 9042ba4998dab698f1f37fb8d36912c08a387191
5:14:58 PM: Fetching cached dependencies
5:14:58 PM: Starting to download cache of 261.6MB
5:15:00 PM: Finished downloading cache in 2.301318568s
5:15:00 PM: Starting to extract cache
5:15:11 PM: Finished extracting cache in 10.116297635s
5:15:11 PM: Finished fetching cache in 12.529279915s
5:15:11 PM: Starting to prepare the repo for build
5:15:11 PM: Preparing Git Reference refs/heads/master
5:15:14 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'dist' versus 'dist/' in the Netlify UI
5:15:14 PM: Starting build script
5:15:14 PM: Installing dependencies
5:15:14 PM: Python version set to 2.7
5:15:14 PM: Started restoring cached node version
5:15:17 PM: Finished restoring cached node version
5:15:18 PM: v10.22.0 is already installed.
5:15:18 PM: Now using node v10.22.0 (npm v6.14.6)
5:15:18 PM: Started restoring cached build plugins
5:15:18 PM: Finished restoring cached build plugins
5:15:19 PM: Attempting ruby version 2.6.2, read from environment
5:15:20 PM: Using ruby version 2.6.2
5:15:20 PM: Using PHP version 5.6
5:15:20 PM: 5.2 is already installed.
5:15:20 PM: Using Swift version 5.2
5:15:20 PM: Started restoring cached node modules
5:15:20 PM: Finished restoring cached node modules
5:15:20 PM: Installing NPM modules using NPM version 6.14.6
5:15:33 PM: npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
5:15:33 PM: added 3 packages from 3 contributors, removed 60 packages, updated 12 packages and audited 2100 packages in 11.384s
5:15:34 PM: 24 packages are looking for funding
5:15:34 PM:   run `npm fund` for details
5:15:34 PM: found 0 vulnerabilities
5:15:34 PM: NPM modules installed
5:15:34 PM: Started restoring cached go cache
5:15:36 PM: Finished restoring cached go cache
5:15:36 PM: Installing Go version 1.12
5:15:36 PM: unset GOOS;
5:15:36 PM: unset GOARCH;
5:15:36 PM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64';
5:15:36 PM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}";
5:15:36 PM: go version >&2;
5:15:36 PM: export GIMME_ENV='/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env';
5:15:36 PM: go version go1.12 linux/amd64
5:15:36 PM: Installing missing commands
5:15:36 PM: Verify run directory
5:15:37 PM: ​
5:15:37 PM: ┌─────────────────────────────┐
5:15:37 PM: │        Netlify Build        │
5:15:37 PM: └─────────────────────────────┘
5:15:37 PM: ​
5:15:37 PM: ❯ Version
5:15:37 PM:   @netlify/build 3.1.10
5:15:37 PM: ​
5:15:37 PM: ❯ Flags
5:15:37 PM:   deployId: 5f34860086a2fd000823d6a1
5:15:37 PM:   mode: buildbot
5:15:37 PM:   timersFile: /tmp/substage_times.txt
5:15:37 PM: ​
5:15:37 PM: ❯ Current directory
5:15:37 PM:   /opt/build/repo
5:15:37 PM: ​
5:15:37 PM: ❯ Config file
5:15:37 PM:   No config file was defined: using default values.
5:15:37 PM: ​
5:15:37 PM: ❯ Context
5:15:37 PM:   production
5:15:37 PM: ​
5:15:37 PM: ┌───────────────────────────────────┐
5:15:37 PM: │ 1. Build command from Netlify app │
5:15:37 PM: └───────────────────────────────────┘
5:15:37 PM: ​
5:15:37 PM: $ set NODE_ENV=production && webpack --mode production
5:15:37 PM: /opt/build/repo/node_modules/webpack-cli/bin/cli.js:93
5:15:37 PM: 				throw err;
5:15:37 PM: 				^
5:15:37 PM: Error: Cannot find module '@pmmmwh/react-refresh-webpack-plugin'
5:15:37 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
5:15:37 PM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
5:15:37 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)
5:15:37 PM:     at require (/opt/build/repo/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
5:15:37 PM:     at Object.<anonymous> (/opt/build/repo/webpack.config.js:7:35)
5:15:37 PM:     at Module._compile (/opt/build/repo/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
5:15:37 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
5:15:37 PM:     at Module.load (internal/modules/cjs/loader.js:653:32)
5:15:37 PM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
5:15:37 PM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
5:15:37 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)
5:15:37 PM:     at require (/opt/build/repo/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
5:15:37 PM:     at WEBPACK_OPTIONS (/opt/build/repo/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
5:15:37 PM:     at requireConfig (/opt/build/repo/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
5:15:37 PM:     at /opt/build/repo/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
5:15:37 PM:     at Array.forEach (<anonymous>)
5:15:37 PM:     at module.exports (/opt/build/repo/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
5:15:37 PM:     at yargs.parse (/opt/build/repo/node_modules/webpack-cli/bin/cli.js:71:45)
5:15:37 PM:     at Object.parse (/opt/build/repo/node_modules/yargs/yargs.js:576:18)
5:15:37 PM:     at /opt/build/repo/node_modules/webpack-cli/bin/cli.js:49:8
5:15:37 PM:     at Object.<anonymous> (/opt/build/repo/node_modules/webpack-cli/bin/cli.js:366:3)
5:15:37 PM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
5:15:37 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
5:15:37 PM:     at Module.load (internal/modules/cjs/loader.js:653:32)
5:15:37 PM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
5:15:37 PM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
5:15:37 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)
5:15:37 PM:     at require (internal/modules/cjs/helpers.js:25:18)
5:15:37 PM:     at Object.<anonymous> (/opt/build/repo/node_modules/webpack/bin/webpack.js:156:2)
5:15:37 PM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
5:15:37 PM: ​
5:15:37 PM: ┌─────────────────────────────┐
5:15:37 PM: │   "build.command" failed    │
5:15:37 PM: └─────────────────────────────┘
5:15:37 PM: ​
5:15:37 PM:   Error message
5:15:37 PM:   Command failed with exit code 1: set NODE_ENV=production && webpack --mode production
5:15:37 PM: ​
5:15:37 PM:   Error location
5:15:37 PM:   In Build command from Netlify app:
5:15:37 PM:   set NODE_ENV=production && webpack --mode production
5:15:37 PM: ​
5:15:37 PM:   Resolved config
5:15:37 PM:   build:
5:15:37 PM:     command: set NODE_ENV=production && webpack --mode production
5:15:37 PM:     commandOrigin: ui
5:15:37 PM:     environment:
5:15:37 PM:       - FB_APP_ID
5:15:37 PM:       - NODE_ENV
5:15:37 PM:     publish: /opt/build/repo/dist
5:15:38 PM: Caching artifacts
5:15:38 PM: Started saving node modules
5:15:38 PM: Finished saving node modules
5:15:38 PM: Started saving build plugins
5:15:38 PM: Finished saving build plugins
5:15:38 PM: Started saving pip cache
5:15:38 PM: Finished saving pip cache
5:15:38 PM: Started saving emacs cask dependencies
5:15:38 PM: Finished saving emacs cask dependencies
5:15:38 PM: Started saving maven dependencies
5:15:38 PM: Finished saving maven dependencies
5:15:38 PM: Started saving boot dependencies
5:15:38 PM: Finished saving boot dependencies
5:15:38 PM: Started saving go dependencies
5:15:39 PM: Finished saving go dependencies
5:15:39 PM: Error running command: Build script returned non-zero exit code: 1
5:15:39 PM: Failing build: Failed to build site
5:15:39 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
5:15:39 PM: Finished processing build request in 41.707821569s

I’ve learned that I was globally requiring this plugin in my webpack config file.
So I added
const ReactRefreshWebpackPlugin = isDevelopment ? require('@pmmmwh/react-refresh-webpack-plugin') : null;

However now I’m getting a build fail due to babel-loader

10:21:29 PM: Build ready to start
10:21:31 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
10:21:31 PM: build-image tag: v3.4.1
10:21:31 PM: buildbot version: 9042ba4998dab698f1f37fb8d36912c08a387191
10:21:31 PM: Fetching cached dependencies
10:21:31 PM: Starting to download cache of 261.6MB
10:21:40 PM: Finished downloading cache in 8.557573758s
10:21:40 PM: Starting to extract cache
10:21:51 PM: Finished extracting cache in 11.364612709s
10:21:51 PM: Finished fetching cache in 20.024824373s
10:21:51 PM: Starting to prepare the repo for build
10:21:51 PM: Preparing Git Reference refs/heads/master
10:21:55 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'dist' versus 'dist/' in the Netlify UI
10:21:55 PM: Starting build script
10:21:55 PM: Installing dependencies
10:21:55 PM: Python version set to 2.7
10:21:57 PM: Started restoring cached node version
10:22:01 PM: Finished restoring cached node version
10:22:03 PM: v10.22.0 is already installed.
10:22:03 PM: Now using node v10.22.0 (npm v6.14.6)
10:22:03 PM: Started restoring cached build plugins
10:22:03 PM: Finished restoring cached build plugins
10:22:04 PM: Attempting ruby version 2.6.2, read from environment
10:22:05 PM: Using ruby version 2.6.2
10:22:06 PM: Using PHP version 5.6
10:22:06 PM: 5.2 is already installed.
10:22:06 PM: Using Swift version 5.2
10:22:06 PM: Started restoring cached node modules
10:22:06 PM: Finished restoring cached node modules
10:22:06 PM: Installing NPM modules using NPM version 6.14.6
10:22:20 PM: npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
10:22:20 PM: added 3 packages from 3 contributors, removed 60 packages, updated 12 packages and audited 2100 packages in 13.092s
10:22:21 PM: 24 packages are looking for funding
10:22:21 PM:   run `npm fund` for details
10:22:21 PM: found 0 vulnerabilities
10:22:21 PM: NPM modules installed
10:22:22 PM: Started restoring cached go cache
10:22:23 PM: Finished restoring cached go cache
10:22:23 PM: Installing Go version 1.12
10:22:23 PM: unset GOOS;
10:22:23 PM: unset GOARCH;
10:22:23 PM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64';
10:22:23 PM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}";
10:22:23 PM: go version >&2;
10:22:23 PM: export GIMME_ENV='/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env';
10:22:23 PM: go version go1.12 linux/amd64
10:22:23 PM: Installing missing commands
10:22:23 PM: Verify run directory
10:22:25 PM: ​
10:22:25 PM: ┌─────────────────────────────┐
10:22:25 PM: │        Netlify Build        │
10:22:25 PM: └─────────────────────────────┘
10:22:25 PM: ​
10:22:25 PM: ❯ Version
10:22:25 PM:   @netlify/build 3.1.10
10:22:25 PM: ​
10:22:25 PM: ❯ Flags
10:22:25 PM:   deployId: 5f34cdd9cc17b70007c387ba
10:22:25 PM:   mode: buildbot
10:22:25 PM:   timersFile: /tmp/substage_times.txt
10:22:25 PM: ​
10:22:25 PM: ❯ Current directory
10:22:25 PM:   /opt/build/repo
10:22:25 PM: ​
10:22:25 PM: ❯ Config file
10:22:25 PM:   No config file was defined: using default values.
10:22:25 PM: ​
10:22:25 PM: ❯ Context
10:22:25 PM:   production
10:22:25 PM: ​
10:22:25 PM: ┌───────────────────────────────────┐
10:22:25 PM: │ 1. Build command from Netlify app │
10:22:25 PM: └───────────────────────────────────┘
10:22:25 PM: ​
10:22:25 PM: $ set NODE_ENV=production && webpack --mode production
10:22:29 PM: Hash: d7bec1aab8a43daf0d24
10:22:29 PM: Version: webpack 4.44.1
10:22:29 PM: Time: 3256ms
10:22:29 PM: Built at: 08/13/2020 5:22:29 AM
10:22:29 PM:  1 asset
10:22:29 PM: Entrypoint main = index_bundle.js
10:22:29 PM: [0] ./src/index.jsx 1.93 KiB {0} [built] [failed] [1 error]
10:22:29 PM: ERROR in ./src/index.jsx
10:22:29 PM: Module build failed (from ./node_modules/babel-loader/lib/index.js):
10:22:29 PM: Error: /opt/build/repo/src/index.jsx: Cannot find module 'trim-right'
10:22:29 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
10:22:29 PM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
10:22:29 PM:     at Module.require (internal/modules/cjs/loader.js:692:17)
10:22:29 PM:     at require (/opt/build/repo/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
10:22:29 PM:     at _trimRight (/opt/build/repo/node_modules/@babel/generator/lib/buffer.js:9:39)
10:22:29 PM:     at Buffer.get (/opt/build/repo/node_modules/@babel/generator/lib/buffer.js:47:17)
10:22:29 PM:     at Generator.generate (/opt/build/repo/node_modules/@babel/generator/lib/printer.js:74:22)
10:22:29 PM:     at Generator.generate (/opt/build/repo/node_modules/@babel/generator/lib/index.js:24:18)
10:22:29 PM:     at _default (/opt/build/repo/node_modules/@babel/generator/lib/index.js:91:14)
10:22:29 PM:     at generateCode (/opt/build/repo/node_modules/@babel/core/lib/transformation/file/generate.js:57:39)
10:22:29 PM:     at run (/opt/build/repo/node_modules/@babel/core/lib/transformation/index.js:55:33)
10:22:29 PM:     at run.next (<anonymous>)
10:22:29 PM:     at Function.transform (/opt/build/repo/node_modules/@babel/core/lib/transform.js:27:41)
10:22:29 PM:     at transform.next (<anonymous>)
10:22:29 PM:     at step (/opt/build/repo/node_modules/gensync/index.js:254:32)
10:22:29 PM:     at gen.next (/opt/build/repo/node_modules/gensync/index.js:266:13)
10:22:29 PM:     at async.call.value (/opt/build/repo/node_modules/gensync/index.js:216:11)
10:22:29 PM:     at errback.call (/opt/build/repo/node_modules/gensync/index.js:184:28)
10:22:29 PM:     at runGenerator.errback (/opt/build/repo/node_modules/@babel/core/lib/gensync-utils/async.js:72:7)
10:22:29 PM:     at val (/opt/build/repo/node_modules/gensync/index.js:108:33)
10:22:29 PM:     at step (/opt/build/repo/node_modules/gensync/index.js:280:14)
10:22:29 PM:     at gen.next (/opt/build/repo/node_modules/gensync/index.js:266:13)
10:22:29 PM:     at async.call.value (/opt/build/repo/node_modules/gensync/index.js:216:11)
10:22:29 PM: Child html-webpack-plugin for "index.html":
10:22:29 PM:      1 asset
10:22:29 PM:     Entrypoint undefined = ./index.html
10:22:29 PM:     [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.47 KiB {0} [built]
10:22:29 PM:     [2] (webpack)/buildin/global.js 472 bytes {0} [built]
10:22:29 PM:     [3] (webpack)/buildin/module.js 497 bytes {0} [built]
10:22:29 PM:         + 1 hidden module
10:22:29 PM: ​
10:22:29 PM: ┌─────────────────────────────┐
10:22:29 PM: │   "build.command" failed    │
10:22:29 PM: └─────────────────────────────┘
10:22:29 PM: ​
10:22:29 PM:   Error message
10:22:29 PM:   Command failed with exit code 2: set NODE_ENV=production && webpack --mode production
10:22:29 PM: ​
10:22:29 PM:   Error location
10:22:29 PM:   In Build command from Netlify app:
10:22:29 PM:   set NODE_ENV=production && webpack --mode production
10:22:29 PM: ​
10:22:29 PM:   Resolved config
10:22:29 PM:   build:
10:22:29 PM:     command: set NODE_ENV=production && webpack --mode production
10:22:29 PM:     commandOrigin: ui
10:22:29 PM:     environment:
10:22:29 PM:       - FB_APP_ID
10:22:29 PM:       - NODE_ENV
10:22:29 PM:     publish: /opt/build/repo/dist
10:22:29 PM: Caching artifacts
10:22:29 PM: Started saving node modules
10:22:29 PM: Finished saving node modules
10:22:29 PM: Started saving build plugins
10:22:29 PM: Finished saving build plugins
10:22:29 PM: Started saving pip cache
10:22:30 PM: Finished saving pip cache
10:22:30 PM: Started saving emacs cask dependencies
10:22:30 PM: Finished saving emacs cask dependencies
10:22:30 PM: Started saving maven dependencies
10:22:30 PM: Finished saving maven dependencies
10:22:30 PM: Started saving boot dependencies
10:22:30 PM: Finished saving boot dependencies
10:22:30 PM: Started saving go dependencies
10:22:31 PM: Finished saving go dependencies
10:22:31 PM: Error running command: Build script returned non-zero exit code: 1
10:22:31 PM: Failing build: Failed to build site
10:22:31 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
10:22:31 PM: Finished processing build request in 1m0.47515405s

Hi, @jsphkm. Our support team is rarely able to troubleshoot third-party code (which isn’t covered by the scope or our support).

I can see there is an error but I don’t have any more information about why there is an error than the logs shows.

It might help to test this locally in a fresh clone of the repository. By this I mean, do not test in your current local clone of the repo. Your local directory might have differences not represent/store in the repo itself.

Move to a new and/or temporary directory. Then clone the repo there (from upstream). Next do the dependency install and then run the build command.

If the build in the new clone build is successful, then there is some difference between your local system and Netlify. Tracking down and resolving this difference will be the solution.

However, if the new clone build has the same error, then the issue in with the repository itself and has nothing to do with Netlify.

If you grant access to this repo to one of our support team, we can also test the fresh clone and build process.

​Please let us know if there are other questions and/or if the freshly cloned repo build is successful.