MultiCompiler (array of webpack configs) causes "Cannot read property 'tap' of undefined" in WebpackDevServerUtils.js at `npm start`

Describe the bug

After turning my webpack into a MultiCompiler (returning an array of configs instead of a single object to webpack), npm start would fail with a Cannot read property 'tap' of undefined error.

Did you try recovering your dependencies?

yes, did not help

Which terms did you search for in User Guide?

“npm start error” “tap undefined”. Did not find anything relevant.

Environment

npx: installed 98 in 7.446s

Environment Info:

  current version of create-react-app: 3.4.1
  running from <homedir>/.npm/_npx/59886/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 76.0.1
    Safari: 14.0
  npmPackages:
    react: ^16.9.0 => 16.13.1 
    react-dom: ^16.9.0 => 16.13.1 
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. generate an array-of-configs in webpack.config.js (i.e. a MultiCompiler) based on the create-react-app config, with typescript enabled
2. npm start

Expected behavior

devserver should start without error

Actual behavior

On npm start, the following error appears.

> cmp@0.1.0 start <app path>
> node scripts/start.js

Cannot read property 'tap' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cmp@0.1.0 start: `node scripts/start.js`
npm ERR! Exit status 1

Debugging with node --inspect-brk ./scripts/start.js indicates the problem is at https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/WebpackDevServerUtils.js#L143

    compiler.hooks.beforeCompile.tap('beforeCompile', () => {

because MultiCompiler does not have a beforeCompile in hooks, it only has done, invalid, run, watchClose, watchRun, and infrastructureLog in hooks.

I fixed it with the following patch, but it seems incomplete, as it doesn’t handle the hooks.failed in isSmokeTest below (wasn’t quite sure if I should hook all the compilers, or just the last one). It also hangs with the message Files successfully emitted, waiting for typecheck results... after running npm start, but the devserver seems to work anyways.

--- node_modules/react-dev-utils/WebpackDevServerUtils.js	1985-10-26 01:15:00.000000000 -0700
+++ patches/WebpackDevServerUtils.js	2020-09-22 11:22:48.000000000 -0700
@@ -138,8 +138,11 @@
   let tsMessagesPromise;
   let tsMessagesResolver;
 
+  var isMulti = compiler.compilers && compiler.compilers.length > 0;
+  var firstCompiler = isMulti ? compiler.compilers[0] : compiler;
+
   if (useTypeScript) {
-    compiler.hooks.beforeCompile.tap('beforeCompile', () => {
+    firstCompiler.hooks.beforeCompile.tap('beforeCompile', () => {
       tsMessagesPromise = new Promise(resolve => {
         tsMessagesResolver = msgs => resolve(msgs);
       });

Reproducible demo

(working on a minimal repro)

[as-zlynn-philipps]

Solution for me was to set FAST_REFRESH=false in .env file. There goes 3 hours I’ll never get back.

[michaeltomasik]

Hey, any update on this one?