Create-react-app: لا تعمل التطبيقات ذات الإصدار 4.0.0 من "البرامج النصية التفاعلية" في IE11

تم إنشاؤها على ٢٥ أكتوبر ٢٠٢٠ · 18تعليقات · مصدر: facebook/create-react-app

وصف الخطأ

بعد ترقية تطبيقي من نصوص رد الفعل 3.4.4 إلى 4.0.0 ، أرى أن التطبيق لا يعمل في IE11 على الإطلاق.
بالإضافة إلى ذلك - عندما أنشأت تطبيقًا جديدًا من أحدث CRA ، أضفت react-app-polyfill أرى أنه أيضًا لا يعمل على الإطلاق.

يبدو package.json كما يلي:

{
  "name": "cra4",
  "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",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-app-polyfill": "2.0.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.3",
    "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"
    ],
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

يظهر الخطأ نفسه أيضًا عند تشغيل yarn build وتقديم الخدمة من دليل build/ .

هل حاولت استعادة تبعياتك؟

إنه سلوك CRA الافتراضي.

ما هي المصطلحات التي بحثت عنها في دليل المستخدم؟

هناك بعض المشكلات الشائعة الموثقة ، مثل عدم اكتشاف المراقب للتغييرات أو فشل الإنشاء. تم وصفها في قسم استكشاف الأخطاء وإصلاحها بدليل المستخدم: https://facebook.github.io/create-react-app/docs/troubleshooting يرجى فحص هذه الأقسام القليلة بحثًا عن المشكلات الشائعة. بالإضافة إلى ذلك ، يمكنك البحث في دليل المستخدم نفسه عن شيء تواجهك فيه مشكلات: https://facebook.github.io/create-react-app/ إذا لم تجد الحل ، فيرجى مشاركة الكلمات التي بحثت عنها . يساعدنا هذا في تحسين التوثيق للقراء المستقبليين الذين قد يواجهون نفس المشكلة.

(اكتب إجابتك هنا إذا كان ذلك مناسبًا).

بيئة

للمساعدة في تحديد ما إذا كانت المشكلة خاصة بالنظام الأساسي أو المستعرض أو إصدار الوحدة النمطية ، يلزم توفر معلومات حول بيئتك. يتيح ذلك للمشرفين إعادة إنتاج المشكلة بسرعة وتقديم الملاحظات. قم بتشغيل الأمر التالي في مجلد تطبيق React الخاص بك في Terminal. ملاحظة: يتم نسخ النتيجة إلى الحافظة الخاصة بك مباشرة. `npx create-react-app --info` الصق ناتج الأمر في القسم أدناه.

Environment Info:

  current version of create-react-app: 3.4.1
  running from C:\Users\XXX\AppData\Local\Yarn\Data\global\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
  Binaries:
    Node: 14.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.19041.423.0
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

خطوات التكاثر

إنشاء تطبيق CRA جديد باستخدام قالب مطبعي
yarn add react-app-polyfill
أضف import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; إلى أعلى index.tsx
yarn start
لاحظ أن هذا الموقع يعمل بشكل مثالي في المتصفحات العادية وأنه شاشة فارغة في IE

سلوك متوقع

كيف توقعت أن تتصرف الأداة؟ لا بأس إذا لم تكن متأكدًا من صحة فهمك. فقط اكتب ما كنت تعتقد أنه سيحدث.

يجب أن يعمل الموقع (لا أتوقع المعجزات. إنه متصفح IE بشكل عام ، لكن الصفحة الفارغة سيئة للغاية)

السلوك الفعلي

هل حدث خطأ ما؟ هل هناك شيء معطل أو لا يتصرف كما توقعت؟ يرجى إرفاق لقطات إذا أمكن! إنها مفيدة للغاية في تشخيص المشكلات.

نسخة تجريبية قابلة لإعادة الإنتاج

إذا كان بإمكانك ، يرجى مشاركة مشروع يعيد إظهار المشكلة. هذه هي الطريقة الأكثر فعالية لحل مشكلة قريبًا. هناك طريقتان للقيام بذلك: * إنشاء تطبيق جديد ومحاولة إعادة إظهار المشكلة فيه. يكون هذا مفيدًا إذا كنت تعرف مكان المشكلة تقريبًا ، أو لا يمكنك مشاركة الكود الحقيقي. * أو ، انسخ تطبيقك وقم بإزالة الأشياء حتى تترك مع الحد الأدنى من العرض التوضيحي القابل للتكرار. هذا مفيد للعثور على السبب الجذري. يمكنك بعد ذلك إنشاء مشروع جديد اختياريًا. يعد هذا دليلًا جيدًا لإنشاء عروض توضيحية للأخطاء: https://stackoverflow.com/help/mcve بمجرد الانتهاء ، ادفع المشروع إلى GitHub والصق الرابط أدناه:

