Create-react-app: Aplikasi dengan `react-scripts` v4.0.0 tidak bekerja di IE11

Jika saya tidak salah, proyek baru tidak akan berfungsi di IE sama sekali dalam mode pengembangan karena konfigurasi browserslist .

(lihat package.json ).

@ Pierre-Do
Ya, saya memperbarui masalah saya dengan informasi yang hilang.
Saya lupa bahwa IE11 tidak didukung di luar kotak, tetapi dengan react-app-polyfill juga tidak berfungsi :(

+, masalah yang sama pada build produksi
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

solusi saya:

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

Saya juga terpengaruh oleh masalah ini

Saya dapat mengonfirmasi bahwa solusi @ezBill berfungsi untuk saya.
Mungkin react-app-polyfill perlu diperbaiki?

Saya dapat mengonfirmasi bahwa solusi @ezBill berfungsi untuk saya.

+1

Solusi tidak berhasil untuk saya, kesalahan tetap ada.

Polyfill saya terlihat seperti ini dan saya tidak punya masalah dengan IE11:

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

Perhatikan bahwa ini harus berada di atas impor lain yang akan rusak tanpa polyfill ini diterapkan. Ditambah polyfill tidak menyediakan beberapa API esoterik seperti TextEncoder jadi Anda masih perlu memuat polyfill untuk itu jika Anda membutuhkannya karena alasan tertentu.

Saya pikir transformasi jsx baru menyebabkan ini, coba nonaktifkan baik dengan menambahkan /** <strong i="5">@jsxRuntime</strong> classic */ ke bagian atas index.js utama Anda di mana Anda juga mengimpor polyfills Anda - atau setel variabel lingkungan DISABLE_NEW_JSX_TRANSFORM=true . Dalam kasus saya, salah satu dari itu memperbaiki ini.

Dugaan saya adalah bahwa dengan mengimpor polyfills terlebih dahulu Anda dapat membuatnya dimuat sebelum bereaksi, tetapi Anda tidak dapat membuatnya dimuat sebelum baris import {jsx as _jsx} from 'react/jsx-runtime'; yang disisipkan oleh kompilator.

@msbarry Saya dapat mengonfirmasi bahwa ini memperbaiki masalah di sini. Terima kasih atas bantuannya!

Kami mengalami masalah yang sama ini. Kami telah mengonversi banyak basis kode kami ke format JSX baru (format di mana Anda tidak perlu mengimpor React lagi).

Kabar baik! Kami berhasil mempertahankan semua sintaks JSX yang baru!

Kami hanya perlu menerapkan ini di bagian atas file 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'

Menambahkan komentar karena jika tidak, kami dapat melihat ini menjadi sesuatu yang tidak akan dipahami orang dan mungkin akan meninggalkan berkeliaran di basis kode selamanya.

Satu-satunya downside adalah bahwa kami tidak boleh membuat treeshaking mengurangi ukuran bundel kami yang merupakan salah satu alasan utama kami meningkatkan ke React 17 di tempat pertama :(

FWIW kami membagi file index.ts menjadi file init.ts dan main.tsx dimana init.ts mengimpor semua polyfill yang relevan dan main.tsx adalah entrypoint yang sebenarnya ( berisi kode React) dan index.ts hanya mengimpor keduanya secara berurutan. Ini memastikan semua modul yang mungkin memerlukan polyfill untuk diterapkan dimuat setelah polyfill dan penamaan memastikan bahwa bahkan saat menggunakan pengurutan impor otomatis, polyfill datang sebelum titik masuk utama.

Ini mungkin solusi yang lebih bisa diterapkan daripada harus mengatasi masalah ini.

Tak satu pun di atas tampaknya berhasil.

Kesalahan IE11 dengan

Mengklik kesalahan membawa kita ke sini

Versi IE

Berikut adalah contoh yang sangat sederhana untuk direproduksi

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. Perbarui 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. Tambahkan ie 11 ke browerslist di 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

Coba hapus import 'react-app-polyfill/stable'; dari index.js.

Anda hanya perlu import 'react-app-polyfill/ie11'

Sepertinya bukan masalah polyfill. Kode yang Anda lihat di debugger bukanlah ES5, ia menggunakan argumen destrukturisasi dan default, yang keduanya tidak didukung oleh IE11. Coba gunakan "ie >= 11" dalam browserslist alih-alih "ie 11" . Itu yang saya miliki, tidak yakin apakah salah satu sintaks harus berfungsi.

@ Dan503 @pluma Saya mencoba keduanya, "ie >= 11" dan menghapus import 'react-app-polyfill/stable'; , tetapi masih belum berhasil.

Bisakah Anda berbaik hati dan membuat npx create-react-app ie11app dan memeriksa apakah itu benar-benar masih berfungsi untuk Anda di IE11?

Terima kasih

Memperbarui:
Mengembalikan kembali ke "react-scripts": "^3.0.0" berfungsi pada IE 11 bahkan dengan "react": "^17.0.1",
Tapi "react-scripts": "4.0.0" masih rusak untukku

Saya juga mencoba banyak solusi ini. Satu-satunya yang berhasil adalah menurunkan react-scripts menjadi 3.4.4 .