Create-react-app: Les applications avec `react-scripts` v4.0.0 ne fonctionnent pas dans IE11

Si je ne me trompe pas, un nouveau projet ne fonctionnera pas du tout sur IE en mode développement en raison de la configuration browserslist .

(voir package.json ).

@ Pierre-Do
Oui, j'ai mis à jour mon problème avec les informations manquantes.
J'ai oublié que IE11 n'est pas pris en charge par défaut, mais avec react-app-polyfill ne fonctionne pas aussi bien :(

+, même problème sur la version de production
https://reactjs.org/docs/error-decoder.html/?invariant=31&args [] = object% 20with% 20keys% 20% 7B% 24% 24typeof% 2C% 20type% 2C% 20key% 2C% 20ref% 2C % 20props% 2C% 20_owner% 7D

ma solution de contournement:

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

Je suis également concerné par ce problème

Je peux confirmer que la solution @ezBill fonctionne pour moi.
Peut-être que react-app-polyfill doit être corrigé?

Je peux confirmer que la solution @ezBill fonctionne pour moi.

+1

La solution de contournement ne fonctionne pas pour moi, l'erreur persiste.

Mes polyfills ressemblent à ceci et je n'ai aucun problème avec IE11:

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

Notez que ceux-ci doivent être supérieurs à toute autre importation qui se briserait sans ces polyfills en place. De plus, le polyfill ne fournit pas d'API plus ésotériques comme TextEncoder , vous devrez donc toujours charger des polyfills pour ceux-ci si vous en avez besoin pour une raison quelconque.

Je pense que la nouvelle transformation jsx est à l'origine de cela, essayez de la désactiver soit en ajoutant /** <strong i="5">@jsxRuntime</strong> classic */ en haut de votre index.js principal où vous importez également vos polyfills - ou en définissant la variable d'environnement DISABLE_NEW_JSX_TRANSFORM=true . Dans mon cas, l'un ou l'autre corrige ce problème.

Je suppose qu'en important les polyfills en premier, vous pouvez les charger avant de réagir, mais vous ne pouvez pas les faire charger avant la ligne import {jsx as _jsx} from 'react/jsx-runtime'; que le compilateur insère.

@msbarry Je peux confirmer que cela résout le problème ici. Merci pour l'aide!

Nous avons rencontré ce même problème. Nous avions déjà converti une grande partie de notre base de code au nouveau format JSX (le format où vous n'avez plus besoin d'importer React ).

Bonnes nouvelles! Nous avons pu conserver l'intégralité de la nouvelle syntaxe JSX!

Nous n'avons eu qu'à appliquer cela en haut de notre fichier 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'

Ajout du commentaire car sinon, nous pourrions voir que c'est quelque chose que les gens ne comprendraient pas et laisseraient probablement traîner dans la base de code pour toujours.

Le seul inconvénient est que nous n'arrivons pas à réduire la taille de notre bundle, ce qui était l'une des principales raisons pour lesquelles nous avons mis à niveau vers React 17 en premier lieu :(

FWIW, nous divisons le fichier index.ts en un fichier init.ts et main.tsx où init.ts importe tous les polyfills pertinents et main.tsx est le point d'entrée réel ( contenant le code React) et index.ts importe simplement les deux dans l'ordre. Cela garantit que tous les modules qui peuvent avoir besoin des polyfills pour être en vigueur sont chargés après les polyfills et la dénomination garantit que même lors de l'utilisation du tri automatique des importations, les polyfills viennent avant le point d'entrée principal.

Cela peut être une solution plus pratique que d'avoir à contourner ce problème.

Rien de ce qui précède ne semble fonctionner.

Erreurs IE11 avec

Cliquer sur l'erreur nous amène ici

Version IE

Voici un exemple super simple à reproduire

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Mettez à jour le 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. Ajouter ie 11 à browerslist en 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

Essayez de supprimer import 'react-app-polyfill/stable'; de index.js.

Vous n'avez besoin que de import 'react-app-polyfill/ie11'

Cela ne ressemble pas à un problème de polyfill. Le code que vous voyez dans le débogueur n'est pas ES5, il utilise des arguments de déstructuration et par défaut, dont aucun n'est pris en charge par IE11. Essayez d'utiliser "ie >= 11" dans votre browserslist au lieu de "ie 11" . C'est ce que j'ai, je ne sais pas si l'une ou l'autre syntaxe devrait fonctionner.

@ Dan503 @pluma J'ai essayé les deux, "ie >= 11" et en supprimant import 'react-app-polyfill/stable'; , mais toujours pas de chance.

Pourriez-vous être si gentil et créer un nouveau npx create-react-app ie11app et vérifier s'il fonctionne toujours pour vous sur IE11?

Je vous remercie

Mettre à jour:
Le retour à "react-scripts": "^3.0.0" fonctionne sur IE 11 même avec "react": "^17.0.1",
Mais "react-scripts": "4.0.0" est toujours cassé pour moi

J'ai également essayé plusieurs de ces solutions. Le seul qui a fonctionné a été de rétrograder react-scripts à 3.4.4 .