Create React App IE11 : SCRIPT1002: Syntax Error How to get rid of it.

Malay Matwankar
Sep 14 · 3 min read

You’ve been living in a happy Disney land of yours developing a beautiful Single Page Application using Create React App which has been running flawlessly on your production environment. Suddenly someone comes running and reports a bug that is specific to your good old friend Internet Explorer 11.

So you decide to reproduce that bug in your local machine and go on to open your http://localhost:3000 in that old snail paced browser but you’re greeted by a blank screen. Then you again type https://yourfavoritedisneyworld.com in same browser but here you can clearly see your website and all pages with that weird animation bug which you’ve to take care of. But now you’ve a local bug to solve before you can even reproduce the production bug in your machine.

With much efforts you finally are able to open the browser console on IE11 and see this

IE11’s cryptic error

A quick google(and your past experience) tells you that probably some polyfills are missing you try this and that but something just does not seem to work. I also came across similar issue while developing an application using Create React App and following this guideline over here did certainly help me get rid of this error.

These are the exact steps I followed to get my app running in development mode on my local machine.

Step 1

Install react-app-polyfill using simple npm install

npm i --save react-app-polyfill

Step 2

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();

Step 3

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

Step 4

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.

We need to delete this .cache folder

Step 5

Clear IE11’s cache and restart your server react server using npm run start again.

That’s it folks, your app should be running on IE11 by now and now might be the good time that you remember you still have go back to solving that IE specific weird animation bug that someone raised earlier.

Following the above steps helped me get rid of this issue. I have create the application using CRA but my guess is the reac-app-polyfill should resolve this issues in other react applications bootstrapped using some other tool or manually based on your own guidelines, but I’ve not tested this on those applications. Do let me know about your experiences with IE11 and React or maybe even Angular and VueJS.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade