Razzle: IE 11: rusak dengan webpackHotDevClient.

Saya rasa saya melihat sekarang bahwa create-react-app tidak lagi mendukung IE 11 atau kurang secara default, tetapi ada pilihan dengan paket terpisah . Mungkinkah ini hanya dokumentasi? Jika demikian saya akan mencoba memperbarui.

Sekarang saya melihat dokumen tentang polyfills telah diperbarui untuk v3.

Namun, menurut saya ini tidak menyelesaikan masalah. Tampaknya sesuatu yang mirip sedang dilacak di CRA: https://github.com/facebook/create-react-app/issues/5336. Yang satu itu terkait dengan Map yang tidak terdefinisi, yang akan masuk akal sebagai sesuatu yang dapat diperbaiki dengan polyfill.

Semua hal tentang mendukung IE 9-11 ini adalah tentang polyfilling. Saya tidak berpikir polyfill dapat memperbaiki fungsi panah. Kode tidak ditranspilasi untuk browser lama dan saya tidak melihat bagaimana hal itu dapat diperbaiki tanpa memperbarui ketergantungan itu sendiri.

Ini juga masalah dengan ansi-regex , strip-ansi , beberapa misc. file dalam react-dev-utils (termasuk formatWebpackMessages.js ), dan lain-lain chalk file seperti yang diminta oleh react-dev-utils . Saya tidak terlalu paham dengan react-dev-utils jadi saya tidak yakin apakah ini bug dengan mereka atau apakah hal ini seharusnya tidak ada dalam bundel atau apa.

Ada dua hal yang harus Anda selesaikan di sini:

1. Polyfills tidak lagi masuk secara default (hal yang sama berlaku untuk CRA2). Polyfills akan menyelesaikan masalah yang terkait dengan Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc. Ada banyak cara untuk menangani ini mulai dari react-app-polyfill hingga membutuhkan inti-js polyfill spesifik yang dibutuhkan aplikasi spesifik Anda; Saya pikir Babel sendiri dapat membantu mencari tahu core-js mana yang mem-polyfill yang dibutuhkan kode Anda dengan konfigurasi yang sesuai (mungkin ada kendala di sini? Saya tidak yakin mengapa CRA2 tidak mengikuti rute ini).

2. Beberapa penulis perpustakaan tidak lagi mendistribusikan versi es5 dari modul mereka ( ansi-regex , react-dev-utils , dll, dll). Jika Anda melihat IE11 tersedak panah gemuk, ini adalah masalah yang Anda hadapi. CRA2 menyelesaikan ini dengan transpiling node_modules ( webpack conf di CRA2 ) sementara Razzle tidak. Dengan Razzle, Anda dapat menggunakan versi lama dari modul tersebut _atau_ menggunakan hook Razzle untuk memodifikasi konfigurasi webpack agar menyertakan node_modules tertentu yang ingin Anda kompilasi .

Saya masih tidak mengerti apa yang perlu diubah agar berfungsi untuk IE 11. Bahkan seluruh bundel produksi saya sekarang berisi const s dan fungsi panah.
Apakah saya perlu mencari tahu modul mana yang perlu ditranspilasi dengan melihat bundel yang diperkecil? Itu payah, apakah ada cara yang lebih bisa didekati?

Ini membuat semuanya berhasil untuk saya:

https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment -483928457

agak menjengkelkan

Anda dapat mengikuti di bawah ini untuk menyelesaikan masalah Anda:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

Perbarui package.json dengan daftar browser di bawah ini agar berfungsi untuk IE:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "last 2 ie version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 2 ie version"
    ]
  },

Dengan cara ini Anda setidaknya akan membuatnya sesuai dengan kode Anda tanpa fungsi const & arrow , tetapi setelah itu saya terjebak dengan webpackHotDevClient mulai rusak & tidak mendapatkan petunjuk di konsol juga.

Saya telah mencoba banyak solusi untuk masalah ini.
tidak ada solusi yang tersedia yang berfungsi dalam pengembangan di IE11 atau edge.
Versi IE: 11.864.17763.0

Di bawah ini adalah file paket json saya.

