Razzle: IE 11: معطل مع webpackHotDevClient.

أعتقد أنني أرى الآن أن تطبيق create-reaction-app لا يدعم IE 11 أو أقل بعد الآن افتراضيًا ، ولكن هناك اشتراك مع حزمة منفصلة . ربما هذا مجرد شيء توثيق؟ إذا كان الأمر كذلك ، فسأحاول التحديث.

أرى الآن أنه تم تحديث المستندات حول polyfills للإصدار v3.

ومع ذلك ، لا أعتقد أن هذا يحل المشكلة. يبدو أنه يتم تتبع شيء مشابه في CRA: https://github.com/facebook/create-react-app/issues/5336. هذا المرتبط بكون Map غير معرّف ، والذي سيكون منطقيًا كشيء قابل للإصلاح مع polyfill.

كل هذه الأشياء حول دعم IE 9-11 تتعلق بالتعويض بالرغم من ذلك. لا أعتقد أن polyfill يمكنه إصلاح وظيفة السهم. لا يتم نقل الكود للمتصفحات القديمة ولا أرى كيف يمكن إصلاح ذلك دون تحديث التبعية نفسها.

هذه أيضًا مشكلة مع ansi-regex ، strip-ansi ، بعض المتفرقات. الملفات الموجودة في react-dev-utils (بما في ذلك formatWebpackMessages.js ) ، وملفات متنوعة chalk كما هو مطلوب بواسطة react-dev-utils . أنا لست على دراية تامة بالتفاعل مع dev-utils لذا لست متأكدًا مما إذا كان هذا خطأ معهم أو إذا لم يكن من المفترض أن تكون هذه الأشياء في الحزمة أو ماذا.

هناك شيئان عليك حلهما هنا:

1. لم تعد Polyfills موجودة بشكل افتراضي (ينطبق نفس الشيء على CRA2). ستحل Polyfills المشكلات المتعلقة بـ Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / إلخ. هناك عشرات الطرق للتعامل مع هذا تتراوح من react-app-polyfill إلى طلب polyfills core-js المحددة التي يحتاجها تطبيقك المحدد ؛ أعتقد أن Babel نفسها يمكن أن تساعد في معرفة أي حزمة Core-js polyf التي تحتاجها مع التكوين المناسب (قد يكون هناك مشكلة هنا؟ لست متأكدًا من سبب عدم اتباع CRA2 لهذا المسار).

2. لم يعد بعض مؤلفي المكتبات يوزعون إصدارات es5 من وحداتهم ( ansi-regex ، react-dev-utils ، إلخ ، إلخ). إذا رأيت IE11 يختنق بالسهام السمينة ، فهذه هي المشكلة التي تواجهها. يحل CRA2 هذا عن طريق تحويل node_modules ( webpack conf في CRA2 ) بينما لا يقوم Razzle بذلك. باستخدام Razzle ، يمكنك إما استخدام الإصدارات الأقدم من هذه الوحدات _أو_ استخدام خطافات Razzle لتعديل تكوين حزمة الويب لتضمين وحدات node_modules المحددة التي تريد تجميعها .

ما زلت لا أحصل على ما هو مطلوب للتغيير لجعله يعمل مع IE 11. حتى حزمة الإنتاج الخاصة بي تحتوي الآن على const s ووظائف الأسهم.
هل أحتاج إلى معرفة الوحدات التي تحتاج إلى التحويل من خلال النظر في الحزمة المصغرة؟ هذا سيء ، هل هناك طريقة أكثر ودودًا؟

هذا جعل الأشياء تعمل بالنسبة لي:

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

مزعج نوعا ما

يمكنك المتابعة أدناه لحل مشكلتك:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

قم بتحديث package.json بقائمة المستعرضات أدناه لتشغيلها مع 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"
    ]
  },

بهذه الطريقة ، ستحصل على الأقل على امتثال الشفرة الخاصة بك بدون وظيفة const & arrow ، ولكن بعد ذلك ، أصبحت عالقًا مع webpackHotDevClient يبدأ في الانهيار ولا أحصل على أي دليل في وحدة التحكم أيضًا.

لقد جربت العديد من الحلول حول هذه المشكلة.
لا يعمل أي من الحلول المقدمة في التطوير في IE11 أو Edge.
إصدار IE: 11.864.17763.0

يوجد أدناه ملف حزمة json الخاص بي.

{
"الاسم": "typescript_tutorial"،
"الإصدار": "0.1.0"،
"خاص": صحيح ،
"التبعيات": {
"@ testing-library / jest-dom": "^ 4.2.4"،
"@ testing-library / رد فعل": "^ 9.4.0"،
"@ testing-library / user-event": "^ 7.2.1"،
"@ types / jest": "^ 24.0.25"،
"@ types / node": "^ 12.12.24"،
"@ أنواع / رد فعل": "^ 16.9.17"،
"@ types / reaction-dom": "^ 16.9.4"،
"رد فعل": "^ 16.12.0" ،
"تفاعل-تطبيق-بوليفيل": "^ 1.0.5"،
"رد فعل دوم": "^ 16.12.0" ،
"نصوص تفاعلية": "3.3.0"،
"typecript": "^ 3.7.4"
} ،
"نصوص": {
"بدء": "بدء البرامج النصية للتفاعل" ،
"بناء": "بناء البرامج النصية التفاعلية" ،
"اختبار": "اختبار البرامج النصية للتفاعل" ،
"إخراج": "إخراج البرامج النصية التفاعلية"
} ،
"eslintConfig": {
"يمتد": "رد فعل التطبيق"
} ،
"قائمة المتصفحات": {
"إنتاج": [
"> 0.2٪" ،
"ليس ميت"،
"not op_mini all"
] ،
"تطوير": [
"> 0.2٪" ،
"ليس ميت"،
"not op_mini all" ،
"آخر إصدار كروم واحد"،
"آخر إصدار واحد من Firefox" ،
"آخر إصدار من رحلات السفاري"،
"الإصدار الثاني من ie"
]
} ،
"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"،
"أجمل": "^ 1.19.1"
}
}

كان حل هذه المشكلة كالتالي (لاحظ أنه في نظام التشغيل Windows تحتاج إلى محددات \ في المسارات ، بينما في Linux / - يتم أخذها في الاعتبار في 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" ، إطار iframe: "1.4.0".

تم حلها عن طريق تحرير سجل Windows كما هو مذكور هنا
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 من رد فعل dev-utils / webpackHotDevClient إلى بديل webpack / hot / dev-server

عليك أن تذهب إلى ملف webpack.config.js الخاص بك وتبديل هذا السطر:

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

مع هذا الشخص:

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

@ a1g0rithm هذا العمل بالنسبة لي.

@ a1g0rithm أين وجدت webpack.config.js؟

الحل المقدم من @ a1g0rithm هو نجح معي بعد ترقية تطبيق CRA قديم تم إخراجه من webpack v2 إلى v4. يحتوي ملف webpack.dev.config على هذه الرسالة:

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