Create-react-app: IE11 में `रिएक्ट-स्क्रिप्ट` v4.0.0 वाले ऐप काम नहीं करते हैं

को निर्मित 25 अक्तू॰ 2020 · 18टिप्पणियाँ · स्रोत: facebook/create-react-app

बग का वर्णन करें

मेरे ऐप को रिएक्शन-स्क्रिप्ट्स 3.4.4 से 4.0.0 तक अपग्रेड करने के बाद मैं देखता हूं कि आईई 11 में ऐप बिल्कुल काम नहीं करता है।
इसके अतिरिक्त - जब मैंने नवीनतम 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/troublesourcing कृपया सामान्य समस्याओं के लिए इन कुछ अनुभागों को स्कैन करें। इसके अतिरिक्त, आप कुछ के लिए समस्या होने पर उपयोगकर्ता गाइड स्वयं खोज सकते हैं: https://facebook.github.io/create-react-app/ यदि आपको समाधान नहीं मिला, तो कृपया उन शब्दों को साझा करें जिन्हें आपने खोजा था । यह हमें भविष्य के पाठकों के लिए प्रलेखन में सुधार करने में मदद करता है जो समान समस्या का सामना कर सकते हैं।

(प्रासंगिक होने पर यहां अपना उत्तर लिखें।)

वातावरण

