Почему IE 11 отображает пустую страницу в приложении React

React несовместим сразу с IE,

Из официальной документации:

React поддерживает все популярные браузеры, включая Internet Explorer 9 и выше, хотя некоторые полифиллы требуются для старых браузеров, таких как IE 9 и IE 10.

Мы не поддерживаем старые браузеры, которые не поддерживают методы ES5, но вы можете обнаружить, что ваши приложения действительно работают в старых браузерах, если на странице включены полифиллы, такие как es5-shim и es5-sham. Если вы выберете этот путь, вы будете сами по себе.

Чтобы ваше приложение работало в IE (11 или 9), вам необходимо установить React-app-polyfill:

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

Функции :

Каждый полифилл обеспечивает наличие следующих языковых функций:

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

использование

Сначала установите пакет с помощью Yarn или npm:

npm install react-app-polyfill

Теперь вы можете импортировать точку входа для минимальной версии, которую собираетесь поддерживать. Например, если вы импортируете точку входа IE9, это будет включать поддержку IE10 и IE11.

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

Вы также можете настроить манифест для работы с различными браузерами, используя следующий документ: https://github.com/browserslist/browserslist

пример :

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

Дополнительная информация на официальном сайте

Для всех, кто сталкивается с этой проблемой,

Если react-app-polyfill у вас не работает, попробуйте core-js.

$ npm install core-js

Убедитесь, что это первая строка в вашем файле src / index.js:

import 'core-js/stable'

Также вы можете не увидеть исправление, когда находитесь в разработке.

Для меня проблема решилась только в производственной версии (реактивная сборка)

Пакет react-app-polyfill поможет работать с приложением react в ie9 и ie11. Это будет работать как в среде разработки, так и в производственной среде.

Выполните следующие действия. 1. Отредактируйте файл index.js и добавьте следующие строки в самый верх файла.

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

2. Отредактируйте файл Package.json и добавьте «ie 11» в разделы разработки списка браузеров. Список продукции по умолчанию довольно обширен и включает, например, 11 уже через> 0,2%.

   "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version",
     "ie 11"
   ]
   

   }

3. удалите всю папку node_modules

4. запустите npm install, чтобы переустановить node_modules

5. запустить npm начать запускать снова

react-app-polyfills у меня работает только в продакшене, а не в разработке. Создайте, разверните и протестируйте его.

Если вы используете Object.assign () в своем редукторе (например) или некоторые другие функции, которые IE11 не поддерживает без полифиллинга, у вас может возникнуть эта проблема.

Я попробовал решения, предложенные выше, но все еще не мог заставить страницу работать ни в IE11, ни в моей старой iOS 9.3.2 ...

Я сделал именно то, что было предложено @Treycos и @Kurisubo, но без разрешения; для решения пришлось заменить функцию стрелки es6 из моего функционального компонента на декларативный стиль старой школы и страницу, загруженную в IE 11 и iOS 9.3.2

ПРИМЕЧАНИЕ: этот функциональный компонент был первым компонентом, отображаемым на странице.

Добавьте это здесь, чтобы кто-то мог получить выгоду в будущем.

Попробуйте следующий способ решения проблемы: -

Шаг 1: - Сначала установите пакеты: -

npm install react-app-polyfill

or

yarn add react-app-polyfill

Шаг 2: - Добавьте приведенную ниже команду вверху вашего index.js файла: -

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

Шаг 3. - Замените часть списка браузеров следующим образом в файле package.json: -

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

Шаг 4: - Удалите node-module, package.lock.json, yarn.lock, а затем выполните следующую команду: -

 yarn

 yarn start

or
npm install

npm start

Для тех, кто безуспешно пытался использовать «react-app-polyfill / xxx».

Во-первых: обязательно импортируйте их в свой файл index.js (файл с ReactDOM.render (‹React.StrictMode› ...).

Во-вторых: убедитесь, что вы импортируете его в верхней части кода. Над импортом React из react.

Ни один полифил на земле, похоже, не помог, поэтому я отлаживал целую вечность и, наконец, выяснил «ошибку» разработчика React (видно только в инструментах разработчика IE11):

The above error occurred in the <h2> component:
in h2 (created by CMSHeading)
// ...

Который имел:

const {
  ...styles
} = this.props;
return (<h2 styles={styles}>...</h2>);

Единственное, что я случайно отправлял другой материал, который был не только стилями css, но и объектами и т. Д. Поэтому я убедился, что отправляю ему только настоящие стили, а затем все снова заработало :)