首页 > 解决方案 > React JS 在 IE 11 中但在 chrome 中不起作用,给出语法错误

问题描述

我为 React JS 项目设置了 webpack+babel。它在 Chrome 浏览器中运行良好,但在 IE 中出现“语法错误”。我相信这是由于 babel polyfills,所以我遵循了许多解决方案(比如 - https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill#polyfilling-other- language-features ),但我发现这在我的情况下不起作用。

//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'

在此之后,通过清除 npm 缓存 npm cache clear --force ,甚至尝试删除 node_modules 并再次安装它们,npm install但在 IE 11 中仍然出现相同的错误:

任何可能有助于解决此问题的指针

SCRIPT1002: Syntax error
in main.bundle.js

标签: reactjsbabeljsinternet-explorer-11polyfillsbabel-polyfill

解决方案


推荐阅读