{
"name": "typescript_tutorial",
"versi": "0.1.0",
"pribadi": benar,
"ketergantungan": {
"@ testing-library / jest-dom": "^ 4.2.4",
"@ testing-library / react": "^ 9.4.0",
"@ testing-library / user-event": "^ 7.2.1",
"@ types / jest": "^ 24.0.25",
"@ types / node": "^ 12.12.24",
"@ types / react": "^ 16.9.17",
"@ types / react-dom": "^ 16.9.4",
"react": "^ 16.12.0",
"react-app-polyfill": "^ 1.0.5",
"react-dom": "^ 16.12.0",
"react-scripts": "3.3.0",
"skrip ketikan": "^ 3.7.4"
},
"skrip": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"daftar browser": {
"produksi": [
"> 0,2%",
"tidak mati",
"bukan op_mini semua"
],
"pengembangan": [
"> 0,2%",
"tidak mati",
"bukan op_mini semua",
"1 versi chrome terakhir",
"1 versi firefox terakhir",
"1 versi safari terakhir",
"2 versi terakhir"
]
},
"devDependencies": {
"eslint-config-airbnb": "^ 18.0.1",
"eslint-config-prettier": "^ 6.9.0",
"eslint-plugin-import": "^ 2.18.2",
"eslint-plugin-jsx-a11y": "^ 6.2.3",
"eslint-plugin-prettier": "^ 3.1.2",
"eslint-plugin-react": "^ 7.14.3",
"eslint-plugin-react-hooks": "^ 1.7.0",
"node-sass": "^ 4.13.0",
"lebih cantik": "^ 1.19.1"
}
}

Solusi saya untuk masalah ini adalah sebagai berikut (perhatikan bahwa di Windows Anda memerlukan \ pembatas di jalur, sedangkan di Linux / - ini diperhitungkan di regex):

razzle.config.js :

'use strict';

// The list was taken from
// https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment-483928457
// the regex is changed to work both on Windows and Linux
const ieRule = {
    test: /\.jsx?$/,
    include: new RegExp(
        `node_modules[/|\\\\](?=(${[
            'acorn-jsx',
            'estree-walker',
            'regexpu-core',
            'unicode-match-property-ecmascript',
            'unicode-match-property-value-ecmascript',
            'react-dev-utils',
            'ansi\-styles',
            'ansi-regex',
            'chalk',
            'strip-ansi'
        ].join('|')}))`
    ),
    use: {
        loader: "babel-loader",
        options: {
            presets: [["@babel/preset-env", { targets: { ie: 11 } }]]
        }
    }
};

module.exports = {
    modify: (config, { target, dev }, webpack) => {
        // full config https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfig.js

        config.module.rules.unshift(ieRule);

        return config;
    },
};

.babelrc :

{
  "presets": [
    [
      "razzle/babel",
      {
        "targets": {
          "browsers": [
            "ie 11",
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions"
          ]
        }
      }
    ]
  ]
}

Juga ada beberapa kesalahan tambahan di IE 11 seperti:

Kesalahan keamanan
Kesalahan yang Anda berikan tidak berisi pelacakan tumpukan.
SockJS tidak kompatibel! Situs utama menggunakan: "1.3.0", iframe: "1.4.0".

Ini diselesaikan dengan mengedit registri Windows seperti yang dikatakan di sini
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

Yaitu saya buat

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      Microsoft
         Internet Explorer
            Main
               FeatureControl
                  FEATURE_WEBSOCKET_MAXCONNECTIONSPERSERVER
                     iexplore.exe = (DWORD) 0x0000014 (20)

untuk meningkatkan jumlah websockets yang diizinkan per halaman. Setelah itu masalah lebih jarang muncul (cukup jarang untuk men-debug tanpa banyak ketidaknyamanan, tetapi ketika muncul lagi Anda perlu membuka tab lain dan menutup arus).

Saya akhirnya memiliki solusi setelah melihat ini selama beberapa hari

Saya harus mengubah klien untuk WebpackDevServer dari react-dev-utils / webpackHotDevClient ke alternatif webpack / hot / dev-server

Anda harus pergi ke file webpack.config.js Anda dan menukar baris ini:

isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),

dengan yang ini:

isEnvDevelopment && require.resolve('webpack/hot/dev-server'),

@ a1g0rithm ini bekerja untuk saya.

@ a1g0rithm di mana Anda menemukan webpack.config.js?

Solusi yang disediakan oleh @ a1g0rithm adalah satu-satunya solusi yang berfungsi untuk saya setelah memutakhirkan aplikasi CRA lama yang dikeluarkan dari webpack v2 ke v4. File webpack.dev.config berisi pesan ini:

entry: [
    // ...
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    require.resolve('react-dev-utils/webpackHotDevClient'),

Cukup hapus komentar pada dua require.resolve s pertama dan komentari yang terakhir:

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
// require.resolve('react-dev-utils/webpackHotDevClient'),

Saya pikir ini adalah impor buruk yang mengimpor webpack klien dalam pengembangan. Diperbaiki di v4