reactjs - 我的React应用未在Internet Explorer中呈现(由于箭头功能)

Question

我的react + redux应用程序无法在Internet Explorer 11上运行。在Edge，Firefox和chrome上运行正常。

我已经尝试了互联网like this上的许多可用答案，但没有获得任何成功，下面的错误是我进入控制台


当我打开此错误时，它显示为

this file is generating when I am serving my app and can't change anything manually

package.json

{
  "jest": {
    "roots": [
      "<rootDir>/"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json"
    ],
    "testURL": "http://localhost",
    "moduleDirectories": [
      "node_modules",
      "utils"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "coverageReporters": [
      "text"
    ],
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/node_modules/**",
      "!**/flow-typed/**",
      "!**/vendor/**",
      "!./*"
    ],
    "setupFilesAfterEnv": [
      "./utils/jestUtils/setupTests.js"
    ],
    "testEnvironment": "./utils/jestUtils/freezeDateEnvironment.js",
    "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/utils/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/utils/__mocks__/fileMock.js"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@synapsestudios/react-drop-n-crop": "^0.2.0",
    "attr-accept": "^1.1.0",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.6",
    "clone-deep": "^3.0.1",
    "d3": "^4.9.1",
    "deep-equal": "^1.0.1",
    "draft-js": "0.10.5",
    "draft-js-buttons": "2.0.1",
    "draft-js-export-html": "1.2.0",
    "file-saver": "^1.3.8",
    "formsy-react": "^0.19.5",
    "history": "^4.6.3",
    "libphonenumber-js": "1.7.16",
    "locate-path": "^2.0.0",
    "mime": "^2.0.3",
    "moment": "^2.18.1",
    "nanoid": "^1.0.1",
    "node": "^12.10.0",
    "node-gyp": "^5.0.3",
    "path-to-regexp": "^2.2.1",
    "prettier": "^1.6.1",
    "prop-types": "^15.5.10",
    "qs": "6.7.0",
    "query-string": "5.1.1",
    "react": "16.7.0",
    "react-app-polyfill": "^1.0.5",
    "react-autofill": "^1.1.4",
    "react-cropper": "^1.0.0",
    "react-datepicker": "^1.4.1",
    "react-dom": "16.7.0",
    "react-dropzone": "^4.1.3",
    "react-geosuggest": "2.12.0",
    "react-html-parser": "^2.0.2",
    "react-infinite-scroller": "^1.1.1",
    "react-input-range": "^1.1.4",
    "react-intl": "^2.4.0",
    "react-intl-redux": "^0.7.0",
    "react-media": "^1.8.0",
    "react-modal": "^2.3.3",
    "react-phone-number-input": "2.3.2",
    "react-quill": "^1.0.0",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.2",
    "react-scripts": "1.0.10",
    "react-select": "^1.0.0-rc.5",
    "react-select-plus": "^1.1.0",
    "react-tooltip": "^3.3.0",
    "react-transition-group": "2.5.3",
    "recompact": "^3.3.0",
    "redux": "4.0.1",
    "redux-form": "7.3.0",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1",
    "resolve-url-loader": "^2.0.2",
    "select2": "^4.0.3",
    "snake-case": "^2.1.0",
    "svg-inline-loader": "^0.7.1",
    "svg-url-loader": "^2.0.2",
    "validator": "^8.0.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/node": "7.4.5",
    "@babel/plugin-proposal-class-properties": "7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "7.4.4",
    "@babel/plugin-proposal-optional-chaining": "7.2.0",
    "@babel/plugin-transform-arrow-functions": "7.2.0",
    "@babel/plugin-transform-classes": "7.4.4",
    "@babel/plugin-transform-runtime": "7.4.4",
    "@babel/preset-env": "7.4.4",
    "@babel/preset-flow": "7.0.0",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "^9.5.1",
    "axios-mock-adapter": "^1.10.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.6",
    "babel-plugin-react-intl": "3.0.1",
    "babel-plugin-react-intl-auto": "1.7.0",
    "colors": "1.3.3",
    "cross-env": "^5.1.4",
    "css-loader": "3.0.0",
    "cssnano": "4.1.10",
    "del-cli": "^1.1.0",
    "enzyme": "3.8.0",
    "enzyme-adapter-react-16": "1.7.1",
    "eslint": "5.16.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-flowtype": "3.8.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jest": "22.1.2",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.1.0",
    "file-loader": "3.0.1",
    "flow-babel-webpack-plugin": "1.1.1",
    "flow-bin": "0.102.0",
    "flow-typed": "2.5.2",
    "glob": "^7.1.2",
    "jest": "24.8.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "postcss-easy-import": "^3.0.0",
    "postcss-loader": "^3.0.0",
    "react-docgen": "^2.20.1",
    "react-hot-loader": "^4.3.12",
    "react-test-renderer": "^15.6.2",
    "redux-devtools": "3.5.0",
    "redux-devtools-dock-monitor": "1.1.3",
    "redux-devtools-log-monitor": "1.4.0",
    "redux-mock-store": "^1.4.0",
    "sass-loader": "^6.0.6",
    "uglifyjs-webpack-plugin": "^1.1.2",
    "url-loader": "^2.1.0",
    "webpack": "4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "3.3.1"
  }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", { "targets": { "ie": "11", "esmodules": true }}],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "react-hot-loader/babel",
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-arrow-functions"
  ],
  "env": {
    "lang":{
      "plugins": ["@babel/plugin-syntax-object-rest-spread", ["react-intl", {
            "messagesDir": "../assets/build-translations/messages/"
        }]]
    }
  }
}

webpackconfig.js

const { DefinePlugin, NamedModulesPlugin } = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin');
const path = require('path');
require('babel-polyfill');
const webpackAlias = require('./webpack.config.alias');
const pagenames = require('./utils/pageNames');
const DEV_SERVER_PUBLIC_PATH = 'http://192.168.1.14:44444/webpack/static/';
const environment = process.env && process.env.NODE_ENV || 'production';
const PROD = environment === 'production';
const environmentValues = new DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(environment)
});
const UglifyJSPluginInit = new UglifyJSPlugin({
  uglifyOptions: {
    beautify: false,
    ecma: 6,
    compress: true,
    comments: false,
    parallel: true,
    sourceMap: true,
    warnings: false,
  }
});
const flowPlugin = environment === 'lang' ? [] : [new FlowBabelWebpackPlugin()];
const commonPlugins = [environmentValues, ...flowPlugin, new MiniCssExtractPlugin({
  filename: '[name].css',
})];
const productionPlugins = [UglifyJSPluginInit];
const pluginsArr = PROD
      ? [...commonPlugins, ...productionPlugins]
      : [...commonPlugins, new NamedModulesPlugin()];
const devtool = PROD ? false : 'cheap-source-map';
const imagePublicPath = PROD ? '/static/' : DEV_SERVER_PUBLIC_PATH;
const modeAlias = PROD ? 'production' : 'development';
const outputPath = path.resolve(__dirname, '../assets');

const entry = {
  app: './utils/app.js',
  'password-reset': './utils/scss/password-reset.scss',
  [pagenames.pageNames1]: './fileurl.js',
  [pagenames.pageNames2]: './fileurl.js',
  [pagenames.pageNames3]: './fileurl.js',
  [pagenames.pageNames4]: './fileurl.js',
};

const config = {
  ...webpackAlias,
  mode: modeAlias,
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          minChunks: 13,
          name: 'commons',
          chunks: 'all',
        },
      },
    }
  },
  context: __dirname,
  entry,
  devtool,
  output: {
    path: outputPath,
    publicPath: '/webpack/static/',
    filename: '[name].js',
  },
  devServer: {
    contentBase: outputPath,
    port: 44444,
    host: '192.168.1.14',
    publicPath: DEV_SERVER_PUBLIC_PATH,
    stats: {
      errors: true,
      warnings: true,
      assets: false,
      chunks: true,
      chunkGroups: true,
      chunkModules: true,
      chunkOrigins: true,
      builtAt: false,
      cached: false,
      timings: false,
      outputPath: false,
      modules: true,
      entrypoints: true,
    },
    headers: {
      "Access-Control-Allow-Origin": "\*",
    }
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-url-loader'
      },
      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, "node_modules"),
        include: __dirname,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'eslint-loader',
            options: {
              failOnWarning: false,
              failOnError: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000, // Convert images < 10kb to base64 strings
              publicPath: imagePublicPath // Since the fallback is file-loader, We end up serving from /static/{file} or during development - wherever the server is located
            }
          }
        ]
      },
      {
        test: /\.scss|css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: !PROD,
              reloadAll: true,
            },
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            }
          },
          { loader: 'postcss-loader' },
          {
            loader: 'resolve-url-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
        ]
      }
    ]
  },
  plugins: pluginsArr
};
console.log('process.env.NODE_ENV', environment);
module.exports = config;

任何帮助，将不胜感激，在此先感谢。

Answer 1

我可以在您的.babelrc预设上看到，您在@babel/preset-env下定义了"esmodules": true。

基于@babel/preset-env documentation，如果将 esmodules 设置为 true ，则浏览器目标将被忽略。

Please note: when specifying the esmodules target, browsers targets will be ignored.

您可以尝试更改此选项以查看是否有运气吗？

另外，我建议您尝试使用生产版本，看看是否遇到相同的错误/行为。