create-react-app: IE11 no longer works when upgrading react-scripts from 3.4.3 to 4.0.1 (react-scripts 4.0.1 is not compatible with react-app-polyfill 1.0.6 or 2.0.0)

Describe the bug

I get the following error when launching IE11 after upgrading to react-scripts v4.0.1: Error: You must pass a component to the function returned by connect. Instead received { "$$typeof": 60112, "propTypes": {}, "displayName": "WithStyles(MainAppBar)", "options": { "defaultTheme": { "breakpoints": { "keys": [ "xs", //material-ui stylesheet reduced for brevity } }

I didn’t get this when using react-scripts 3.4.3, nor do I see any problem launching the application in Chrome. I’ve also updated the react-app-polyfill from v1.0.6 to v2.0.0, and this hasn’t helped.

The first couple of items from the stack trace are:

wrapWithConnect C:/IS Transfer/Source/React/react/node_modules/react-redux/es/components/connectAdvanced.js:187

Anonymous function C:/IS Transfer/Source/React/react/src/components/mainAppBar/index.js:38

Did you try recovering your dependencies?

YES (although I admit when I hadn’t initially followed these steps!)

npm --version 6.14.9

Which terms did you search for in User Guide?

IE Internet Explorer

Environment

λ npx create-react-app --info npx: installed 67 in 7.85s

Environment Info:

current version of create-react-app: 4.0.1 running from C:\Users\Shiraz.Esat\AppData\Roaming\npm-cache_npx\27724\node_modules\create-react-app

System: OS: Windows 10 10.0.18362 CPU: (12) x64 Intel® Core™ i7-9850H CPU @ 2.60GHz Binaries: Node: 12.13.1 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 86.0.4240.183 Edge: Spartan (44.18362.449.0) Internet Explorer: 11.0.18362.1 npmPackages: react: ^16.14.0 => 16.14.0 react-dom: ^16.14.0 => 16.14.0 react-scripts: 4.0.1 => 4.0.1 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Get latest project code
2. Install packages with npm install
3. Build and run project with npm run

Expected behavior

Code is build, and available at http://localhost:3000/ Default browser launches, but same location could be browsed with other browsers A welcome page should be shown whether opened in Chrome, Firefox, Edge, or IE11

(Write what you thought would happen.) I expected babel to use the pollyfill to create a package suitable for IE11. That is, the minified JS should be suitable to run in IE. What is generated for Chrome, Firefox, and Edge doesn’t need the polyfill, which is why these work ok. Older versions of react-scripts instructed babel how to build the scripts for supported browsers, but something is not working now. This part of package.json determines what rules are needed during transpilation: "browserslist": { "production": [ ">0.2%", "not dead", "not ie < 9", "not op_mini all", "firefox esr", "unreleased versions" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie 11" ] },

I expected less browser support in the development build, and more in the product build (when npm run build is used and the generated files are deployed to a web server). Both builds, though, don’t work with IE11.

Actual behavior

I get the error described in the description. This is a screenshot of IE11:

This is the same react application in Chrome:

Reproducible demo

I will raise this issue without a reproducible demo, but will now work on trying to get something minimal. Hopefully in the meantime someone may know what is causing this! It could be related to react-redux, and how react-scripts work now in v4