Create-React-App не работает в Edge Browser

Question

Я сейчас играю с React, начиная с Create-React-App Boilerplate, который я скачал после https://reactjs.org/docs/create-a-new-react-app.html.

В Chrome код работает довольно хорошо, однако в Microsoft Edge brwoser windows остается пустым белым без какого-либо вывода.

Я не модифицировал пакет Create-React-каким-либо образом, однако это также относится к приложениям, которые я написал в соответствии с учебные пособия: отлично работает в Chrome, но Edge просто показывает белый экран, как будто код вообще не выполняется.

Нужен ли какой-то дополнительный пакет для запуска приложений React в браузере Edge?

Answer 1

То есть по замыслу. Если вы посмотрите в свой пакет. json сборка dev настроена только на использование следующих браузеров:

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

читать https://create-react-app.dev/docs/supported-browsers-features/#configuring -поддерживаемые браузеры для получения дополнительной информации

Answer 2

У меня аналогичные проблемы с Edge 48. Предложение по использованию react-app-polyfill решило некоторые проблемы - в моем случае это была поддержка Array.prototype.flatMap.

Однако, полифилы не исправляют некоторые языковые проблемы. Я использовал синтаксис распространения по всему коду и должен был заменить его вручную.

Если в вашем коде есть что-то вроде этого:

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

, то вам нужно заменить синтаксис распространения с чем-то вроде:

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});

Возможно, есть способ перенести на ES5, но я не уверен, как это сделать, если серьезно не возиться с настройками по умолчанию create-react-app.

Answer 3

Если вы загляните в Инструменты разработчика, вы увидите все ошибки, которые происходят. Если вы предоставите их, вам будет легче отследить проблему.

Для старых браузеров часто требуется добавить полифил:

npm install react-app-polyfill

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

Answer 4

Вы должны использовать некоторые новейшие javascript функции, такие как String.prototype.includes() или что-то вроде того, что ломается в Edge. Вы можете добавить polyfill

npm установить реактив-app-polyfill core- js

// в приложении. js или в основном файле

import 'react-app-polyfill/stable';