facebook/react

React web app is not working on IE 10

Plash-jindal opened this issue Β· 44 comments

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
Web app is displaying black screen on load.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).
I just created a demo app using create-react-app, and then I npm start that application. After that I tried to run it on IE 10, but it displays black screen error saying Expected identifier in console.

What is the expected behavior?
The application should be displayed on the IE 10 browser but this is not happening.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.15"

Browser: IE 10

@Plash-jindal this was already fixed on this PR: #10921

But it is waiting release.

It only affects react.dom.development ... if you use react.dom.production should work :)

EDIT: Pointed to proper PR merged (sorry for the mistake)

But it is working in IE 11.
It’s just the older versions where it’s not working.

@Plash-jindal must be on your IE 11, on mine your JS Fiddle doesn't work: https://ibb.co/ioMYfw

Ah wait that was for R15... but I also tried 16 and it didn't work either :/

Maybe a better link would be: https://codesandbox.io/s/r5zo33o9m as JS Fiddle is not loading on IE11 for me :x

Well, after running the demo app in production mode, it ran on the IE 10.
Now I have to just check it with my project as I am using Java as the backend and react as frontend. Moreover, webpack is used for the deployment, so I will test accordingly in production mode for the IE 10 browser.

Thank you.

πŸ‘

React 16.1.0-beta has been released. Please update react, react-dom, and react-test-renderer (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get 16.1.0 out.

@gaearon Hi, I have tested it using this versions but the application still not running on IE 10.
It is giving me the error "An identifier, string or number was expected".

Can you please give more details? What line is it referring to?

Its in the file bundle.js, line 17271, character 2.

That doesn't tell us much given that we don't have your bundle :-)

Please prepare an isolated project that only contains React and reproduces the issue.

Well, I just created a basic application using create-react-app, and then I tried to run it after updating the react and react-dom modules on IE 10.
It is giving the error while following these steps.

Note: It is the basic startup application which is generated by using create-react-app.

Did you update React to the beta version I suggested after creating the app?

Yes, I did that.
But one thing, when I update react-dom, it tell me the warning saying:

**UNMET PEER DEPENDENCY react@16.1.0-beta
└── react-dom@16.1.0-beta

npm WARN react-dom@16.1.0-beta requires a peer of react@^16.0.0 but none was installed.**

I just created a new app, installed react and react-dom with 16.1.0-beta version, and opened IE in IE10 mode. I see these errors:

'Map' is undefined
'Set' is undefined

I followed instructions in https://reactjs.org/docs/javascript-environment-requirements.html and that gave me a working app.

So we'll need more information about how you reproduced this. Maybe you can publish the project you created?

Sure, I will publish the project and you can check that.

I updated your fiddle. Does this work in IE10? https://jsfiddle.net/3scsxLtz/1/

I've updated my codesandbox: https://codesandbox.io/s/p2rkzl6xwq

Uses the beta version and works fine on IE 11 (proof below)... Testing now with IE 10...

screen shot 2017-11-06 at 16 18 50

@gaearon No, it doesn't work in IE 10.

Well... lol for codesandbox which doesn't run on IE 10 πŸ˜„

@gaearon I ran your jsfiddle and it has this problem:

screen shot 2017-11-06 at 16 23 12

@gaearon @mAiNiNfEcTiOn please check this, https://codesandbox.io/embed/811v7yxyjj

It is not working on IE 10.

@Plash-jindal for me the whole codesandbox.io doesn't work on IE 10 πŸ˜‰

@mAiNiNfEcTiOn Please try to install my project which I uploaded it here as a zip file and do the npm install and try to run it on IE 10.

As I wrote above, React requires Map and Set polyfills. πŸ˜‰

Please follow these instructions to include them:
https://reactjs.org/docs/javascript-environment-requirements.html

@gaearon then, will do it on your fiddle too to check and confirm. πŸ‘

@gaearon I tried that, it did not work either.

I'll be looking at your zip in a sec.

Sure, thanks. @gaearon

I used polyfill.io with its default-3.6 configuration which polyfills Map and Set, doesn't seem to work. Maybe jsfiddle doesn't support IE10 too? (GIving an error in the _display frame πŸ™„ )

screen shot 2017-11-06 at 16 36 28

Yes, I've verified JSFiddle itself is broken so we shouldn't test in it.

@Plash-jindal I tested your stuff on IE 10... works:

screen shot 2017-11-06 at 16 42 50

I have verified the zipped project works on a real IE10 instance (via BrowserStack).

img_0224

Are you sure that you are not running this on production environment?

@Plash-jindal i unzipped, did npm i and did npm start. As you can see I accessed http://localhost:3000 ... worked just fine.

screen shot 2017-11-06 at 16 52 33

I get this error on IE 10 when I try to run it.

@Plash-jindal Look at the Modo de explorador ... is set to IE8.

@mAiNiNfEcTiOn Yes, its working fine now. My mistake, I was running it with Explorer mode as IE 8. πŸ‘

Create React App is not displaying in internet explorer 11. How can i fix that?

Interested too!

dmsps commented

If it doesnt work in IE, try to use babel-polyfill

Or polyfill.io

when I ran my react project ,my index.js file is like this

import 'core-js/es/map';
import 'core-js/es/set';
import 'raf/polyfill';
 import "core-js";
 import "regenerator-runtime/runtime";
import React from 'react';
import ReactDOM from 'react-dom';

but it doesn't work in IE 10 , Who can help me tell me what to do ? my react and react-dom is 16.11.0

when I run in IE 10 ,it console SCRIPT5009: 'Map' is undefined