Script1002 синтаксическая ошибка internet explorer

I’m trying to get my React App with ES2015 functionalities running in IE >= 11 using Webpack + Babel. The setup is custom, using the inferno-compat layer, so no create-react-app used here.

However — despite applying the latest babel-polyfill and babel-preset-env practices to my .babelrc and webpack config, I still get a SCRIPT1002: Syntax error within my bundle.js when trying to access the app with IE11.

When I follow the syntax error reference in IEs console, this is the part within the generated bundle.js that’s conflicting (the arrow-function in particular):

function add(x, y) {
  if (y === undefined) {
    return yHolder => add(x, yHolder);
  }

  return x + y;
}

These are the relevant dependencies within my package.json:

"dependencies": {
  "inferno-redux": "^3.10.1",
  "react": "^15.6.0",
  "react-dom": "^15.6.0",
  "react-ga": "^2.2.0",
  "react-swipeable": "^4.1.0",
  "redux": "^3.7.2",
  "redux-saga": "^0.16.0",
  "regenerator-runtime": "^0.11.0"
},
"devDependencies": {
  //... stuff

  "babel-cli": "^6.26.0",
  "babel-core": "^6.25.0",
  "babel-eslint": "^7.2.3",
  "babel-loader": "^7.1.1",
  "babel-plugin-inferno": "^3.2.0",
  "babel-plugin-module-resolver": "^2.7.1",
  "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
  "babel-plugin-transform-es2015-spread": "^6.22.0",
  "babel-plugin-transform-regenerator": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",

  //... some more stuff

  "webpack": "^3.8.1",
  "webpack-bundle-analyzer": "^2.9.1",
  "webpack-dev-middleware": "^1.12.2",
  "webpack-dev-server": "^2.9.5",
  "webpack-manifest-plugin": "^1.3.2",
  "webpack-merge": "^4.1.1",
}

This is my .babelrc:

