FireMonkey92 Ответов: 1

SCRIPT1002 синтаксическая ошибка '' используя Интернет Эксплорер 11


ПРИВЕТ,
Я столкнулся с проблемой с поддержкой браузера в IE 11 моего проекта reactjs.
Вот мой пример кода.

пакет.в JSON
{
  "name": "my-project",
  "version": "0.1.0",
  "description": "",
  "scripts": {
    "start": "npm run dev",
    "dev": "node_modules/.bin/webpack-dev-server",
    "build": "node_modules/.bin/webpack --config webpack.config.prod.js"
  },
  "dependencies": {
    "antd": "^3.26.7",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-import": "^1.11.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.6.1",
    "dotenv-webpack": "^1.7.0",
    "es6-promise": "^4.2.8",
    "formik": "^2.1.2",
    "history": "^4.9.0",
    "lodash": "^4.17.11",
    "office-ui-fabric-react": "^7.83.2",
    "prop-types": "^15.7.2",
    "q": "^1.5.1",
    "react": "^16.8.6",
    "react-csv": "^1.1.2",
    "react-dom": "^16.8.6",
    "react-drag-listview": "^0.1.6",
    "react-redux": "^7.1.3",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-select": "^3.0.8",
    "react-table": "^6.9.0",
    "reactjs-popup": "^1.5.0",
    "redux": "^4.0.5",
    "redux-auth-wrapper": "^3.0.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "xlsx": "^0.15.4",
    "yup": "^0.28.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/polyfill": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@types/history": "^4.7.2",
    "@types/react": "^16.8.13",
    "autoprefixer": "^9.5.1",
    "autoprefixer-loader": "^3.2.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "clean-webpack-plugin": "^2.0.1",
    "copy-webpack-plugin": "^5.0.2",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "dotenv": "^7.0.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "loader-utils": "^1.2.3",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "svg-sprite-loader": "4.1.3",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}


webpack.config.js
// const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Dotenv = require('dotenv-webpack');

require('dotenv').config();

const {
  NODE_ENV,
  HOST,
  PORT,
  CONNECTION_TYPE,
  APP_NAME,
  VERSION,
  THEME_COLOR,
  PROXY_URL,
} = require('./webpack.constants');

const pathSource = path.resolve(__dirname, 'src');

const proxyConfig = PROXY_URL
  ? {
    proxy: {
      '/api/*': {
        target: PROXY_URL,
        pathRewrite: {'^/api/': ''},
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
        proxyTimeout: 1e3 * 60 * 5,
      },
    },
  }
  : {};

module.exports = {
  context: pathSource,
  entry: ['@babel/polyfill', './App.js'],
  mode: NODE_ENV,
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        exclude: /\.module\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.module\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
              localIdentName: '[local]___[hash:base64:5]',
            },
          },
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(ico)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.pdf$/i,
        loader: 'file?name=[path][name].[ext]',
      },
      {
        test: /\.(jpe?g|png|gif|mp4)$/i,
        loader: 'url-loader',
        options: {
          name: '[path][name]-[sha512:hash:base64:4].[ext]',
          limit: 16384,
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
  optimization: {
    minimize: false,
    nodeEnv: NODE_ENV,
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({}),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      themeColor: THEME_COLOR,
      version: VERSION,
      projectName: APP_NAME,
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css',
    }),
    new CopyWebpackPlugin([{
      from: 'assets/images',
      to: 'images',
    }]),
    new Dotenv(),
    new CleanWebpackPlugin(),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  devtool: 'source-map',
  devServer: {
    port: PORT,
    host: HOST,
    disableHostCheck: true,
    historyApiFallback: true,
    hot: true,
    overlay: true,
    https: CONNECTION_TYPE === 'https',
    stats: {
      assets: false,
      children: false,
      colors: true,
      entrypoints: false,
      env: true,
      modules: false,
      moduleTrace: false,
    },
    ...proxyConfig,
  },
};


webpack.constant.js

module.exports = {
    NODE_ENV: process.env.NODE_ENV || 'development',
    HOST: process.env.HOST || 'localhost',
    PORT: process.env.PORT || 3000,
    CONNECTION_TYPE: process.env.CONNECTION_TYPE || 'http',
    APP_NAME: process.env.APP_NAME || 'Application',
    VERSION: process.env.VERSION || '0.1',
    THEME_COLOR: process.env.THEME_COLOR || '#000000',
    PROXY_URL: process.env.PROXY_URL || false,
};


When i do
npm start

every things works perfectly, But when i tries to run the project on IE11, It gives me below error under bundle.js at this specified line: 

function encoderForArrayFormat(options) {
	switch (options.arrayFormat) {
		case 'index':
			return key => (result, value) => {
				const index = result.length;
				if (value === undefined || (options.skipNull && value === null)) {
					return result;
				}

				if (value === null) {


Что я уже пробовал:

я пробовал менять версии webpack , @wabpack/polyfill и babel-loader. но это не работает. Та же ошибка, с которой я столкнулся в IE 11.

Может быть, я что-то упускаю? Пожалуйста, дайте какое-нибудь предложение, которое я могу попробовать.

FireMonkey92

Я уже пробовал эти решения. Я не знаю, где я делаю что-то не так.

1 Ответов

Рейтинг:
1

Member 14833694

вы должны установить react-app-polyfill

это добавляется в index.js

import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
в package.js добавлено следующее
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 11"
    ]
}
и, наконец, он добавляется в .babelrc
{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers":[
              "last 5 versions",
              "ie >= 9"
            ],
            "node": "current"
          } 
        }
      ],
        "@babel/preset-react"
    ]
}
кэш узла удален и должен работать


Richard Deeming

Это англоязычный сайт. Пожалуйста, пишите только на английском языке.

Este es un sitio en inglés. Por favor, publique solo en inglés.

FireMonkey92

Это только на английском языке

Richard Deeming

Это сейчас, но только потому, что я отредактировал ответ, чтобы перевести его. Первоначально она была опубликована на испанском языке.

FireMonkey92

Хорошо, хорошо.