Search code examples
reactjsinternet-explorer-11react-helmetie-compatibility-modehelmet.js

React not rendering in IE compatibility view

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

Solution

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