Create-react-app: Aplicativos com `react-scripts` v4.0.0 não funcionam no IE11

Se não me engano, um novo projeto não funcionará no IE em modo de desenvolvimento devido à configuração browserslist .

(veja package.json ).

@ Pierre-Do
Sim, atualizei meu problema com as informações ausentes.
Esqueci que o IE11 não é compatível com o uso imediato, mas com react-app-polyfill também não está funcionando :(

+, mesmo problema na construção de produção
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

minha solução alternativa:

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

Também sou afetado por este problema

Posso confirmar que a solução @ezBill funciona para mim.
Talvez react-app-polyfill precise ser consertado?

Posso confirmar que a solução @ezBill funciona para mim.

+1

A solução alternativa não está funcionando para mim, o erro permanece.

Meus polyfills são assim e não tenho problemas com o IE11:

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

Observe que eles devem vir acima de quaisquer outras importações que quebrariam sem esses polyfills no lugar. Além disso, o polyfill não fornece algumas APIs mais esotéricas, como TextEncoder então você ainda precisará carregar polyfills para eles se precisar deles por algum motivo.

Acho que a nova transformação jsx está causando isso, tente desabilitá-la adicionando /** <strong i="5">@jsxRuntime</strong> classic */ ao topo de seu index.js principal, onde você também importa seus polyfills - ou defina DISABLE_NEW_JSX_TRANSFORM=true variável de ambiente. No meu caso, qualquer uma dessas corrige isso.

Meu palpite é que, importando polyfills primeiro, você pode fazer com que carreguem antes de reagir, mas não pode fazer com que carreguem antes da linha import {jsx as _jsx} from 'react/jsx-runtime'; que o compilador insere.

@msbarry Posso confirmar que isso corrige o problema aqui. Obrigado pela ajuda!

Encontramos esse mesmo problema. Já convertemos muito da nossa base de código para o novo formato JSX (o formato em que você não precisa mais importar React ).

Boas notícias! Conseguimos manter toda a nova sintaxe JSX!

Só tivemos que aplicar isso ao topo de nosso arquivo 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'

Adicionou o comentário porque, caso contrário, poderíamos ver isso sendo algo que as pessoas não entenderiam e provavelmente deixariam para sempre na base de código.

A única desvantagem é que não conseguimos que o treehaking reduza o tamanho do nosso pacote, o que foi um dos principais motivos pelos quais atualizamos para o React 17 :(

FWIW dividimos o arquivo index.ts em um arquivo init.ts e main.tsx onde init.ts importa todos os polyfills relevantes e main.tsx é o ponto de entrada real ( contendo o código React) e index.ts apenas importa os dois em sequência. Isso garante que todos os módulos que podem precisar dos polyfills para entrar em vigor sejam carregados após os polyfills e a nomenclatura garante que, mesmo ao usar a classificação automática de importações, os polyfills venham antes do ponto de entrada principal.

Esta pode ser uma solução mais viável do que ter que contornar esse problema.

Nenhuma das opções acima parece estar funcionando.

Erros do IE11 com

Clicar no erro nos traz aqui

Versão IE

Aqui está um exemplo super simples para reproduzir

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Atualize o 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. Adicione ie 11 a browerslist em 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

Tente remover import 'react-app-polyfill/stable'; de index.js.

Você só precisa de import 'react-app-polyfill/ie11'

Isso não parece ser um problema de polyfill. O código que você está vendo no depurador não é ES5, ele usa desestruturação e argumentos padrão, nenhum dos quais é compatível com o IE11. Tente usar "ie >= 11" em seu browserslist vez de "ie 11" . É o que eu tenho, não tenho certeza se alguma das sintaxes deve funcionar.

@ Dan503 @pluma Eu tentei ambos, "ie >= 11" e removendo import 'react-app-polyfill/stable'; , mas ainda sem sorte.

Você poderia ser tão gentil e criar um novo npx create-react-app ie11app e verificar se ele realmente ainda está funcionando para você no IE11?

Obrigado

Atualizar:
Reverter para "react-scripts": "^3.0.0" funciona em IE 11 mesmo com "react": "^17.0.1",
Mas "react-scripts": "4.0.0" ainda está quebrado para mim

Também tentei muitas dessas soluções. O único que funcionou foi rebaixar react-scripts para 3.4.4 .