SCRIPT1002: Syntax error - IE11 - Polyfill - Development Mode

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® Xeon® 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.

[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

[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=>0.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.