Razzle: IE 11: webpackHotDevClient के साथ टूट गया।

मुझे लगता है कि मैं अब देख रहा हूं कि create-react-app IE 11 का समर्थन नहीं करता है या डिफ़ॉल्ट रूप से एक अलग पैकेज के साथ एक ऑप्ट-इन है । शायद यह सिर्फ एक प्रलेखन बात है? अगर ऐसा है तो मैं अपडेट करने की कोशिश करूंगा।

अब मुझे लगता है कि पॉलीफ़िल के बारे में

हालाँकि, मुझे नहीं लगता कि यह इस मुद्दे को हल करता है। ऐसा प्रतीत होता है कि कुछ इसी तरह सीआरए में ट्रैक किया जा रहा है: https://github.com/facebook/create-react-app/issues/5336। यह एक Map अपरिभाषित होने से संबंधित है, जो कि कुछ फिक्सेबल डब्ल्यू / एक पॉलीइल के रूप में समझ में आता है।

IE 9-11 का समर्थन करने के बारे में ये सभी बातें हालांकि पॉलीफ़िलिंग के बारे में हैं। मुझे नहीं लगता कि एक पॉलीफ़िल एक तीर फ़ंक्शन को ठीक कर सकता है। कोड अभी पुराने ब्राउज़रों के लिए ट्रांसप्लड नहीं किया गया है और मैं यह नहीं देखता कि निर्भरता को अपडेट किए बिना इसे कैसे ठीक किया जा सकता है।

यह ansi-regex , strip-ansi , कुछ मिस के साथ एक मुद्दा भी है। react-dev-utils में फ़ाइलें ( formatWebpackMessages.js ), और chalk आवश्यकता के अनुसार react-dev-utils । मैं प्रतिक्रिया-देव-बर्तनों से सुपर परिचित नहीं हूं, इसलिए मुझे यकीन नहीं है कि यह उनके साथ एक बग है या यदि यह सामान बस बंडल या क्या होना चाहिए नहीं है।

यहां आपको दो चीजें हल करनी हैं:

1. पॉलीफ़िल्स अब डिफ़ॉल्ट रूप से नहीं हैं (वही CRA2 के लिए जाता है)। पॉलीफ़िल्स प्रोमिस / मैप / सेट / सिंबल / ऑब्जेक्टिव / एरे.आईआर.रे / स्ट्रींग.स्टार्टसविथ / आदि से संबंधित मुद्दों को हल करेगा। विशिष्ट कोर-जेएस पॉलीफ़िल की आवश्यकता के लिए react-app-polyfill से लेकर इसे संभालने के लिए एक दर्जन तरीके हैं जो आपके विशिष्ट ऐप की आवश्यकता है; मुझे लगता है कि बबल खुद ही यह पता लगाने में मदद कर सकता है कि कौन सा कोर-जेएस आपके कोड की जरूरत को उचित कॉन्फिगर करता है (यहां कैच हो सकता है? मैं अनिश्चित हूं कि CRA2 इस रूट पर क्यों नहीं गया)।

2. कुछ पुस्तकालय लेखक अब अपने मॉड्यूल ( ansi-regex , react-dev-utils , आदि) के es5 संस्करण वितरित नहीं करते हैं। यदि आप IE11 को मोटे तीरों पर घुटते हुए देखते हैं, तो यह वह समस्या है जिसका आप सामना कर रहे हैं। CRA2 नोड_मॉड्यूल ( CRA2 में वेबपैक ) करके इसे हल करता है जबकि Razzle नहीं करता है। Razzle के साथ, आप या तो उन मॉड्यूल के पुराने संस्करणों का उपयोग कर सकते हैं _or_ वेब पैक को संशोधित करने के लिए Razzle के हुक का उपयोग करके उस विशिष्ट नोड_मॉड्यूल्स को सम्मिलित करें जिसे आप संकलित करना चाहते हैं ।

मुझे अभी भी IE 11 के लिए काम करने के लिए इसे बदलने की आवश्यकता नहीं है। यहां तक ​​कि मेरे पूरे उत्पादन बंडल में अब const s और तीर फ़ंक्शन हैं।
क्या मुझे यह पता लगाने की आवश्यकता है कि किन मॉड्यूलों को मिनिफ़ाइन्ड बंडल को देखकर ट्रांसप्लिंग करने की आवश्यकता है? यह चूसना होगा, वहाँ एक और अधिक तरीका है?

यह मेरे लिए काम करने वाली चीजें हैं:

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

थोड़े कष्टप्रद

आप अपनी समस्या को हल करने के लिए नीचे का अनुसरण कर सकते हैं:
https://create-react-app.dev/docs/supported-browsers-features/#supported-bbers

IE के लिए काम करने के लिए नीचे ब्राउज़र सूची के साथ package.json अपडेट करें:

"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"
    ]
  },

इस तरह से आप कम से कम इसे अपना कोड const & arrow फंक्शन के बिना कंप्लीट करवा लेंगे, लेकिन कैच यह है कि मैं webpackHotDevClient के साथ फंस गया हूं और कंसोल में भी कोई सुराग नहीं मिल रहा है।

