Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React web app is not working on IE 10 #11429

Closed
Plash-jindal opened this issue Nov 2, 2017 · 44 comments
Closed

React web app is not working on IE 10 #11429

Plash-jindal opened this issue Nov 2, 2017 · 44 comments

Comments

@Plash-jindal
Copy link

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

@mAiNiNfEcTiOn
Copy link

mAiNiNfEcTiOn commented Nov 2, 2017

@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)

@gaearon gaearon closed this as completed Nov 2, 2017
@Plash-jindal
Copy link
Author

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

@mAiNiNfEcTiOn
Copy link

mAiNiNfEcTiOn commented Nov 2, 2017

@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 :/

@mAiNiNfEcTiOn
Copy link

mAiNiNfEcTiOn commented Nov 2, 2017

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

@Plash-jindal
Copy link
Author

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.

@mAiNiNfEcTiOn
Copy link

👍

@gaearon
Copy link
Collaborator

gaearon commented Nov 3, 2017

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.

@Plash-jindal
Copy link
Author

Plash-jindal commented Nov 6, 2017

@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".

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

@Plash-jindal
Copy link
Author

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

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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.

@Plash-jindal
Copy link
Author

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.

@gaearon gaearon reopened this Nov 6, 2017
@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

@Plash-jindal
Copy link
Author

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.**

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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?

@Plash-jindal
Copy link
Author

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

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

@Plash-jindal
Copy link
Author

my-app 2.zip

@mAiNiNfEcTiOn
Copy link

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

@Plash-jindal
Copy link
Author

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

@mAiNiNfEcTiOn
Copy link

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

@Plash-jindal
Copy link
Author

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

It is not working on IE 10.

@mAiNiNfEcTiOn
Copy link

@Plash-jindal for me the whole codesandbox.io doesn't work on IE 10 😉

@mAiNiNfEcTiOn
Copy link

@Plash-jindal
Copy link
Author

@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.

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

@mAiNiNfEcTiOn
Copy link

@gaearon then, will do it on your fiddle too to check and confirm. 👍

@Plash-jindal
Copy link
Author

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

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

@Plash-jindal
Copy link
Author

Sure, thanks. @gaearon

@mAiNiNfEcTiOn
Copy link

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

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

@mAiNiNfEcTiOn
Copy link

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

screen shot 2017-11-06 at 16 42 50

@gaearon
Copy link
Collaborator

gaearon commented Nov 6, 2017

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

img_0224

@gaearon gaearon closed this as completed Nov 6, 2017
@Plash-jindal
Copy link
Author

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

@mAiNiNfEcTiOn
Copy link

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

@Plash-jindal
Copy link
Author

Plash-jindal commented Nov 6, 2017

screen shot 2017-11-06 at 16 52 33

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

@mAiNiNfEcTiOn
Copy link

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

@Plash-jindal
Copy link
Author

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

@luc-tuyishime
Copy link

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

@emreavsar
Copy link

Interested too!

@dmsps
Copy link

dmsps commented Dec 14, 2018

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

@mAiNiNfEcTiOn
Copy link

Or polyfill.io

@zxhhh11
Copy link

zxhhh11 commented Oct 30, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants