Create-react-app: Apps mit "React-Scripts" v4.0.0 funktionieren in IE11 nicht

Wenn ich mich nicht irre, funktioniert ein neues Projekt im Entwicklungsmodus aufgrund der browserslist -Konfiguration überhaupt nicht im IE.

(siehe package.json ).

@ Pierre-Do
Ja, ich habe mein Problem mit den fehlenden Informationen aktualisiert.
Ich habe vergessen, dass IE11 nicht sofort unterstützt wird, aber mit react-app-polyfill funktioniert

+, das gleiche Problem beim Produktionsaufbau
https://reactjs.org/docs/error-decoder.html/?invariant=31&args [] = Objekt% 20with% 20keys% 20% 7B% 24% 24Typ von% 2C% 20Typ% 2C% 20Taste% 2C% 20Ref% 2C % 20props% 2C% 20_owner% 7D

meine Problemumgehung:

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

Ich bin auch von diesem Problem betroffen

Ich kann bestätigen, dass die @ezBill- Lösung für mich funktioniert.
Vielleicht muss react-app-polyfill repariert werden?

Ich kann bestätigen, dass die @ezBill- Lösung für mich funktioniert.

+1

Die Problemumgehung funktioniert bei mir nicht, der Fehler bleibt bestehen.

Meine Polyfills sehen so aus und ich habe kein Problem mit IE11:

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

Beachten Sie, dass diese über allen anderen Importen stehen müssen, die ohne diese Polyfills brechen würden. Außerdem bietet die Polyfüllung keine weiteren esoterischen APIs wie TextEncoder sodass Sie für diese weiterhin Polyfüllungen laden müssen, wenn Sie sie aus irgendeinem Grund benötigen.

Ich denke, die neue jsx-Transformation verursacht dies. Versuchen Sie, sie zu deaktivieren, indem Sie entweder /** <strong i="5">@jsxRuntime</strong> classic */ oben in Ihre Hauptindex.js einfügen, in die Sie auch Ihre Polyfills importieren - oder die Umgebungsvariable DISABLE_NEW_JSX_TRANSFORM=true festlegen. In meinem Fall behebt eines dieser Probleme dies.

Ich vermute, dass Sie durch das Importieren von Polyfills diese zuerst laden können, bevor sie reagieren, aber Sie können sie nicht vor der vom Compiler eingefügten Zeile import {jsx as _jsx} from 'react/jsx-runtime'; laden.

@msbarry Ich kann bestätigen, dass dies das Problem hier behebt. Danke für die Hilfe!

Wir sind auf dasselbe Problem gestoßen. Wir hatten jedoch bereits einen Großteil unserer Codebasis in das neue JSX-Format konvertiert (das Format, in das Sie React nicht mehr importieren müssen).

Gute Nachrichten! Wir konnten die gesamte neue JSX-Syntax beibehalten!

Wir mussten dies nur oben in unserer src/index.js -Datei anwenden.

/** <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'

Der Kommentar wurde hinzugefügt, da wir sonst sehen könnten, dass dies etwas ist, was die Leute nicht verstehen würden und wahrscheinlich für immer in der Codebasis herumhängen würden.

Der einzige Nachteil ist, dass wir durch Treeshaking unsere Bundle-Größe nicht reduzieren können. Dies war einer der Hauptgründe, warum wir überhaupt auf React 17 aktualisiert haben :(

FWIW teilen wir die index.ts -Datei in eine init.ts und main.tsx -Datei auf, in der init.ts alle relevanten Polyfills importiert und main.tsx der eigentliche Einstiegspunkt ist ( mit React Code) und index.ts importiert nur beide nacheinander. Dies stellt sicher, dass alle Module, für die möglicherweise die Polyfills wirksam sein müssen, nach den Polyfills geladen werden, und die Benennung stellt sicher, dass die Polyfills auch bei automatischer Sortierung der Importe vor dem Haupteinstiegspunkt liegen.

Dies ist möglicherweise eine praktikablere Lösung, als dieses Problem zu umgehen.

Keines der oben genannten scheint zu funktionieren.

IE11 Fehler mit

Wenn Sie auf den Fehler klicken, gelangen Sie hierher

IE-Version

Hier ist ein super einfaches Beispiel zum Reproduzieren

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Aktualisieren Sie die 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. Fügen Sie ie 11 zu browerslist in 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

Versuchen Sie, import 'react-app-polyfill/stable'; aus index.js zu entfernen.

Sie brauchen nur import 'react-app-polyfill/ie11'

Das sieht nicht nach einem Polyfill-Problem aus. Der Code, den Sie im Debugger sehen, ist nicht ES5, sondern verwendet Destrukturierungs- und Standardargumente, von denen keines von IE11 unterstützt wird. Versuchen Sie, "ie >= 11" in Ihrem browserslist anstelle von "ie 11" . Ich bin mir nicht sicher, ob eine der beiden Syntaxen funktionieren soll.

@ Dan503 @pluma Ich habe beides versucht, "ie >= 11" und import 'react-app-polyfill/stable'; , aber immer noch kein Glück.

Könnten Sie so nett sein und ein neues npx create-react-app ie11app erstellen und prüfen, ob es auf IE11 tatsächlich noch für Sie funktioniert?

Vielen Dank

Aktualisieren:
Zurückkehren zurück zu "react-scripts": "^3.0.0" Arbeiten auf IE 11 sogar mit "react": "^17.0.1",
Aber "react-scripts": "4.0.0" ist für mich immer noch kaputt

Ich habe auch viele dieser Lösungen ausprobiert. Das einzige, was funktionierte, war das Herabstufen von react-scripts auf 3.4.4 .