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.
Может быть, я что-то упускаю? Пожалуйста, дайте какое-нибудь предложение, которое я могу попробовать.
ZurdoDev
Первый результат google для меня есть некоторые вещи, чтобы попробовать, SCRIPT1002: синтаксическая ошибка - ИЕ11 - полифилл - режим развития · выпуск #6924 · facebook/создайте реагировать-приложение · на GitHub[^]
FireMonkey92
Я уже пробовал эти решения. Я не знаю, где я делаю что-то не так.