Create-react-app: Support developing in IE 9

[nbaki]

I have created a new reactjs project using create-react-app and am finding it's not working on IE10 & IE9. I have done a lot of research and it led me to using polyfills, which I have done with many of my other Rails on React app, but I'm finding it not working with this project created via create-react-app.

Here's the error:

SCRIPT5009: 'Map' is undefined

I notice this error is related to ES6's new Map() function.

So, here's what I've done in my code in an attempt to make it work:

import './polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

const app = (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
);

ReactDOM.render(app, document.getElementById('root'));

Polyfill.js:

import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/object/assign';

This isn't working. I'm not sure what else to try. I've tried a lot of other polyfill imports as well and continue to get the same error.

Any help would be appreciated!

[ivoborisov]

Sorry for hijacking the thread but I'm facing the same problem.

Is this a bug report?

Yes

Environment

node v10.13.0
yarn v1.12.3
create-react-app v2.1.1

Steps to Reproduce

1. Create React application using npx create-react-app my-app
2. Add react-app-polyfill using yarn add react-app-polyfill
3. Change the first line of src/index.js to import 'react-app-polyfill/ie9';
4. Open IE9 or IE10 and load the application

Expected Behavior

The application should work. No errors should be present in the console and the spinning React logo should be displayed.

Actual Behavior

A white screen is displayed and there is an error in the console: SCRIPT5009: 'Map' is undefined

For some reason the added polyfills for the older browsers are ignored. Please provide more info how to integrate them properly into a React app or investigate ths issues if the steps are corrent.

Thanks in advance!

[Timer]

Is this during yarn start or yarn build and serving the app?

[ivoborisov]

Only when executing yarn start. By inspecting the sources in Chrome Dev Tools, I can see that the pollyfill file is bundled in one of the chunk JS files, but somehow not used.

When the application is built for production, the polyfills are loaded and everything works as expected.

[Timer]

It is a known limitation that the dev server does not support IE9/11. We're working on adding this.

[lujb]

@ivoborisov I have also got sucked into this problem recently, and I can't wait the release of 3.0 to develop in IE 9, so I spent hours to fix it locally.

This problem is caused by react-dev-utils/webpackHotDevClient provided by CRA to bring better user experience. The custom webpackHotDevClient introduced chalk module accidentally which in turn have a dependency of ansi-style module, and the final module used es6 Map feature which sucks in IE 9. Unfortunately, webpackHotDevClient is loaded prior to the polyfilled app code, so IE 9 complaines that 'Map' is undefined.

Fix:
Eject CRA locally and then locate the entry config in config/webpack.config.dev.js .

1. exchange the position of the two entries OR
2. use the stock client OR
3. remove the chalk code in react-dev-utils/webpackHotDevClient (chalk seems unnessesary)

[4300841]

@ivoborisov I have also got sucked into this problem recently, and I can't wait the release of 3.0 to develop in IE 9, so I spent hours to fix it locally.

This problem is caused by react-dev-utils/webpackHotDevClient provided by CRA to bring better user experience. The custom webpackHotDevClient introduced chalk module accidentally which in turn have a dependency of ansi-style module, and the final module used es6 Map feature which sucks in IE 9. Unfortunately, webpackHotDevClient is loaded prior to the polyfilled app code, so IE 9 complaines that 'Map' is undefined.

Fix:
Eject CRA locally and then locate the entry config in config/webpack.config.dev.js .

1. exchange the position of the two entries OR
2. use the stock client OR
3. remove the chalk code in react-dev-utils/webpackHotDevClient (chalk seems unnessesary)

受教,但是这种方式解决了map问题,但是又会出现以下这个问题,请问有解决方案么?

[ivoborisov]

react-app-polyfill includes only specific features from core-js. You can check them here. If you need others you must include it manually - e.g. import 'core-js/es/object/set-prototype-of'.

[markelarizaga]

Just in case helps someone while a better solution arrives, we found something that works for us for the time being. Basically we have to run the app in non-ES6 environments and unless applying this hack we had to run the app in prod mode all the time, and this means wasting a lot of time.
Basically what we did was to mock the ES6 stuff in use in the app BEFORE any other script gets loaded in development mode. In public/index.html:

<script>
    if (/* NOT PRODUCTION */) {
      window.Map = window.Map || function() {
        return {
          set: function(){}
        }
      };
      window.Set = window.Set || function() {
        return {
          set: function(){},
          has: function(){}
        }
      };
      Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
        obj.__proto__ = proto;
        return obj;
      };
    }
  </script>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->

I know this doesn't look so promising because we are not actually loading any polyfill for Map and Set so we could have problems with third parties relaying on them, but as far as we know this could happen, it helps us running the app in development mode.

[sdaconceicao]

Another workaround I'm currently using is to explicitly set chalk as a dev dependency using an older version. Chalk 1.1.3 is compatible with webpackHotDevClient and runs fine in IE11.

[holylander]

I solved this using the core-js polyfill library. You can check the details of the solution on this stack overflow answer.
PS: I have to use import 'core-js/es/' instead of /es6**/;

[shirakaba]

I'm experiencing this when developing for Opera 12.16 (the world of Smart TV web browsers are based on rather much older browsers than desktops are). Here are the first lines of my index.tsx:

import 'react-app-polyfill/ie9'; // Provides Map, which Opera 12.16 lacks
import 'react-app-polyfill/stable';

Both my development and production browserslist fields specify "opera >= 12.16".

When I run yarn run start, Opera throws an error on the new Map call mentioned in the first two comments. As mentioned by @Timer and @lujb, it's due to the devtools.

It is a known limitation that the dev server does not support IE9/11.

Some guidance to that effect would be very helpful in the Supported Browsers and Features documentation.

As for when I run yarn run build and navigate to the website, the browser immediately crashes with no explanation. I can't give any more details because it doesn't provide a stack trace. Opera, huh 🤷‍♂️ that's arguably a separate issue, though.

I'm really surprised that, given that the devtools do not respect browser compatibility, create-react-app doesn't provide an optional 'polyfills' entry point that can be assured to run before anything like the devtools?

EDIT: Solutions in here seem promising: https://github.com/facebook/create-react-app/issues/5336

[bugzpodder]

Thanks for your note in #5336, I am going to close this as a duplicate of it.