Internet Explorer 11 上的 SCRIPT5017 错误，使用 webpack 4、babel 7 和 react

Question

所以我在一个使用 React 的网站上工作。我一直在不同的浏览器中测试它，现在唯一不能工作的浏览器是糟糕的 Internet Explorer。当页面在 Internet Explorer 上加载时，它只是一个 blank/white 屏幕。我尝试了多种建议，例如集成浏览器列表、@babel/preset-env，但没有成功。我从 babel 6 完全升级到 babel 7 看看是否是这个问题，但没有任何改变。

这是我的依赖项和开发依赖项：

[
"dependencies": {
  "@babel/plugin-transform-modules-commonjs": "^7.10.4",
  "@babel/polyfill": "^7.10.4",
  "@babel/preset-es2015": "^7.0.0-beta.53",
  "@stripe/react-stripe-js": "^1.1.2",
  "@stripe/stripe-js": "^1.8.0",
  "@tinymce/tinymce-react": "^3.6.0",
  "axios": "^0.19.2",
  "babel-preset-react": "^6.24.1",
  "bootstrap": "^4.4.1",
  "browser-image-compression": "^1.0.11",
  "browserslist": "^4.13.0",
  "core-js": "3.6.5",
  "crypto-js": "^4.0.0",
  "emotion": "^10.0.27",
  "eslint-plugin-promise": "^4.2.1",
  "file-system": "^2.2.2",
  "firebase": "^7.14.5",
  "firebase-functions": "^3.6.2",
  "fuse.js": "^6.4.0",
  "google-map-react": "^1.1.7",
  "google-maps-react": "^2.0.6",
  "img-loader": "^3.0.1",
  "jest": "^25.2.4",
  "jquery": "^3.5.1",
  "mdbreact": "^4.26.0",
  "moment": "^2.24.0",
  "net": "^1.0.2",
  "photoeditorsdk": "^5.0.0",
  "prop-types": "^15.7.2",
  "react": "^16.13.1",
  "react-app-polyfill": "^1.0.6",
  "react-bootstrap": "^1.0.1",
  "react-cookie-consent": "^5.0.0",
  "react-dom": "^16.13.1",
  "react-drag-sortable": "^1.0.6",
  "react-dropzone": "^10.2.2",
  "react-facebook": "^8.1.4",
  "react-helmet": "^6.0.0",
  "react-icons": "^3.9.0",
  "react-json-tree": "^0.11.2",
  "react-lazyload": "^3.0.0",
  "react-phone-input-2": "^2.13.7",
  "react-places-autocomplete": "^7.2.1",
  "react-redux": "^7.2.0",
  "react-router-dom": "^5.1.2",
  "react-router-guards": "^1.0.2",
  "react-social-icons": "^4.1.0",
  "react-stripe-checkout": "^2.6.3",
  "reactstrap": "^8.5.1",
  "redux": "^4.0.5",
  "rxjs": "^6.5.4",
  "stripe": "^8.76.0",
  "styled-components": "^4.4.1",
  "styled-jsx": "^3.2.5",
  "unirest": "^0.6.0",
  "url-polyfill": "^1.1.10",
  "uuidv4": "^6.0.7",
  "webworkify-webpack": "^2.1.5"
},
"devDependencies": {
  "@babel/cli": "^7.8.4",
  "@babel/core": "^7.9.6",
  "@babel/plugin-proposal-class-properties": "^7.8.3",
  "@babel/plugin-proposal-decorators": "^7.10.5",
  "@babel/plugin-transform-runtime": "^7.10.5",
  "@babel/preset-env": "^7.10.4",
  "@babel/preset-react": "^7.9.4",
  "babel-core": "^6.26.3",
  "babel-eslint": "^10.1.0",
  "babel-jest": "^25.2.4",
  "babel-loader": "^8.1.0",
  "babel-minify-webpack-plugin": "^0.3.1",
  "babel-plugin-syntax-async-functions": "^6.13.0",
  "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
  "babel-preset-es2015": "^6.24.1",
  "clean-webpack-plugin": "^3.0.0",
  "compression-webpack-plugin": "^4.0.0",
  "copy-webpack-plugin": "^5.1.1",
  "css-loader": "^3.5.3",
  "dotenv-webpack": "^1.7.0",
  "eslint": "^6.8.0",
  "eslint-config-prettier": "^6.10.1",
  "eslint-loader": "^4.0.2",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.2",
  "eslint-plugin-react": "^7.19.0",
  "file-loader": "^6.0.0",
  "html-loader": "^1.1.0",
  "html-webpack-plugin": "^4.3.0",
  "inspectpack": "^4.5.2",
  "json-loader": "^0.5.7",
  "mini-css-extract-plugin": "^0.9.0",
  "node-sass": "^4.14.1",
  "prettier": "^2.0.4",
  "react-hot-loader": "^4.12.20",
  "sass": "^1.26.10",
  "sass-lint": "^1.13.1",
  "sass-loader": "^8.0.2",
  "style-loader": "^1.2.1",
  "terser-webpack-plugin": "^3.0.2",
  "uglifyjs-webpack-plugin": "^2.2.0",
  "url-loader": "^0.6.2",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.10.3",
  "worker-loader": "^2.0.0"
}

]

这是我的一些 webpack.config.js:

module: {
rules: [
  {
    test: /\.css$/i,
    use: ['style-loader', 'css-loader', 'sass-loader']
  },
  {
    test: /\.(jpe?g|png|gif|svg|webp)$/i,
    loaders: [
      {
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      },
      {
        loader: 'img-loader',
      }
    ]
  },
  {
    test: /\.jsx?$/,
    enforce: "pre",
    loader: "eslint-loader",
    exclude: /node_modules/,
    options: {
      emitWarning: true,
      configFile: "./.eslintrc.json"
    }
  },
  {
    test: /\.s[ac]ss$/i,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
    ],
  },
  {
    test: /\.(jsx|js)?$/,
    loader: "babel-loader",
    exclude: /node_modules/,
  }
]

},

编辑：我忘了添加我的 babel.config.js

module.exports = {
"presets": [[
    "@babel/preset-env",
    {
        "corejs": { "version": 3 },
        "useBuiltIns": "usage",
        "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1",
            "ie": "11",
            "browsers": [
                "Chrome >= 59",
                "FireFox >= 44",
                "Safari >= 7",
                "Explorer 11",
                "ie 11",
                "last 4 Edge versions"
            ]
        }
    }
], "@babel/preset-react"],
"plugins": [["@babel/plugin-proposal-class-properties"], ["syntax-async-functions"], ["emotion"], ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], ["@babel/transform-runtime"]]

}

这是我在 Internet Explorer 11 中遇到的错误：SCRIPT5017

Answer 1

Preset-env 默认不支持ie 11。您必须将其配置为最低支持版本。 https://babeljs.io/docs/en/babel-preset-env#options

Answer 2

我又花了几个小时查看 Internet Explorer 中的错误，终于意识到错误来自 UUIDv4 包的正则表达式。这个问题与 Babel 无关，因为我似乎已经正确设置了所有内容。这个[Post] ()帮我解决了问题

Internet Explorer 11 上的 SCRIPT5017 错误，使用 webpack 4、babel 7 和 react

SCRIPT5017 error on Internet Explorer 11, using webpack 4, babel 7 and react

reactjs

internet-explorer-11

babeljs

webpack-4