Syntax error 'SCRIPT1002' using internet explorer 11

Question

0.00/5 (No votes)

See more:

HI,
I am facing an issue with the browser support in IE 11 of my reactjs project.
Here is my code sample.

package.json

JavaScript

{
  "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

JavaScript

// 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

JavaScript

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:

JavaScript

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) {

What I have tried:

i have tried changing versions of webpack , @wabpack/polyfill and babel-loader. but its not working. Same error i am facing in IE 11.

Is there i am missing something? Please give some suggestion i can try.

Posted 10-Mar-20 3:04am

FireMonkey92

Updated 10-Mar-20 3:24am

Add a Solution

Comments

ZurdoDev 10-Mar-20 11:51am

First google result for me has some things to try, SCRIPT1002: Syntax error - IE11 - Polyfill - Development Mode · Issue #6924 · facebook/create-react-app · GitHub[^]

FireMonkey92 11-Mar-20 7:03am

I have already tried those solutions. I do not know where i am doing something wrong.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 14833694 · Answer 1 · 2020-05-15T10:50:00

you have to install react-app-polyfill

this is added in index.js

JavaScript

import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";

in package.js the following is added

JavaScript

"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"
    ]
}

and finally it is added in the .babelrc

JavaScript

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers":[
              "last 5 versions",
              "ie >= 9"
            ],
            "node": "current"
          } 
        }
      ],
        "@babel/preset-react"
    ]
}

node cache is removed and should work

Syntax error 'SCRIPT1002' using internet explorer 11

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us