{
  "presets": 
    [
    "react", 
    "flow",
    "es2015",
    [
      "env", { 
        "modules": "commonjs",
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ]
}

I include the babel-polyfill within my webpack.base.config.js here:

// ... stuff
entry: {
  index: ['babel-polyfill', './index.js'],
},
// ... more stuff

Any ideas what’s missing to get it running in IE11?

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes. I am using docker and have re-built my container multiple times.

I have also tried using a previous version of react-scripts / create-react-app

npm —version
output: 6.9.0

Which terms did you search for in User Guide?

Searched For: IE11, Syntax Error, Script1002, Polyfill.

I followed the guide for adding polyfills using react-app-polyfill.
The first two lines in my index.js file are
import ‘react-app-polyfill/ie11’;
import ‘react-app-polyfill/stable’;

I have tried with & without stable.
I have tried with ie11 & ie9 polyfills.

Environment

System:
OS: Linux 3.10 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (4) x64 Intel(R) Xeon(R) CPU E5-2650 v3 @ 2.30GHz
Binaries:
Node: 12.0.0 — /usr/local/bin/node
Yarn: 1.15.2 — /usr/local/bin/yarn
npm: 6.9.0 — /usr/local/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.0 => 3.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to Reproduce

(Write your steps here:)

1. Create a new create-react-app project following the steps provided by the user guides
2. browse to website on chrome and see it working perfectly.
3. browse to website on Internet explorer 11 and it just displays a white screen and an error in the console.

Expected Behavior

My app should work on internet explorer 11 in the same manner it works in chrome

Actual Behavior

I’ll put the specific details here.

The app i’ve been working on for a year or so with create-react-app stopped working in IE11 when I updated it yesterday.

To ensure that it was not my own code that broke IE11 support, I spun up a brand-new copy of create-react-app to test and it still did not work on IE11.

I followed the steps for react-app-polyfill and that still did not work on IE11.

I have tried to force NPM to install a previous version of react-scripts/create-react app using
npm i react-scripts@2.0.5 but that doesn’t work.
(Note: 2.0.5 is the last version i was on when I had a container working perfectly on IE11 5 months ago.)
{Edit} when i try installing this past version, I check the package.json and it says react-scripts is at version 3.0.0 despite specifying 2.0.5

Index.js

Website On Chrome:

Website on IE11:

Reproducible Demo

Here is the dockerfile I use to boot up this container:

FROM node:12.0

RUN apt-get update -y && \
apt-get install -y vim

WORKDIR /var/www/html
RUN npm i create-react-app@3.0.0
RUN npx create-react-app welcome
RUN npm i react-app-polyfill
WORKDIR /var/www/html/welcome

CMD ["npm","start"]

Here is the docker-compose file I’m using:

version: '3'
services:
  react-testing:
    container_name: practice
    image: practice-react
    build:
      context: ./
      dockerfile: dockerfile
    ports:
      - "5900:3000"

networks:
  default:
    external:
      name: practice.react

To build your own demo environment to test this for yourself, the steps are as follows:
(this is going to assume you know some docker basics. Otherwise you can install create-react-app normally and test it that way)

1. docker-compose build
2. docker-compose up -d
3. docker exec -it practice bash
4. cd src
5. vi index.js
6. add the two polyfill lines to the top of index.js
7. save and quit vi
8. go to the webpage on IE11.

 vm.NoOftroopMemEditReq = (vm.EventAttendees.TicketAttendees.filter(function (a) { return a.Attendees.some(Attendee === Attendee.IsEditRequired === true); })).length;

Your Answer

Not the answer you’re looking for? Browse other questions tagged

• javascript
• angularjs
• internet-explorer-11
• array-filter

or ask your own question.

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

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

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.

Answer by Legacy Hardy

I tried using babel-polyfill and babel-es6-polyfill, but that didn’t help.,This is the error I’m getting:,Install babel-preset-env with npm install babel-preset-env —save-dev and use the following config in your .babelrc:

I know it’s over a year later, but I believe the issue was your devtool configuration:

webpackConfig.devtool = 'eval-source-map';

Answer by Lucy Hayden

View Unanswered Questions,What is ‘CodeProject’?,Collaboration / Beta Testing

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

Answer by Declan McLaughlin

I followed the steps for react-app-polyfill and that still did not work on IE11.,I followed the guide for adding polyfills using react-app-polyfill.
The first two lines in my index.js file are
import ‘react-app-polyfill/ie11’;
import ‘react-app-polyfill/stable’;,add the two polyfill lines to the top of index.js

FROM node:12.0

RUN apt-get update -y && \
apt-get install -y vim

WORKDIR /var/www/html
RUN npm i [email protected]
RUN npx create-react-app welcome
RUN npm i react-app-polyfill
WORKDIR /var/www/html/welcome

CMD ["npm","start"]

Answer by Scarlet Chen

I’m trying to get my React App with ES2015 functionalities running in IE >= 11 using Webpack + Babel. The setup is custom, using the inferno-compat layer, so no create-react-app used here. ,Any ideas what’s missing to get it running in IE11?,However — despite applying the latest babel-polyfill and babel-preset-env practices to my .babelrc and webpack config, I still get a SCRIPT1002: Syntax error within my bundle.js when trying to access the app with IE11.

When I follow the syntax error reference in IEs console, this is the part within the generated bundle.js that’s conflicting (the arrow-function in particular):

function add(x, y) {
  if (y === undefined) {
    return yHolder => add(x, yHolder);
  }

  return x + y;
}

These are the relevant dependencies within my package.json:

"dependencies": {
  "inferno-redux": "^3.10.1",
  "react": "^15.6.0",
  "react-dom": "^15.6.0",
  "react-ga": "^2.2.0",
  "react-swipeable": "^4.1.0",
  "redux": "^3.7.2",
  "redux-saga": "^0.16.0",
  "regenerator-runtime": "^0.11.0"
},
"devDependencies": {
  //... stuff

  "babel-cli": "^6.26.0",
  "babel-core": "^6.25.0",
  "babel-eslint": "^7.2.3",
  "babel-loader": "^7.1.1",
  "babel-plugin-inferno": "^3.2.0",
  "babel-plugin-module-resolver": "^2.7.1",
  "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
  "babel-plugin-transform-es2015-spread": "^6.22.0",
  "babel-plugin-transform-regenerator": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",

  //... some more stuff

  "webpack": "^3.8.1",
  "webpack-bundle-analyzer": "^2.9.1",
  "webpack-dev-middleware": "^1.12.2",
  "webpack-dev-server": "^2.9.5",
  "webpack-manifest-plugin": "^1.3.2",
  "webpack-merge": "^4.1.1",
}

This is my .babelrc:

{
  "presets": 
    [
    "react", 
    "flow",
    "es2015",
    [
      "env", { 
        "modules": "commonjs",
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ]
}

I include the babel-polyfill within my webpack.base.config.js here:

// ... stuff
entry: {
  index: ['babel-polyfill', './index.js'],
},
// ... more stuff

Answer by Noor Durham

Create a new create-react-app project following the steps provided by the user guides,https://facebook.github.io/create-react-app/docs/troubleshooting,I followed the steps for react-app-polyfill and that still did not work on IE11.

<!—
If you answered «Yes»:

Please note that your issue will be fixed much faster if you spend about
half an hour preparing it, including the exact reproduction steps and a demo.

If you're in a hurry or don't feel confident, it's fine to report bugs with
less details, but this makes it less likely they'll get fixed soon.

In either case, please fill as many fields below as you can.

If you answered «No»:

If this is a question or a discussion, you may delete this template and write in a free form.
Note that we don't provide help for webpack questions after ejecting.
You can find webpack docs at https://webpack.js.org/.

<!—
Your module tree might be corrupted, and that might be causing the issues.
Let’s try to recover it. First, delete these files and folders in your project:

* node_modules
* package-lock.json
* yarn.lock

If you decided to use npm, run this in your project directory:

npm install -g npm@latest
npm install

If you decided to use yarn, update it first (https://yarnpkg.com/en/docs/install).
Then run in your project directory:

yarn

There are two ways to do it:

* Create a new app and try to reproduce the issue in it.
  This is useful if you roughly know where the problem is, or can’t share the real code.

* Or, copy your app and remove things until you’re left with the minimal reproducible demo.
  This is useful for finding the root cause. You may then optionally create a new project.

Here is the dockerfile I use to boot up this container:

FROM node:12.0

RUN apt-get update -y && \
apt-get install -y vim

WORKDIR /var/www/html
RUN npm i [email protected]
RUN npx create-react-app welcome
RUN npm i react-app-polyfill
WORKDIR /var/www/html/welcome

CMD ["npm","start"]

Here is the docker-compose file I’m using:

version: '3'
services:
  react-testing:
    container_name: practice
    image: practice-react
    build:
      context: ./
      dockerfile: dockerfile
    ports:
      - "5900:3000"

networks:
  default:
    external:
      name: practice.react

Answer by Kaden Copeland

We’re almost done with all the code changes part now you need to delete .cache folder from your node_modules folder due to some issue in babel-loader as mentioned in create-react-app’s docs.,These are the exact steps I followed to get my app running in development mode on my local machine.,With much efforts you finally are able to open the browser console on IE11 and see this

Install react-app-polyfill using simple npm install

npm i --save react-app-polyfill

Import react-app-polyfill/ie11 and react-app-polyfill/stable at top of your index.js. Your index.js might look something like this.

import "react-app-polyfill/ie11";import "react-app-polyfill/stable";import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import * as serviceWorker from "./serviceWorker";ReactDOM.render(<App />, document.getElementById("root"));// If you want your app to work offline and load faster, you can change unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();

Add “ie 11” to development in your browserlist section of package.json

"browserslist": {    "development": [      "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version",      "ie 11"    ]  }

After the changes your package.json would look something like this

{  "name": "sample-react-app",  "version": "0.1.0",  "private": true,  "dependencies": {    "react": "^16.9.0",    "react-app-polyfill": "^1.0.2",    "react-dom": "^16.9.0",    "react-scripts": "3.1.1"  },  "scripts": {    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"  },  "eslintConfig": {    "extends": "react-app"  },  "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"    ]  }}

Answer by Royal Rivers

You need to configure the webpack. config. js file in vue. Maybe you need to use the npm run eject command to expose the configuration file. These are just some of my suggestions.,I ran — npm run build, and then served built aplication using Express locally — it works perfectly on IE11 :),To those who end up here, I found success using babel-engine-plugin to transpile the necessary node_modules for ie11.

Answer by Royalty Holloway

Answer by Virginia Calderon

SCRIPT 1002 : syntax error  ,This is issue mostly occur in Ie11, there are fellow steps to resolve the issue,Here is the list of things that need polyfill support when used in older browsers