यह समझने में मदद करने के लिए कि क्या कोई समस्या किसी प्लेटफ़ॉर्म, ब्राउज़र या मॉड्यूल संस्करण के लिए विशिष्ट है, आपके पर्यावरण के बारे में जानकारी आवश्यक है। यह अनुरक्षकों को समस्या को जल्दी से पुन: पेश करने और प्रतिक्रिया देने में सक्षम बनाता है। टर्मिनल में अपने रिएक्ट ऐप के फ़ोल्डर में निम्न कमांड चलाएँ। नोट: परिणाम सीधे आपके क्लिपबोर्ड पर कॉपी किया जाता है। `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

प्रजनन करने कि प्रक्रिया

उपयोग किए गए टाइपस्क्रिप्ट टेम्पलेट के साथ नया सीआरए ऐप बनाएं
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% 20C% 2C% 20ref% 2C% 2C % 20props% 2C% 20_owner% 7 दिन

e965 26 अक्तू॰ 2020

👍7

सभी 18 टिप्पणियाँ

यदि मैं गलत नहीं हूं, तो browserslist कॉन्फ़िगरेशन के कारण विकास मोड में IE पर एक नया प्रोजेक्ट काम नहीं करेगा।

( package.json )।

Pierre-Do 25 अक्तू॰ 2020

@ पियरे-करो
हां, मैंने लापता जानकारी के साथ अपना मुद्दा अपडेट किया।
मैं भूल गया कि IE11 बॉक्स से बाहर समर्थित नहीं है, लेकिन react-app-polyfill साथ भी काम नहीं कर रहा है :(

yhnavein 25 अक्तू॰ 2020

👍3

e965 26 अक्तू॰ 2020

👍7

मेरा समाधान:

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

ezBill 27 अक्तू॰ 2020

👍4 ❤1

मैं इस मुद्दे से भी प्रभावित हूं

Vazerthon 27 अक्तू॰ 2020

मैं पुष्टि कर सकता हूं कि @ezBill समाधान मेरे लिए काम करता है।
शायद react-app-polyfill तय होने की आवश्यकता है?

yhnavein 27 अक्तू॰ 2020

👍2

मैं पुष्टि कर सकता हूं कि @ezBill समाधान मेरे लिए काम करता है।

Vazerthon 27 अक्तू॰ 2020

मेरे लिए वर्कअराउंड काम नहीं कर रहा है, त्रुटि बनी हुई है।

jugglingthebits 29 अक्तू॰ 2020

👍4

मेरे पॉलीफ़िल इस तरह दिखते हैं और मुझे IE11 से कोई समस्या नहीं है:

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

ध्यान दें कि ये किसी भी अन्य आयात से ऊपर आना चाहिए जो इन पॉलीफ़िलों के बिना जगह में टूट जाएगा। इसके अलावा पॉलीफ़िल TextEncoder जैसे कुछ अधिक गूढ़ एपीआई प्रदान नहीं करता है,

pluma 30 अक्तू॰ 2020

मुझे लगता है कि नया jsx ट्रांस्फ़ॉर्म यह पैदा कर रहा है, इसे अपने मुख्य index.js के शीर्ष पर /** <strong i="5">@jsxRuntime</strong> classic */ जोड़कर या तो इसे अक्षम करने का प्रयास करें जहां आप अपने पॉलीफ़िल को आयात करते हैं - या DISABLE_NEW_JSX_TRANSFORM=true पर्यावरण चर सेट करते हैं। मेरे मामले में या तो वे इसे ठीक कर देते हैं।

मेरा अनुमान है कि पहले पॉलीफिल आयात करके आप उन्हें प्रतिक्रिया से पहले लोड करने के लिए प्राप्त कर सकते हैं, लेकिन आप उन्हें संकलक सम्मिलित करने वाले import {jsx as _jsx} from 'react/jsx-runtime'; लाइन से पहले लोड करने के लिए नहीं प्राप्त कर सकते हैं।

msbarry 30 अक्तू॰ 2020

👍3 🎉1

@msbarry मैं पुष्टि कर सकता हूं कि यह यहां समस्या को हल करता है। सहायता के लिए धनयवाद!

jugglingthebits 30 अक्तू॰ 2020

हम इसी मुद्दे पर भागे। हमने पहले ही अपने बहुत सारे कोड बेस को नए 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'

टिप्पणी को जोड़ा क्योंकि अन्यथा हम यह देख सकते थे कि कुछ लोग समझ नहीं पाएंगे और शायद कोडबेस में हमेशा के लिए लटक जाएंगे।

केवल नकारात्मक पक्ष यह है कि हमें अपने बंडल के आकार को कम करने के लिए पेड़ लगाने की जरूरत नहीं है, जो कि उन महत्वपूर्ण कारणों में से एक है जिन्हें हमने पहली बार रिएक्ट 17 में अपग्रेड किया था :(

Dan503 3 नव॰ 2020

👍3 😕1

FWIW हम index.ts फ़ाइल को init.ts और main.tsx फ़ाइल में विभाजित करते हैं, जहाँ init.ts सभी प्रासंगिक पॉलीफ़िल आयात करते हैं और main.tsx वास्तविक प्रविष्टि है ( रिएक्ट कोड) और index.ts केवल दोनों अनुक्रम में आयात करते हैं। यह किसी भी मॉड्यूल को सुनिश्चित करता है कि पॉलीफ़िल के बाद पॉलीफ़िल को लागू करने की आवश्यकता हो सकती है और पॉलीफ़िल के बाद लोड किया जाता है और नामकरण यह सुनिश्चित करता है कि आयात के स्वत: छँटाई का उपयोग करते समय भी पॉलीफ़िल मुख्य प्रवेश बिंदु से पहले आए।

यह इस मुद्दे के आसपास काम करने की तुलना में अधिक व्यावहारिक समाधान हो सकता है।

pluma 3 नव॰ 2020

👍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 11 नव॰ 2020

👀1 👍1

Index.js से import 'react-app-polyfill/stable'; निकालने का प्रयास करें।

आपको केवल import 'react-app-polyfill/ie11'

Dan503 11 नव॰ 2020

यह पॉलीफ़िल मुद्दे की तरह नहीं दिखता है। जिस कोड को आप डिबगर में देख रहे हैं वह ES5 नहीं है, यह विनाशकारी और डिफ़ॉल्ट तर्कों का उपयोग करता है, जिनमें से कोई भी IE11 द्वारा समर्थित नहीं है। उपयोग करने का प्रयास "ie >= 11" अपने में browserslist के बजाय "ie 11" । यह मेरे पास है, यकीन नहीं तो सिंटैक्स काम करना चाहिए।

pluma 11 नव॰ 2020

@ Dan503 @pluma मैंने दोनों की कोशिश की, "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" अभी भी मेरे लिए टूटा हुआ है