Development Server doesn't load the app without React Dev Tools browser plugin installed

[designorant]

Describe the bug

Development server doesn't serve the app landing page without React Dev Tools installed limiting development to browsers with React Dev Tools plugins. However useful, there's nothing in the docs that mention React Dev Tools requirement.

Did you try recovering your dependencies?

Yep, no luck.

❯ node -v
v14.15.4
❯ npm -v
6.14.10

Note npm isn't laetest. npm@14.15.4 comes with node@14.15.4 by default, but problem occurs with latest yarn anyway so this is likely caused internally.

Which terms did you search for in User Guide?

devtools
dev tools

Environment

Environment Info:

  current version of create-react-app: 4.0.2
  running from /Users/designorant/.npm/_npx/11344/lib/node_modules/create-react-app

  System:
    OS: macOS 11.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.15.4 - ~/.nodenv/versions/14.15.4/bin/node
    Yarn: Not Found
    npm: 6.14.10 - ~/.nodenv/versions/14.15.4/bin/npm
  Browsers:
    Chrome: 88.0.4324.146
    Edge: 86.0.622.38
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.1 => 4.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Run npx create-react-app my-app
2. Start the project with either npm start or yarn start

Expected behavior

CRA Landing Page is visible at http://localhost:3000

Actual behavior

http://localhost:3000 serves a blank page with the following error:

react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
    at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:8)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Looking at you, react-refresh-webpack-plugin.

Reproducible demo

No live demo I'm afraid, but reproduction takes very little time.

[designorant]

Turns out this was reported already (surprise, surprise), albeit in a non-standard way, and has gone quiet with a solution that actually causes the issue to appear now.

1. compiled successfully,but websit is bank! #9922
2. Cannot read property 'forEach' of undefined #10242

Right now this issue comes away as soon as React Dev Tools (currently 4.10.1 (12/4/2020)) is installed.

[hapablap21]

Any suggestions for fixing this when the app is running in electron? I use electron-devtools-installer and it successfully starts and installs, but apparently that's not enough.

[Whyseverythingtaken]

I had a similar issue while testing my web app in Browserstack. Switching off fast refresh worked for me.

// env.local

FAST_REFRESH=false

[thany]

I had a similar issue while testing my web app in Browserstack. Switching off fast refresh worked for me.

// env.local

FAST_REFRESH=false

Doesn't work for me. I am 100% sure the env.local flags are picked up, as I have more in there that work perfectly fine. So that ain't the issue for me. Fast refresh is still being loaded and it's still breaking the site in the same way. Ergo, this trick doesn't work (although it's good to know it does for your specific scenario).