Repository: create-react-app
Issue: MultiCompiler (array of webpack configs) causes "Cannot read property 'tap' of undefined" in WebpackDevServerUtils.js at `npm start`
Labels: needs triage,issue: bug report

### 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](https://github.com/webpack/webpack/blob/master/lib/MultiCompiler.js#L57) 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

<!--
  If you can, please share a project that reproduces the issue.
  This is the single most effective way to get an issue fixed soon.

  There are two ways to do it:

    * Create a new app and try to reproduce the issue in it.
      This is useful if you roughly know where the problem is, or can’t share the real code.

    * Or, copy your app and remove things until you’re left with the minimal reproducible demo.
      This is useful for finding the root cause. You may then optionally create a new project.

  This is a good guide to creating bug demos: https://stackoverflow.com/help/mcve
  Once you’re done, push the project to GitHub and paste the link to it below:
-->

(working on a minimal repro)

<!--
  What happens if you skip this step?

  We will try to help you, but in many cases it is impossible because crucial
  information is missing. In that case we'll tag an issue as having a low priority,
  and eventually close it if there is no clear direction.

  We still appreciate the report though, as eventually somebody else might
  create a reproducible example for it.

  Thanks for helping us help you!
-->