在11 11上出现SCRIPT5017错误，使用的是webpack 4、巴别塔7和react

Question

所以我正在开发一个使用react的网站。我已经在不同的浏览器上测试了它，现在唯一不能工作的浏览器是糟糕的Internet Explorer。当页面加载到internet explorer上时，它只是一个空白/白屏。我已经尝试了多种建议，比如集成browserlist、@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 Explorer11中遇到的错误：SCRIPT5017

Answer 1

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

Answer 2

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