Create-react-app: Приложения с `react-scripts` v4.0.0 не работают в IE11

Если не ошибаюсь, новый проект вообще не будет работать в IE в режиме разработки из-за конфигурации browserslist .

(см. package.json ).

@ Pierre-Do
Да, я обновил свою проблему с отсутствующей информацией.
Я забыл, что IE11 не поддерживается из коробки, но с react-app-polyfill тоже не работает :(

+, такая же проблема в производственной сборке
https://reactjs.org/docs/error-decoder.html/?invariant=31&args [] = object% 20with% 20keys% 20% 7B% 24% 24typeof% 2C% 20type% 2C% 20key% 2C% 20ref% 2C % 20объект% 2C% 20_owner% 7D

мой обходной путь:

import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

Меня тоже затронула эта проблема

Я могу подтвердить, что решение @ezBill мне
Может быть, react-app-polyfill нужно исправить?

Я могу подтвердить, что решение @ezBill мне

+1

Обходной путь у меня не работает, ошибка остается.

Мои полифиллы выглядят так, и у меня нет проблем с IE11:

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

Обратите внимание, что они должны быть выше любых других импортов, которые не работают без этих полифилов. Кроме того, polyfill не предоставляет еще несколько эзотерических API, таких как TextEncoder поэтому вам все равно придется загружать полифиллы, если они вам по какой-то причине понадобятся.

Я думаю, что новое преобразование jsx вызывает это, попробуйте отключить его, добавив /** <strong i="5">@jsxRuntime</strong> classic */ в начало вашего основного index.js, куда вы также импортируете свои полифиллы, или установите переменную окружения DISABLE_NEW_JSX_TRANSFORM=true . В моем случае любой из этих способов исправляет это.

Я предполагаю, что, сначала импортировав полифиллы, вы можете заставить их загрузить, прежде чем реагировать, но вы не можете заставить их загружаться до строки import {jsx as _jsx} from 'react/jsx-runtime'; которую вставляет компилятор.

@msbarry Я могу подтвердить, что это

Мы столкнулись с этой же проблемой. Мы уже преобразовали большую часть нашего кода в новый формат JSX (формат, в который больше не нужно импортировать React ).

Хорошие новости! Мы смогли сохранить весь новый синтаксис JSX!

Нам нужно было применить это только к началу нашего файла src/index.js .

/** <strong i="10">@jsxRuntime</strong> classic */
import 'react-app-polyfill/ie11'

// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
// https://github.com/facebook/create-react-app/issues/9906
import React from 'react'

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

Единственным недостатком является то, что мы не можем заставить treehaking уменьшить размер нашего пакета, что было одной из ключевых причин, по которым мы в первую очередь обновились до React 17 :(

FWIW мы разделяем файл index.ts файлы init.ts и main.tsx где init.ts импортирует все соответствующие полифиллы, а main.tsx - фактическая точка входа ( содержащий код React), а index.ts просто импортирует оба последовательно. Это гарантирует, что любые модули, для которых могут потребоваться полифиллы, будут загружены после полифиллов, а именование гарантирует, что даже при использовании автоматической сортировки импорта полифиллы будут располагаться перед основной точкой входа.

Это может быть более действенным решением, чем обходить эту проблему.

Кажется, ничего из вышеперечисленного не работает.

Ошибки IE11 с

Щелчок по ошибке приводит нас сюда

Версия IE

Вот супер простой пример для воспроизведения

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Обновите index.js

/** <strong i="23">@jsxRuntime</strong> classic */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>Come on</div>,
  document.getElementById('root')
);

1. Добавить ie 11 в browerslist в package.json

{
  "name": "ie11app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

1. yarn start

Попробуйте удалить import 'react-app-polyfill/stable'; из index.js.

Вам нужно всего import 'react-app-polyfill/ie11'

Это не похоже на проблему с полифилом. Код, который вы видите в отладчике, не является ES5, он использует деструктурирование и аргументы по умолчанию, ни один из которых не поддерживается IE11. Попробуйте использовать "ie >= 11" в вашем browserslist вместо "ie 11" . Это то, что у меня есть, не уверен, должен ли работать какой-либо синтаксис.

@ Dan503 @pluma Я пробовал и "ie >= 11" и удаление import 'react-app-polyfill/stable'; , но все равно безуспешно.

Не могли бы вы проявить такую ​​доброту и создать новый npx create-react-app ie11app и проверить, действительно ли он все еще работает для вас в IE11?

Спасибо

Обновить:
Возврат к "react-scripts": "^3.0.0" работает с IE 11 даже с "react": "^17.0.1",
Но "react-scripts": "4.0.0" все еще не работает для меня

Я тоже пробовал многие из этих решений. Единственное, что сработало, - это понижение версии 3.4.4 react-scripts до 3.4.4 .