React JS not working in IE 11 but in chrome, giving syntax error

Question

I have the webpack+babel setup for React JS project. It works well in Chrome browser but gives 'Syntax error' in IE. I believe this is due to babel polyfills, so I have followed numerous solutions(like - https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill#polyfilling-other-language-features ) which I found which aren't working in my case though.

//package.json

"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all",
  "not ie < 11",
  "ie 11"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version",
  "ie 11"
]
},
"devDependencies": {
 "@babel/core": "7.12.0",
 "@babel/plugin-proposal-export-default-from": "7.12.1",
 "@babel/plugin-transform-runtime": "7.12.1",
 "@babel/preset-env": "7.12.10",
 "@babel/preset-react": "7.10.4",
},
"dependencies": {
 "@babel/plugin-proposal-class-properties": "7.12.1",
 "@babel/polyfill": "^7.12.1",
 "@babel/preset-flow": "7.12.1",
 "@babel/runtime-corejs3": "^7.12.5",
 "react": "17.0.1",
 "react-app-polyfill": "2.0.0",
 "react-dom": "17.0.1",
}

// babel.config.js
module.exports = {
presets: [
    ['@babel/env', {
        forceAllTransforms: true,
        "targets": {
            "browsers": [">0.25%", "not dead"]
          }
    } ],
    "@babel/react"
],
"plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-export-default-from"
]
};

// Index.js
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'

After this, cleared npm cache by npm cache clear --force and even tried deleting the node_modules and installing them again by npm install but still getting the same error in IE 11:

Any pointers which might help over this

SCRIPT1002: Syntax error
in main.bundle.js

have you tried [this](https://github.com/facebook/create-react-app/issues/6924#issuecomment-487315201)? — Roy.B, Dec 21 '20 at 09:59
Because IE sucks, the browser doesn't support some of ES6 syntax. So it's natural getting such error. You can fix things with polyfill. `npm i --save react-app-polyfill` and add `import 'react-app-polyfill/ie11';` in the root file. — hellikiam, Dec 21 '20 at 10:00
@hellikiam done that already, posted in the code above as well — Learner, Dec 21 '20 at 10:02
@Learner and you put those links at the **top level** of index.js? — Roy.B, Dec 21 '20 at 10:03
What is your `react-scripts` version? As far as I know, this issue might be related to the `react-scripts` version 3.3.0. You could find the issue report in GitHub: [issue 1](https://github.com/facebook/create-react-app/issues/8197), [issue 2](https://github.com/facebook/create-react-app/issues/8195). It can still work with `react-scripts@3.2.0`. You could try to revert back to 3.2.0 as a workaround. Please also remember to delete `.cache` folder in `node_modules` and delete IE browser cache then try again. — Zhi Lv, Dec 22 '20 at 01:56
@ZhiLv I am not using react-scripts, we have bootstrapped the app by webpack + babel and NOT by create-react-app. Do I still need to have react-scripts package? — Learner, Dec 22 '20 at 04:09

React JS not working in IE 11 but in chrome, giving syntax error

0 Answers0