Create-react-app: Las aplicaciones con `react-scripts` v4.0.0 no funcionan en IE11

Si no me equivoco, un nuevo proyecto no funcionará en IE en modo de desarrollo debido a la configuración browserslist .

(ver package.json ).

@ Pierre-Do
Sí, actualicé mi problema con la información que falta.
Olvidé que IE11 no es compatible de inmediato, pero con react-app-polyfill no funciona tan bien :(

+, mismo problema en la construcción de producción
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_propietario% 7D

mi solución:

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

También me afecta este problema

Puedo confirmar que la solución @ezBill funciona para mí.
Tal vez react-app-polyfill deba arreglarse

Puedo confirmar que la solución @ezBill funciona para mí.

+1

La solución alternativa no me funciona, el error persiste.

Mis polyfills se ven así y no tengo ningún problema con IE11:

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

Tenga en cuenta que estos deben estar por encima de cualquier otra importación que se rompería sin estos polyfills en su lugar. Además, el polyfill no proporciona algunas API más esotéricas como TextEncoder por lo que aún deberá cargar polyfills para esos si los necesita por alguna razón.

Creo que la nueva transformación jsx está causando esto, intente deshabilitarlo agregando /** <strong i="5">@jsxRuntime</strong> classic */ en la parte superior de su index.js principal donde también importa sus polyfills, o establezca DISABLE_NEW_JSX_TRANSFORM=true variable ambiental. En mi caso, cualquiera de esos arregla esto.

Supongo que al importar polyfills primero, puede hacer que se carguen antes de reaccionar, pero no puede hacer que se carguen antes de la línea import {jsx as _jsx} from 'react/jsx-runtime'; que inserta el compilador.

@msbarry Puedo confirmar que esto soluciona el problema aquí. ¡Gracias por la ayuda!

Nos encontramos con el mismo problema. Sin embargo, ya habíamos convertido gran parte de nuestro código base al nuevo formato JSX (el formato en el que ya no es necesario importar React ).

¡Buenas noticias! ¡Pudimos mantener toda la nueva sintaxis JSX!

Solo tuvimos que aplicar esto en la parte superior de nuestro archivo 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'

Agregué el comentario porque, de lo contrario, podríamos ver que esto es algo que la gente no entendería y probablemente dejaría dando vueltas en el código base para siempre.

El único inconveniente es que no conseguimos que la sacudida de árboles reduzca el tamaño de nuestro paquete, que fue una de las razones clave por las que mejoramos a React 17 en primer lugar :(

FWIW dividimos el archivo index.ts en un archivo init.ts y main.tsx donde init.ts importa todos los polyfills relevantes y main.tsx es el punto de entrada real ( que contiene el código React) y index.ts solo importa ambos en secuencia. Esto asegura que cualquier módulo que pueda necesitar que los polyfills estén en vigor se carguen después de los polyfills y el nombre asegura que incluso cuando se usa la clasificación automática de importaciones, los polyfills vienen antes del punto de entrada principal.

Esta puede ser una solución más viable que tener que solucionar este problema.

Ninguno de los anteriores parece funcionar.

Errores IE11 con

Hacer clic en el error nos trae aquí.

Versión IE

Aquí hay un ejemplo súper simple de reproducir.

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Actualizar el 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. Agregue ie 11 a 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

Intente eliminar import 'react-app-polyfill/stable'; de index.js.

Solo necesitas import 'react-app-polyfill/ie11'

Eso no parece un problema de polyfill. El código que está viendo en el depurador no es ES5, usa desestructuración y argumentos predeterminados, ninguno de los cuales es compatible con IE11. Intente usar "ie >= 11" en su browserslist lugar de "ie 11" . Es lo que tengo, no estoy seguro de si alguna de las sintaxis debería funcionar.

@ Dan503 @pluma Probé ambos, "ie >= 11" y quitando import 'react-app-polyfill/stable'; , pero aún así no tuve suerte.

¿Podrías ser tan amable y crear un nuevo npx create-react-app ie11app y comprobar si todavía te funciona en IE11?

Gracias

Actualizar:
Revertir a "react-scripts": "^3.0.0" funciona en IE 11 incluso con "react": "^17.0.1",
Pero "react-scripts": "4.0.0" todavía está roto para mí

También probé muchas de estas soluciones. El único que funcionó fue rebajar react-scripts a 3.4.4 .