(الصق الرابط إلى مثال مشروع وإرشادات دقيقة لإعادة إظهار المشكلة.)

ماذا يحدث إذا تخطيت هذه الخطوة؟ سنحاول مساعدتك ، لكن في كثير من الحالات يكون ذلك مستحيلًا لأن المعلومات المهمة مفقودة. في هذه الحالة ، سنضع علامة على مشكلة على أنها ذات أولوية منخفضة ، ونغلقها في النهاية إذا لم يكن هناك اتجاه واضح. ما زلنا نقدر التقرير ، لأن شخصًا آخر في النهاية قد يخلق مثالًا قابلًا للتكرار له. شكرا لمساعدتنا على مساعدتك!

bug report needs triage

مصدر

yhnavein

👍12

التعليق الأكثر فائدة

+ ، نفس المشكلة المتعلقة ببناء الإنتاج
https://reactjs.org/docs/error-decoder.html/؟invariant=31&args [] = الكائن٪ 20with٪ 20keys٪ 20٪ 7B٪ 24٪ 24typeof٪ 2C٪ 20type٪ 2C٪ 20key٪ 2C٪ 20ref٪ 2C ٪ 20props٪ 2C٪ 20_owner٪ 7D

e965 في ٢٦ أكتوبر ٢٠٢٠

👍7

ال 18 كومينتر

إذا لم أكن مخطئًا ، فلن يعمل مشروع جديد على IE على الإطلاق في وضع التطوير بسبب تكوين browserslist .

(انظر package.json ).

Pierre-Do في ٢٥ أكتوبر ٢٠٢٠

