1

I am using from create-react-app and not rendering in IE11

On IE compatibility mode is checked for intranet sites. So after deployment it uses IE5 or IE7 emulator and this shows blank page with some errors in console.

I tried to different workarounds:

  1. using X-UA-Compatible tag using react-helmet
  2. setting response header in IIS for X-UA-Compatible
  3. setting X-UA-Compatible header in web.config

None of these work.

I found this meta tag needs to be set as first child of the head. But using react-helmet it is not possible to place a tag at very top.

Can anyone faced similar issue?

Edit: It works fine in IE11. It is just IE compatibility issue

masum7
  • 822
  • 6
  • 17

2 Answers2

3

From the official documentation, react doesn't support older browsers below IE 9. You say you run it in compatibility mode which is IE 5 and IE 7. React doesn't support these two IE versions.

You could add this meta tag manually <meta http-equiv="X-UA-Compatible" content="IE=edge"> in the <head> of public/index.html to override the compatibility view.

Besides, does your app work well in IE 11 without compatibility view? You could also follow this answer to make it supported on IE 11.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • Yes, you are right in IE11 it renders perfectly. I mean from dev tool if I change the compatibility mode to IE11 then it works perfect. I tried with react-helmet to put the header. Then it was added end of the head tag (not top). And it does not work. Does not work means still choosing IE5/IE7 emulator in IE – masum7 Dec 15 '19 at 23:07
  • 1
    What about putting the meta tag manually without react-helmet? If still not works, please provide [a minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so that we can have a test and can have a better understanding of the issue. – Yu Zhou Dec 16 '19 at 03:17
  • The application is created with create-react-app script. I have no idea how to add the tag manually because there is head tag available anywhere to modify – masum7 Dec 17 '19 at 00:13
  • Looks like there is a public/index.html that can be modified :) That can be a good solution! – masum7 Dec 17 '19 at 00:15
  • 1
    Yes, just add the tag in the `` of **public/index.html**. – Yu Zhou Dec 17 '19 at 02:08
  • Thanks Yu Zhou. Do you want to edit your asnwer so that I can mark it answer – masum7 Dec 17 '19 at 02:31
  • @masum7 ok, I've updated the answer. You could check it. – Yu Zhou Dec 17 '19 at 02:40
-1

The problem could be ECMA 6 compatibility with IE 11. You can transpile your code to ES5 (with babel) as ES5 is supported by IE.

Muhammad Murad Haider
  • 1,357
  • 2
  • 18
  • 34
  • I guess this is because from the question it is understandable it is not IE11 issue, rather IE compatibility issue – masum7 Dec 15 '19 at 23:30