React App converting JS to ES5 to target IE 11

2.7k views Asked by At

I currently have a react app which is not running / rendering in IE, I think due to an ES5 / ES6 problem.

The error I get is this: Syntax error.

On the line highlighted below.

    if(process.env.NODE_ENV == 'production') {
=>       module.exports = require('./cjs/react.production.min.js');
    } else {
      module.exports = require('./cjs/react.development.js');

At the top of index.js prior to compilation:

import 'babel-polyfill'; 
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

package.json:

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.8.3",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "@sentry/browser": "^5.10.2",
    "adblockdetect": "0.0.2",
    "animatewithsass": "^3.2.1",
    "axios": "^0.18.1",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "date-fns": "^2.10.0",
    "detectrtc": "^1.4.0",
    "easy-peasy": "^3.2.0",
    "formik": "^2.0.3",
    "google-map-react": "^1.1.5",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "material-design-icons": "^3.0.1",
    "material-icons": "^0.3.1",
    "node-sass": "^4.13.0",
    "platform": "^1.3.5",
    "query-string": "^6.10.1",
    "react": "^16.11.0",
    "react-albus": "^2.0.0",
    "react-app-polyfill": "^1.0.6",
    "react-color": "^2.18.0",
    "react-confirm-alert": "^2.4.1",
    "react-dom": "^16.11.0",
    "react-dropzone": "^11.1.0",
    "react-loader-spinner": "^3.1.5",
    "react-media-recorder": "^1.2.0",
    "react-paginate": "^6.3.2",
    "react-router-dom": "^5.1.2",
    "react-rtc-real": "^1.11.22",
    "react-scripts": "2.1.8",
    "react-select": "^3.1.0",
    "react-simple-line-icons": "^1.0.8",
    "react-spring": "^8.0.27",
    "react-stripe-elements": "^5.1.0",
    "react-stripe-script-loader": "^1.0.16",
    "react-switch": "^5.0.1",
    "react-toastify": "^5.4.0",
    "react-toggle": "^4.1.1",
    "react-tooltip": "^3.11.2",
    "regenerator-runtime": "^0.13.5",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.2",
    "styled-components": "^4.4.1",
    "sweetalert2-react": "^0.8.3",
    "videojs": "^1.0.0",
    "videojs-record": "^4.0.0",
    "webfontloader": "^1.6.28",
    "webrtc-adapter": "^7.5.1",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "set NODE_ENV=production && react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "IE 11"
    ]
  },
  "devDependencies": {
    "animate-sass": "^0.8.2",
    "es-check": "^5.1.1",
    "react-app-rewired": "^2.1.6"
  }
}

Inside .babelrc

{
    "presets": ["@babel/env","@babel/preset-react",["@babel/preset-env", { "targets": "defaults" }]],
    "plugins" : ["@babel/plugin-syntax-dynamic-import"]
}

Can anyone guide me in the right direction as to how to get babel to compile things properly for ES5? You'll notice here instead of ejecting, I'm using react-app-rewired, I don't think that should cause issues, so any help appreciated.

Update:

"Object doesn't support property or method 'repeat'" - when running in development mode. How do I polyfill this? I think this may be the problem.  
3

There are 3 answers

0
nrako On

This is very similar to this Github issue in core-js

As suggested in that thread, you might add this to your preset config

 { modules: false,
   useBuiltIns: 'entry',
   corejs: 3 }

Or import the function directly

import 'core-js/features/string/repeat';
0
Rain.To On

First In the index.js file the import is for import 'babel-polyfill'; think should be @babel/polyfill. But that would not resolve IE 11 issues.

We had a similar issue, had to switch to core-js for bundling - which you already have. But you will need @babel/core and @babel/runtime-corejs3 as dev dependencies.

Your preset needs to be changed

presets: [
             [
                 "@babel/preset-env", {
                 "useBuiltIns": "usage", 
                 corejs: { version: 3, proposals: true }
                 }
              ]
           ]

And then replace the code in index.js

 imports babel/polyfill;

with

import 'core-js/stable';
0
Piyush Rana On

If you can use typescript then I'll suggest that you can transform your tsconfig.js file and change target to es5.

If not then create .babelrc file and inside it add this:

{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "forceAllTransforms": true, "corejs": "3.0.0", "targets": { "ie": "11" } } ] ] }