Displaying Blank white pages regularly for my website only in IE11

Question

I have created a website using react, babel, webpack and backend Django Framework. When running my site in other browsers like Chrome, Safari, Firefox, it works absolutely fine. But when it comes to IE11, it works fine initially. But after going through some pages on the same website, it displays a blank white screen. I cleared browsing cache and also tried private browsing in IE11, it works fine for some time and then blank screen repeats and it goes on.

From code level, thanks to the community, I tried using polyfills in form of react-app-polyfill and core-js and it didn't work. I also tried adding this but didn't work

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Kindly suggest some good solutions to overcome this issue.

Thanks in Advance

Does this answer your question? [Why IE 11 display blank page rendering react app](https://stackoverflow.com/questions/53631949/why-ie-11-display-blank-page-rendering-react-app) — reymon359, May 14 '20 at 14:09
Does it show any error in the console while it displays the blank page? Does this happen with any specific page? Please check whether Babel is configured properly. Ref: https://blog.steven266.de/react-blank-screen-on-internet-explorer-11-7b7c5863873a — Deepak-MSFT, May 14 '20 at 15:36
SCRIPT5078: Cannot redefine non-configurable property 'startsWith' - This is the error that comes when page goes blank — kumaresaan sekar, May 21 '20 at 13:35
The JavaScript exception "can't redefine non-configurable property" occurs when it was attempted to redefine a property, but that property is non-configurable. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property — Deepak-MSFT, May 22 '20 at 06:11

score 0 · Answer 1 · answered May 14 '20 at 14:02

0

Are you using create-react-app? If so, then go and edit package.json.

  "development": [
  "ie 11",
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]}

Then in index.js add those lines :

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

Important is to delete node_modules and reinstall them.

Here is more info on the topic.

answered May 14 '20 at 14:02

Damian Busz

1,693
1
10
22

Damian, The project is not created using create-react-app but I tried this solution before, but it didn't work for me. Do you have any other solutions in mind for this? – kumaresaan sekar May 14 '20 at 14:45
Could you post your package.json setup? – Damian Busz May 14 '20 at 17:34
Here is the link for package json dependancies [link](https://drive.google.com/file/d/1tdY3CWGp0_TQWGiSd6MB-IIEVDe-7rdg/view?usp=sharing) – kumaresaan sekar May 21 '20 at 13:08

score 0 · Accepted Answer · answered May 28 '20 at 10:42

The solution to this problem came after inputs from multiple answers from different communities.

I referenced core-js package and its version in .babelrc file and also added browsers list under targets variables like this

    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": {"version": "3.6.5"},
        "debug": true,
        "targets": {
          "browsers": [
            "ie 11",
            "last 1 version",
            "> 1%"
          ]
        }
      }
    ]
  ]

Imported core-js and regenerator-runtime in entry js file[default.js]

import "core-js/stable";
import "regenerator-runtime/runtime";

After that, I deleted cache folder in node modules and ran install and build

The site worked in IE11

Thanks all

Displaying Blank white pages regularly for my website only in IE11

2 Answers2