create-react-app: 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:)
- Create a new create-react-app project following the steps provided by the user guides
- browse to website on chrome and see it working perfectly.
- 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)
- docker-compose build
- docker-compose up -d
- docker exec -it practice bash
- cd src
- vi index.js
- add the two polyfill lines to the top of index.js
- save and quit vi
- go to the webpage on IE11.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 15 (3 by maintainers)
"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