मैंने इस मुद्दे के आसपास कई समाधानों की कोशिश की है।
प्रदान किए गए समाधानों में से कोई भी IE11 या बढ़त में विकास में काम नहीं कर रहा है।
आईई संस्करण: 11.864.17763.0

नीचे मेरा पैकेज json फ़ाइल है।

{{
"नाम": "टाइपस्क्रिप्ट_टाइम्स",
"संस्करण": "0.1.0",
"निजी": सच,
"निर्भरता": {
"@ परीक्षण-पुस्तकालय / जेस्ट-डोम": "^ 4.2.4",
"@ परीक्षण-पुस्तकालय / प्रतिक्रिया": "^ 9.4.0",
"@ परीक्षण-पुस्तकालय / उपयोगकर्ता-घटना": "^ 7.2.1",
"@ प्रकार / कीट": "^ 24.0.25",
"@ प्रकार / नोड": "^ 12.12.24",
"@ प्रकार / प्रतिक्रिया": "^ 16.9.17",
"@ प्रकार / प्रतिक्रिया-डोम": "^ 16.9.4",
"प्रतिक्रिया": "^ 16.12.0",
"प्रतिक्रिया-ऐप-पॉलीफ़िल": "^ 1.0.5",
"प्रतिक्रिया-डोम": "^ 16.12.0",
"प्रतिक्रिया-स्क्रिप्ट": "3.3.0",
"टाइपस्क्रिप्ट": "^ 3.7.4"
},
"स्क्रिप्ट": {
"प्रारंभ": "प्रतिक्रिया-स्क्रिप्ट शुरू",
"बिल्ड": "रिएक्शन-स्क्रिप्ट बिल्ड",
"परीक्षण": "प्रतिक्रिया-स्क्रिप्ट परीक्षण",
"बेदखल": "प्रतिक्रिया-लिपियों बेदखल"
},
"एस्लिंटकॉन्फिग": {
"फैली हुई है": "प्रतिक्रिया-ऐप"
},
"ब्राउज़र सूची": {
"उत्पादन": [
"> 0.2%",
"मरा नहीं",
"सभी op_mini नहीं"
],
"विकास": [
"> 0.2%",
"मरा नहीं",
"सभी op_mini नहीं",
"अंतिम 1 क्रोम संस्करण",
"अंतिम 1 फ़ायरफ़ॉक्स संस्करण",
"अंतिम 1 सफारी संस्करण",
"अंतिम 2 अर्थात संस्करण"
]
},
"भक्ति"
"एस्लिंट-कॉन्फिग-एयरबीएनबी": "^ 18.0.1",
"एस्लिंट-कॉन्फिग-प्रीटीयर": "^ 6.9.0",
"एस्लिंट-प्लगइन-आयात": "^ 2.18.2",
"एस्लिन-प्लगइन-जेएक्सएक्स-ए 11 वाई": "^ 6.2.3",
"एस्लिन-प्लगइन-प्रीटीयर": "^ 3.1.2",
"एस्लिन-प्लगइन-रिएक्शन": "^ 7.14.3",
"एस्लिन-प्लगइन-रिएक्शन-हुक": "^ 1.7.0",
"नोड-एसएएस": "^ 4.13.0",
"प्रेटियर": "^ 1.19.1"
}
}

इस समस्या का मेरा समाधान निम्नलिखित था (ध्यान दें कि विंडोज पर आपको \ रास्तों में परिसीमन की आवश्यकता होती है, जबकि लिनक्स पर / - इसे 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"
          ]
        }
      }
    ]
  ]
}

IE 11 में कुछ अतिरिक्त त्रुटियां भी थीं, जैसे:

सुरक्षा त्रुटि
आपके द्वारा प्रदान की गई त्रुटि में स्टैक ट्रेस नहीं होता है।
असंगत SockJS! मुख्य साइट का उपयोग करता है: "1.3.0", आइफ्रेम: "1.4.0"।

जैसा कि यहां कहा गया है, विंडोज रजिस्ट्री को संपादित करके इन्हें हल किया गया
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

अर्थात् मैंने बनाया

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

प्रति पृष्ठ वेबसैट की अनुमत राशि बढ़ाने के लिए। उसके बाद मुद्दा कम बार दिखाई दिया (बहुत असुविधा के बिना डिबग करने के लिए शायद ही कभी पर्याप्त था, लेकिन जब यह फिर से प्रकट होता है तो आपको एक और टैब खोलने और वर्तमान को बंद करने की आवश्यकता होती है)।

मैं अंत में कुछ दिनों के लिए इसे देखने के बाद एक समाधान है

मुझे WebpackDevServer के लिए क्लाइंट को प्रतिक्रिया-देव-बर्तन / webpackHotDevClient से वेबपैक / हॉट / देव-सर्वर के विकल्प में बदलना पड़ा।

आपको अपने webpack.config.js फ़ाइल पर जाना होगा और इस लाइन को स्वैप करना होगा:

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

इसके साथ:

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

@ a1g0rithm यह मेरे लिए काम कर रहा है।

@ a1g0rithm आपको

@ A1g0rithm द्वारा प्रदान किया गया

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'),

बस पहले दो require.resolve s को अनसुना करें और अंतिम टिप्पणी करें:

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

मुझे लगता है कि यह एक बुरा आयात था जो ग्राहक में वेबपैक को आयात करता था। V4 में तय किया गया