@ بيير دو
نعم ، لقد قمت بتحديث مشكلتي بالمعلومات المفقودة.
لقد نسيت أن IE11 غير مدعوم خارج الصندوق ، ولكن مع react-app-polyfill لا يعمل كذلك :(

yhnavein في ٢٥ أكتوبر ٢٠٢٠

👍3

e965 في ٢٦ أكتوبر ٢٠٢٠

👍7

الحل الخاص بي:

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

ezBill في ٢٧ أكتوبر ٢٠٢٠

👍4 ❤1

أنا أيضًا متأثر بهذه المشكلة

Vazerthon في ٢٧ أكتوبر ٢٠٢٠

أستطيع أن أؤكد أن حل ezBill يناسبني.
ربما يحتاج react-app-polyfill إلى الإصلاح؟

yhnavein في ٢٧ أكتوبر ٢٠٢٠

👍2

أستطيع أن أؤكد أن حل ezBill يناسبني.

Vazerthon في ٢٧ أكتوبر ٢٠٢٠

الحل لا يعمل بالنسبة لي ، يبقى الخطأ.

jugglingthebits في ٢٩ أكتوبر ٢٠٢٠

👍4

تبدو polyfills الخاصة بي بهذا الشكل وليس لدي مشكلة مع IE11:

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

لاحظ أن هذه يجب أن تأتي فوق أي واردات أخرى من شأنها أن تنكسر بدون هذه البوليفيل في مكانها. بالإضافة إلى أن polyfill لا يوفر بعض واجهات برمجة التطبيقات الباطنية مثل TextEncoder لذلك ستظل بحاجة إلى تحميل polyfill لأولئك إذا كنت بحاجة إليها لسبب ما.

pluma في ٣٠ أكتوبر ٢٠٢٠

أعتقد أن تحويل jsx الجديد هو سبب ذلك ، فحاول تعطيله إما عن طريق إضافة /** <strong i="5">@jsxRuntime</strong> classic */ إلى أعلى index.js الرئيسي حيث تقوم أيضًا باستيراد polyfills - أو تعيين متغير بيئي DISABLE_NEW_JSX_TRANSFORM=true . في حالتي أي من هؤلاء يصلح هذا.

أعتقد أنه من خلال استيراد polyfills أولاً ، يمكنك تحميلها قبل الرد ، لكن لا يمكنك تحميلها قبل السطر import {jsx as _jsx} from 'react/jsx-runtime'; الذي يدرجه المترجم.

msbarry في ٣٠ أكتوبر ٢٠٢٠

👍3 🎉1

msbarry يمكنني أن أؤكد أن هذا يعمل على إصلاح المشكلة هنا. شكرا للمساعدة!

jugglingthebits في ٣٠ أكتوبر ٢٠٢٠

واجهنا نفس هذه المشكلة. لقد قمنا بالفعل بتحويل الكثير من قاعدة الأكواد الخاصة بنا إلى تنسيق JSX الجديد (التنسيق الذي لا تحتاج فيه إلى استيراد React بعد الآن).

أخبار جيدة! تمكنا من الحفاظ على بنية JSX الجديدة بالكامل!

كان علينا فقط تطبيق هذا على الجزء العلوي من ملف 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'

تمت إضافة التعليق لأنه بخلاف ذلك يمكننا أن نرى أن هذا شيء لن يفهمه الناس ومن المحتمل أن يتركه معلقًا في قاعدة البيانات إلى الأبد.

الجانب السلبي الوحيد هو أننا لا نجعل هز الأشجار يقلل من حجم الحزمة لدينا والذي كان أحد الأسباب الرئيسية التي دفعتنا إلى الترقية إلى React 17 في المقام الأول :(

Dan503 في ٣ نوفمبر ٢٠٢٠

👍3 😕1

FWIW قمنا بتقسيم الملف index.ts إلى ملف init.ts و main.tsx حيث يستورد init.ts كل polyfills ذات الصلة و main.tsx هو نقطة الدخول الفعلية ( يحتوي على كود React) و index.ts يستورد كلاهما بالتسلسل. يضمن ذلك تحميل أي وحدات قد تحتاج إلى أن تكون polyfills سارية المفعول بعد تحميل polyfills وتضمن التسمية أنه حتى عند استخدام الفرز التلقائي للواردات ، فإن polyfills تأتي قبل نقطة الدخول الرئيسية.

قد يكون هذا حلاً عمليًا أكثر من الاضطرار إلى حل هذه المشكلة.

pluma في ٣ نوفمبر ٢٠٢٠

👍1

لا يبدو أن أيًا مما سبق يعمل.

IE11 مع أخطاء

النقر على الخطأ يقودنا إلى هنا

إصدار IE

إليك مثال بسيط للغاية لإعادة الإنتاج

npx create-react-app ie11app
yarn add react-app-polyfill
تحديث 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')
);

أضف ie 11 إلى browerslist في 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"
    ]
  }
}

yarn start

BerndWessels في ١١ نوفمبر ٢٠٢٠

👀1 👍1

حاول إزالة import 'react-app-polyfill/stable'; من index.js.

ما عليك سوى import 'react-app-polyfill/ie11'

Dan503 في ١١ نوفمبر ٢٠٢٠

هذا لا يبدو وكأنه مشكلة polyfill. الكود الذي تشاهده في مصحح الأخطاء ليس ES5 ، فهو يستخدم وسيطات التدمير والافتراضية ، وكلاهما مدعوم من IE11 حاول استخدام "ie >= 11" في browserslist بدلاً من "ie 11" . هذا ما لدي ، لست متأكدًا مما إذا كان يجب أن يعمل أي من النحو.

pluma في ١١ نوفمبر ٢٠٢٠

@ Dan503pluma حاولت على حد سواء، "ie >= 11" وإزالة import 'react-app-polyfill/stable'; ، ولكن الحظ لا يوجد حتى.

هل يمكنك أن تكون لطيفًا وأن تنشئ npx create-react-app ie11app جديدًا وتحقق مما إذا كان لا يزال يعمل بالفعل من أجلك على IE11؟

شكرا لك

تحديث:
العودة إلى "react-scripts": "^3.0.0" تعمل على IE 11 حتى مع "react": "^17.0.1",
لكن "react-scripts": "4.0.0" لا يزال مكسورًا بالنسبة لي

BerndWessels في ١١ نوفمبر ٢٠٢٠

👍3

لقد جربت أيضًا العديد من هذه الحلول. الشخص الوحيد الذي نجح هو إرجاع react-scripts إلى 3.4.4 .