Search code examples
reactjscreate-react-apppolyfills

ES6 Polyfill for create-react-app isn't working

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!

Solution

  • So, seeing as though create-react-app is what's restricting me from controlling the webpack config, I decided to take a different approach and build a fresh react app using webpack 4. I followed this article, https://dev.to/saigowthamr/how-to-create-a-react-app-from-scratch-using-webpack-4-1909.

    This allowed me more control over the webpack config and now the polyfill loaders are working.

    Nevertheless, if anyone has an explanation as to why it wasn't working with create-react-app, I think it'd be helpful for the community to know. Thanks!