SCRIPT1002: Syntax error - IE11 - Polyfill - Development Mode

[Patriclis]

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 [email protected] 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 [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

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.

[604karev]

the same issue

[ianschmitz]

You'll want to take a look at the 3.0 release notes. Likely you'll need to adjust your browserslist to add ie11 in development.

[Patriclis]

@ianschmitz Can you give me the exact steps to do this? I tried it once already before I made this bug ticket and it didn't work, want to make sure I'm not doing it wrong.

Went to package.json and under the development section for Browserslist I tried adding these (not all at the same time, one at a time to try and find one that worked) :
"ie 11",
"ie 9-11",
"ie > 9",
"last 100 ie version"

[ianschmitz]

"ie 11" should be enough. You can try using the default values from production as well as they will include ie 11 support.

Try deleting your node_modules folder after making the change as I believe I've experienced Babel caching not detecting the new values

[Patriclis]

Alright It'll take some time to test this since I have to spin up a docker VM here at home. I'll get back as soon as I find out if it worked.

[Saibamen]

Adding IE to CRA 3.0 in browserlist doesn't work.
This same with default IE record in browserslist in CRA 2.X

[Patriclis]

@ianschmitz was correct. deleting node_modules worked.
Steps:

1. Add "ie 11" to package.json
   

2. rm -rf node_modules

3. npm install

4. restart the docker container (If not using docker just stop the app and restart it again with npm start.)

I'll post an updated dockerfile in case anyone is interested in it shortly once I get it working

[604karev]

@ianschmitz , adding "ie 11" browserslist partially solves the problem, now this error apears on arrow function, previously everything worked with babel-polyfill

[604karev]

as temporary resolution this issue I just remove node_modules and replaced package-lock.json and package.json from workin project and npm i and all works fine

[Patriclis]

Did you add the polyfills ontop of your index.js file? (or your projects equivalent)
(see my original post)

[604karev]

@Crobitaille

[Patriclis]

@604karev

Those first 2 lines in my index.js are required for using create-react-app with IE11 now.

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

As noted here in the release notes for v2.0.5:
https://github.com/facebook/create-react-app/releases?after=v2.0.5

[Patriclis]

This is the docker solution that worked for me. To anyone else who wants to try this solution there are a couple of caveats.

1. If your react-project is not called "Welcome" you're going to have to modify the dockerfile to reflect that.
2. You should modify your own package.json and index.js from your existing project, and not use mine. Just be sure to add your "ie 11" lines in the project.json and the two polyfills at the top of index.js
3. If you don't have an existing project, then you can use this to get you started. It gives you a project working that can be developed in IE11.
4. Know enough about docker before you start using this. It's an example, not an ideal or even good development environment. If you dont know what docker volumes are or how to use them, this really isnt for you.

Dockerfile:

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

COPY ./package.json /var/www/html/welcome/package.json
COPY ./index.js /var/www/html/src/welcome/index.js

RUN rm -rf node_modules
RUN npm install

CMD ["npm","start"]

Docker-compose:

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

networks:
  default:
    external:
      name: practice.react

index.js

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-PWA
serviceWorker.unregister();

Package.json:

{
  "name": "welcome",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
  },
  "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",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

[Patriclis]

For a non docker solution:

1. Setup the create-react-app project as normal.
2. Edit the index.js file and add the following lines at the VERY TOP of the file.

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

3. Edit the Package.json file and add "ie 11" to both the production and development sections of the browserslist

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

4. delete your entire node_modules folder
5. run npm install to re-install the node_modules

[ianschmitz]

Glad to hear it worked. The default prouduction list is quite generous and does include ie 11 already via the >0.2% item, so it's not expliclty needed (until the time when the usage is below 0.2% of course).

Here is a handy tool to see the result: https://browserl.ist/?q=%3E0.2%25%2C+not+dead%2C+not+op_mini+all.

The react-app-polyfill/stable polyfill isn't required to get things working, as it will polyfill ALL stable language features, while the react-app-polyfill/ie11 module will only polyfill the bare minimum needed by React/CRA.