Create-React-App 在 Edge 浏览器中不起作用

Question

I am currently playing around with React, starting with Create-React-App Boilerplate, which I downloaded following https://reactjs.org/docs/create-a-new-react-app.html .

In Chrome the code works pretty well, however, in Microsoft Edge the brwoser windows remains blank white without any output.

I have not modified the Create-React-Package in any way, however, this also holds true for apps that I wrote according to tutorials: Working great in Chrome, but Edge simply shows a white screen as if no code was executed at all.

Do I need some additional package to make React Apps run in the Edge Browser?

Answer 1

That is by design. If you look in your package.json the dev build is only configured to use the following browsers:

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

read https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers for more information

Answer 2

You must be using some latest javascript functions like String.prototype.includes() or something like that which is breaking on Edge. You can add polyfill

npm install react-app-polyfill core-js

// in App.js or main file

import 'react-app-polyfill/stable';

Answer 3

I was dealing with IE and Edge compatibility. In my case, I code in some pages

windows.scrollTo(0,0);

In Chrome, FireFox and Safari works fine, but has a conflict in Edge and IE.
Specifically the scrollTo(0,0) syntax. So I tried to change the syntax to

windows.scrollTop = 0;

This simple change solve my problem and I find the solution debugging at IE inspector console, because Edge console does not show me any information. Good luck!

Answer 4

If you look in the Developer Tools, you'll see any errors that are happening. If you supply them it will be easier to track down the issue.

For older browsers, it is often a polyfill that you need to add:

npm install react-app-polyfill

https://www.npmjs.com/package/react-app-polyfill

Answer 5

I have a similar issues with Edge 48. The suggestion for using react-app-polyfill solved some of the issues - in my case it was Array.prototype.flatMap support.

However, the polyfills don't fix some language issues. I had used the spread syntax throughout the code, and had to manually replace it.

If you have anything in your code like this:

const { x, y, ...rest} = props;
const newProps = {...rest, a:1 };

then you need to replace the spread syntax with something like:

const { x, y } = props;
const rest = {};
Object.keys(props).forEach(key => {
  if(key!=='x' && key !=='y') rest[key] = props[key];
});
const newProps = Object.assign({}, rest, {a:1});

There may be a way to transpile to ES5, but I'm not sure how to do this without seriously messing with the create-react-app default configs.