तो सिर्फ स्पष्टीकरण के लिए: आप घटक को प्रस्तुत करने के लिए इस्तेमाल किए गए एक से अलग react मॉड्यूल से एक हुक (जैसे useState ) आयात कर रहे थे?

मैं मानता हूं कि यह भ्रमित करने वाला है। मुझे यकीन नहीं है कि अगर हमारे पास यह जानने का कोई तरीका है कि कोई अन्य प्रतिक्रिया मॉड्यूल प्रतिपादन कर रहा है या नहीं। AFAIK हम रिएक्ट को जितना संभव हो अलगाव में चलाने की कोशिश करते हैं ताकि कई रिएक्ट इंस्टेंस बिना मुद्दों के एक ही वैश्विक संदर्भ में काम कर सकें।

अन्यथा हम शायद त्रुटि संदेश को अपडेट कर सकते हैं और इस मामले का भी उल्लेख कर सकते हैं यदि यह बहुत भ्रमित नहीं है।

हां, मैंने React1 === React2 की तुलना की और यह false था (React1 index.js से है और React2 हुक का उपयोग करके फ़ाइल से है)। जब ऐसा होता है, तो ऊपर दिए गए सामान्य त्रुटि संदेश के साथ हुक विफल हो जाते हैं।

यह मुद्दा इस मामले के बारे में जागरूकता बढ़ाने और इसका सामना करने वाले लोगों की मदद करने के लिए किसी तरह से त्रुटि संदेश में सुधार करने के लिए है। हालांकि यह शायद बहुत बढ़त है।

हाँ, मैंने अपने द्वारा बनाए जा रहे पैकेज को npm लिंक करने का प्रयास किया। यह उसी त्रुटि को फेंकता है क्योंकि अन्य पैकेज भी हुक का उपयोग कर रहा है लेकिन अपने स्वयं के रिएक्ट के साथ। मुझे अपना पैकेज एनपीएम को प्रकाशित करना था और फिर इसे सीधे एनपीएम से आयात करना था। इस तरह त्रुटि समाप्त हो गई थी, लेकिन मुझे आशा है कि यह तय हो गया है क्योंकि बिना परीक्षण के पैकेज प्रकाशित करना खराब है, जाहिर है

Lerna monorepos भी इससे पीड़ित होते हैं जब एक कस्टम हुक को एक पैकेज में परिभाषित किया जाता है और दूसरे द्वारा उपयोग किया जाता है क्योंकि सिम्लिंक्ड निर्भरता प्रतिक्रिया की अपनी प्रति का उपयोग करती है।

मेरे पास इस समय npm-link-shared और एक prestart npm स्क्रिप्ट का उपयोग करके एक (हैकी) वर्कअराउंड है, जो अनिवार्य रूप से एक पैकेज की react निर्भरता को दूसरे के लिए एक सिमलिंक के साथ प्रतिस्थापित करता है, इसलिए वे इसका उपयोग करते हैं एक ही उदाहरण।

"prestart": "npm-link-shared ./node_modules/<other package>/node_modules . react"

मेरे पास एक ही समस्या थी और मैंने इसे जोड़कर हल किया:

 alias: {
        react: path.resolve('./node_modules/react')
      }

मेरे मुख्य ऐप के वेबपैक कॉन्फ़िगरेशन में resolve संपत्ति के लिए।

यह स्पष्ट रूप से प्रतिक्रिया की दो प्रतियों का उपयोग करने की मेरी गलती थी, लेकिन मैं मानता हूं कि यदि त्रुटि संदेश बेहतर होता तो यह बहुत अच्छा होता। मुझे लगता है कि यह शायद इसी तरह है: https://github.com/facebook/react/issues/2402

@mpeyper यह काम करता है। धन्यवाद

@apieceofbart जिसने मेरे लिए काम किया। सलाह के लिये धन्यवाद। मैं

जैसा कि मैं समझता हूं कि यह समस्या तब उत्पन्न होती है जब एक ही बंडल में रिएक्ट की कई प्रतियां होती हैं।

क्या यह भी एक समस्या है अगर रिएक्ट की अपनी प्रतियों के साथ दो अलग-अलग बंडल अलग-अलग डोम तत्वों पर अपने स्वयं के रिएक्ट अनुप्रयोगों को बूटस्ट्रैप कर रहे हैं, जैसा कि यहां वर्णित है: https://medium.jonasbandi.net/hosting-multiple-react-applications-on- वही-दस्तावेज़-c887df1a1fcd

मुझे लगता है कि उत्तरार्द्ध एक सामान्य "एकीकरण" पैटर्न है जो उदाहरण के लिए सिंगल-स्पा मेटा-फ्रेमवर्क (https://github.com/CanopyTax/single-spa) में उपयोग किया जाता है।

मुझे ठीक उसी प्रतिक्रिया संस्करणों के साथ भी यह समस्या हो रही है, npm-link का उपयोग करते समय अपने दम पर प्रकाशित होने वाले हुक को तोड़ा जाता है। वही अनुपयोगी hooks can only be called inside the body of a function component संदेश प्राप्त करना। @apieceofbart के उपनाम समाधान ने इसे मेरे लिए हल कर दिया। बहुत बहुत धन्यवाद!

यहां वही समस्या है जब मैं अपने मुख्य एप्लिकेशन के लिए npm link एक पैकेज करता हूं। मैं babel-plugin-module-resolver काम नहीं कर सका।
इसे कहते हैं:
Could not find module './node_module/react'
यह कष्टप्रद है क्योंकि यह मुझे अपने घटक को प्रकाशित करने से पहले स्थानीय रूप से परीक्षण करने से रोकता है।

मैंने "react": "^16.7.0-alpha.2" . में कैरेट हटाकर अपनी समस्या का समाधान किया
यहाँ पूरी टिप्पणी है: https://github.com/facebook/react/issues/14454#issuecomment -449585005

मैं यार्न का उपयोग कर रहा हूं, और मेरे package.json में संकल्प को मजबूर करके इसे ठीक किया है:

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

मेरा भी यही विचार है!!

बस यहां किसी के लिए एक नोट छोड़ना चाहता था, जिसे यह समस्या हो सकती है, उसी तरह से मैंने किया था।

हम react-rails रत्न के साथ रिएक्ट और रेल चला रहे हैं और घटकों को सीधे रेल दृश्य में प्रस्तुत कर रहे हैं। मुझे यह त्रुटि हर बार ऐप के एक नए संस्करण को धकेलने पर प्राप्त हो रही थी, क्योंकि टर्बोलिंक्स <head> से नए जेएस बंडल को हथिया रहा था जिसने रिएक्ट का एक अतिरिक्त उदाहरण लोड किया। समाधान यह था कि टर्बोलिंक एक पूर्ण पृष्ठ पुनः लोड करें जब यह पता चलता है कि बंडल बदल गया है: https://github.com/turbolinks/turbolinks#reloading -when-assets-change

ऐसा लगता है कि इसने हमारे लिए इसे हल कर दिया है।

मैं अंत में हुक को उत्पादन में लाने के लिए बहुत उत्साहित हूं, और हम सभी को बहुत-बहुत धन्यवाद देते हैं जिन्होंने इसे संभव बनाया। वे काम करने के लिए एक _ टन _ मज़ेदार हैं और उन्होंने मेरे कोड को छोटा और अधिक घोषणात्मक बना दिया है।

एक हेड अप के रूप में, यह समस्या अभी भी जारी किए गए संस्करण में उसी अनुपयोगी त्रुटि संदेश के साथ प्रासंगिक है "हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है।"

क्या यह कुछ ऐसा है जिसे ठीक किया जा सकता है? मुझे लगता है कि यह अधिक से अधिक प्रचलित हो सकता है क्योंकि अधिक देव नई सुविधाओं को लागू करना शुरू करते हैं, और एक स्पष्ट त्रुटि संदेश एक पूर्ण "फिक्स" के बदले एक लंबा सफर तय करेगा।

कड़ी मेहनत के लिए फिर से धन्यवाद और रिलीज पर बधाई! यह वास्तव में सुविधाओं का एक अद्भुत सेट है।

संपादित करें : खुले पीआर को करीब से देखना चाहिए था, बस # 14690 मिला जो इसे संबोधित करता है। धन्यवाद @threepointone!

@taylorham प्रतिबद्धता में लिंक अभी तक कुछ भी इंगित नहीं करता है। मैं इसके लिए प्रतीक्षा करूंगा, लेकिन यह एक ऐसा मुद्दा है जो मैं लिंक _( npm link )_ पैकेज में हुक का उपयोग करने के बाद से कर रहा हूं और प्रकाशन के बिना स्थानीय रूप से इसके साथ काम करना असंभव है।
कई मुद्दों को देखने के बाद, मैंने सोचा कि यह प्रतिक्रिया-हॉट-लोडर के साथ एक मुद्दा था जो कक्षाओं में घटकों को संकलित कर रहा था, लेकिन हुक समर्थन के साथ एक संस्करण जारी करने के बाद भी, यह अभी भी उसी तरह विफल रहता है।
मैंने कई अलग-अलग हैक्स की कोशिश की है लेकिन कोई भाग्य नहीं है। मुझे नहीं पता कि हर कोई अभी तक इस मुद्दे से क्यों नहीं जुड़ा है

@dotlouis हाँ, यह अभी तक एक अद्यतन त्रुटि संदेश है और यह समस्या अभी भी एक दर्द है।

केवल एक चीज जिसने मेरे लिए काम किया है, वह यह है कि मैं जो भी ऐप विकसित कर रहा हूं, वह "react": "link:../my-library/node_modules/react" का उपयोग करके लाइब्रेरी के रिएक्ट के उदाहरण पर निर्भर करता है।

• प्रस्तावित प्रस्तावों में से किसी ने भी मेरे लिए काम नहीं किया, और मैं पूरी कोशिश कर रहा हूं
• एक परियोजना कार्यान्वयन संदर्भ और बहुत सारे एचओसी पर स्थापित करने का प्रयास कर रहा है
• एक खाली परियोजना से शुरू करके चाल चली
• मैं कारण ढूंढ रहा हूं

[ठीक है] मेरे लिए, सुधार पैकेज के बारे में नहीं था। जेसन या अन्य डबल प्रतिक्रिया कारण: मेरे ऐप के शीर्ष पर मेरे पास वैश्विक थीम प्रदाता था, जो संदर्भ से आ रहा था। इसे "यूज कॉन्टेक्स्ट हुक" के साथ बदलना (इसे एक कार्यात्मक कंप के रूप में फिर से लिखना) एकमात्र समाधान प्रतीत होता है
शायद कोई समस्या है जब

<GoodOldContext iam={a class component}>
    <BrandNewHook>
             errors : Hooks can only be called inside the body of a function component #35
     </BrandnewHook>
</GooOldContext>
export withGoodOldContext.consumer(here component)

मैं एक घटक विकसित कर रहा हूं जहां example फ़ोल्डर है जो create-react-app का उपयोग करता है।

package.json में ऐसा करने से मेरे लिए यह समस्या हल हो गई:

{
    ...
    "dependencies": {
        "my-component": "link:..",
        "react": "link:../node_modules/react",
        "react-dom": "link:../node_modules/react-dom",
        "react-scripts": "2.1.3"
    },
    ...
}

@taylorham @DylanVann आपके इनपुट दोस्तों के लिए धन्यवाद। दुर्भाग्य से, यह अभी भी मेरे लिए काम नहीं करता है।
और मुझे आपके द्वारा उपयोग किए गए इस link: प्रोटोकॉल के बारे में कोई दस्तावेज नहीं मिला।
मूल रूप से, यह कहता है कि "प्रतिक्रिया-वसंत" (एक अन्य डीपी जो एक निर्भरता के रूप में प्रतिक्रिया का उपयोग करता है) react-dom नहीं ढूंढ सकता है। क्या आप कृपया मुझे "react": "link:../some/path" के बारे में कुछ दस्तावेज़ीकरण के बारे में बता सकते हैं?

मैं लिंक किए गए UI पैकेज का भी उपयोग कर रहा हूं और मैं इस समस्या को ठीक करने में सक्षम था।
आपको UI (लिंक किए गए पैकेज) से प्रतिक्रिया रेंडरटॉस्ट्रिंग निर्यात करने की आवश्यकता है।
मैंने लिंक किए गए पैकेज में रेंडर फ़ंक्शन बनाया है।

बेहतर संदर्भ के लिए - https://github.com/facebook/react/issues/14257

धन्यवाद @theKashey। @gaearon को लगता है कि यह सामान्य व्यवहार है। मुझे लगता है कि रिएक्ट को दो बार लोड नहीं किया जाना चाहिए, लेकिन फिर लिंक किए गए स्थानीय पैकेज के साथ काम करने का अनुशंसित तरीका क्या है?

मुझे Lerna कार्यस्थानों के ठीक से सिमलिंक होने की समस्याएँ भी थीं। यह वह तरकीब थी जिसका इस्तेमाल मैं इसे काम करने के लिए करता था। बाद में npm install चलाना सुनिश्चित करें।

"dependencies": {
    "react-dom": "file:../common/node_modules/react-dom",
    "react": "file:../common/node_modules/react"
}

इसे हल करने के कई तरीके हैं, और यार्न संकल्प आमतौर पर मदद नहीं करेंगे - यह "बिल्डिंग टूल" से अधिक संबंधित है

• वेबपैक के लिए aliases का उपयोग करें - बस "हार्ड" उर्फ ​​​​सब कुछ बतख जैसे react एक फ़ाइल में

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

• पार्सल के लिए समान उपनामों का उपयोग करें, लेकिन उन्हें package.json - https://parceljs.org/module_resolution.html#aliases में परिभाषित करें
• नोडज (नॉन जेस्ट) के लिए आप आवश्यकता नियंत्रण का उपयोग कर सकते हैं

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

• मजाक के लिए moduleNameMapper का उपयोग करें

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

@theKashey आपकी अंतर्दृष्टि के लिए धन्यवाद, यह समझ में आता है जब हम विचार करते हैं कि मॉड्यूल रिज़ॉल्यूशन कैसे किया जाता है (नीचे, फिर पेड़ ऊपर), लेकिन उपयोगकर्ता के दृष्टिकोण से मुझे यह बहुत व्यावहारिक नहीं लगता है। जब मैं एक पैकेज npm link करता हूं, तो मैं उम्मीद करता हूं कि यह निर्भरताओं को स्पष्ट रूप से फिर से तार किए बिना काम करेगा। यह स्थानीय रूप से एक पैकेज को विकसित करना काफी दर्दनाक बनाता है।

यह एक आधारशिला है, इस प्रकार node_modules काम करने के लिए डिज़ाइन किया गया है, यही कारण है कि आपके पास दो अलग-अलग प्रमुख संस्करणों में Button के दो संस्करण हो सकते हैं, और आश्रित मॉड्यूल आसानी से "सही" पाएंगे एक पैकेज का संस्करण।
इस तरह इसे हर समय काम करना चाहिए।

Node.js इंटर्नल काफी सीधे हैं - सभी ज्ञात उपसर्गों (जैसे node_modules ) या एक्सटेंशन (जैसे js , ts , json ) को जोड़कर एक फ़ाइल खोलने का प्रयास करें

yarn pnp ऐसा करेगा, और समस्या का समाधान कर सकता है। yarn workspaces , जो _hoist_ पैकेज को शीर्ष पर साझा कर सकता है - बिना किसी "जादू" के भी समस्या का समाधान करेगा।

npm workspaces ? अभी मौजूद नहीं है।

मैंने वास्तव में कार्यक्षेत्रों का उपयोग करने के लिए अपनी परियोजना को स्विच करना समाप्त कर दिया। यह संकल्पों का उपयोग किए बिना इसे हल करता है, और वैसे भी उत्थापन/संरचना फायदेमंद है।

यह एक हेडक्रैचर था। मैंने वेबपैक समाधान की कोशिश की। उपनाम सेटिंग लेकिन यह काम नहीं कर रहा था, कई सेटिंग्स भी कोशिश की लेकिन दुर्भाग्य से इसे काम करने के लिए वास्तव में कभी भी कामयाब नहीं हुआ, लेकिन यहां बताया गया है कि मैं अंततः इसे कैसे काम करने में कामयाब रहा:

यहाँ मेरी फ़ोल्डर संरचना है:

परियोजना
|
+-- नोड_मॉड्यूल
|
+-- निर्माण
| |
| +-- index.js
|
+-- उदाहरण (क्रिएट-रिएक्शन-ऐप)
| |
| +-- पैकेज.जेसन

मुझे उदाहरण फ़ोल्डर के अंदर अपने package.json को संशोधित करना पड़ा, अनिवार्य रूप से @jmlivingston के सुझाव के आधार पर परियोजना के 'मुख्य' नोड_मॉड्यूल्स से प्रतिक्रिया खींचना, यहां बताया गया है कि यह कैसे समाप्त होता है:

  "dependencies": {
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "2.1.5"
  },

अब उसके बाद मैं npm install भागा और फिर मैं npm link भागा , इसने चाल चली।

उम्मीद है कि यह किसी और की मदद कर सकता है और कुछ समय बचा सकता है।

तो इस मुद्दे का कोई समाधान? मैंने यहां जितनी हो सके उतनी सिफारिशों की कोशिश की है और कोई भाग्य नहीं है। मैं क्रिएट-रिएक्शन-ऐप और टाइपस्क्रिप्ट का उपयोग कर रहा हूं। रिएक्ट/रिएक्शन-डोम का उपयोग करना 16.8.3. यह एक नया प्रोजेक्ट है जिसे मैंने 2 दिन पहले बनाया था, बहुत सादा। मैं useSpring() और एनिमेटेड.div का उपयोग कर रहा हूँ। धन्यवाद

@ गुरु-फ्लोरिडा क्या आप किसी भी मौके से प्रतिक्रिया-राउटर का उपयोग कर रहे हैं?

मैं आपके समान स्टैक का उपयोग कर रहा हूं (टाइपस्क्रिप्ट और क्रिएट-रिएक्शन-ऐप) और मेरी समस्या render विशेषता के साथ। इसे component में बदलने से चाल चली।

पहले:

<Route path="/signup" render={SignUp} />

बाद में:

<Route path="/signup" component={SignUp} />

आशा है ये मदद करेगा..!

@mikeyyyyyy नहीं, इसमें रिएक्ट राउटर का उपयोग नहीं किया जा रहा है। टिप के लिए धन्यवाद हालांकि cuz मैं आखिरी परियोजना में था, मैंने वसंत का उपयोग करने की कोशिश की और एक ही समस्या थी।

मेरे पास एनपीएम लिंक (पार्सल ऐप में) के साथ यह समस्या थी, npm link .../whatever/node_modules/react इसे हल नहीं कर रहा है, हालांकि गैर-हुक घटकों के साथ ठीक काम करता है

@tj मुझे लगता है कि आपको ssr की समस्या है। लिंक किए गए पैकेज से प्रतिक्रिया कार्यों या संपूर्ण प्रतिक्रिया को निर्यात करने और इसे अपने सर्वर पैकेज में आयात करने के लिए तेज़ समाधान है

@ सीडेन आह मैं एसएसआर का उपयोग नहीं कर रहा हूं, सिर्फ एक एसपीए डब्ल्यू/पार्सल। मेरे पास अपनी सामग्री के लिए आंतरिक रूप से ui pkg है और एक ऐप जिस पर मैं काम कर रहा हूं, दोनों का एक ही react संस्करण है, अजीब लगता है कि एक डुप्लिकेट है लेकिन शायद यह एक पार्सल चिंता है

@tj ओह, मैं देखता हूँ। फिर इस बहुत ही अजीब मुद्दे के साथ शुभकामनाएँ। मैंने इसके साथ एक सप्ताह बिताया

तो इस मुद्दे का कोई समाधान?

यहां कोई समस्या नहीं है। जैसा कि इस पृष्ठ पर बताया गया है, रिएक्ट को useState() कॉल को उसी react ऑब्जेक्ट पर react ऑब्जेक्ट के रूप में "देखा" के रूप में react-dom के अंदर की आवश्यकता है। अगर आपके साथ ऐसा नहीं होता है, तो इसका मतलब है कि आप पेज पर रिएक्ट की दो प्रतियां बंडल कर रहे हैं - जो अपने आप में खराब है और हुक से पहले कुछ अन्य सुविधाओं को भी तोड़ देती है। तो आप इसे वैसे भी ठीक करना चाहेंगे। इस पृष्ठ में इसे ठीक करने के निदान के सामान्य तरीके हैं।

जब लोग इस समस्या का सामना करते हैं तो हम विशेष समाधान साझा करने के लिए इस चर्चा को खुला छोड़ रहे हैं। लेकिन यह कोई समस्या नहीं है जिसे आप के अलावा कोई भी "ठीक" कर सकता है।

मेरे पास npm लिंक (एक पार्सल ऐप में) के साथ यह समस्या थी, npm लिंक .../जो भी/नोड_मॉड्यूल्स/प्रतिक्रिया इसे हल करने के लिए प्रतीत नहीं होता है, हालांकि गैर-हुक घटकों के साथ ठीक काम करता है

क्या आपको एक छोटा रेप्रो केस बनाने में कोई आपत्ति है?

@gaearon करेंगे, अगले सप्ताह थोड़ा और खुदाई करने का समय होना चाहिए

खुशी की बात है, require-control ने yarn link + SSR + स्टाइल-घटकों 4 के स्थिर संदर्भ के साथ हमारे मुद्दे को ठीक कर दिया है। धन्यवाद @theKashey

मैंने यहां सब कुछ करने की कोशिश की और असफल रहा। यह वास्तव में कुछ अलग था जिसे यहां प्रलेखित नहीं किया गया था। यह प्रतिक्रिया आयात की केस संवेदनशीलता के साथ करना था । कुछ मामलों में हमारे पास था:

import React from 'react'

और दूसरों में:

import React from 'React'

कुछ फाइल सिस्टम (यूनिक्स, ओएसएक्स) पर यह वेबपैक को रिएक्ट की दो प्रतियों को तुरंत चालू करने का कारण बनता है।

इसने अत्यधिक भ्रम पैदा किया क्योंकि मैं स्पष्ट रूप से देख सकता था कि हमारे पास केवल प्रतिक्रिया की एक प्रति है; लेकिन इसके बजाय हम इसे आयात कर रहे थे।

प्रतिक्रिया प्रलेखन पर परीक्षण भी ठीक निकलता है क्योंकि यह स्पष्ट रूप से केवल निचले मामले का उपयोग करता है।

ऐसा लगता है कि यह डॉक्स में उल्लेख के योग्य हो सकता है?

मेरे लिए रिएक्ट के कई उदाहरणों का कारण वेबपैक DllPlugin था। मेरे विक्रेता डीएलएल के लिए मैंने अपनी प्रविष्टि सूची में react और react-dom शामिल नहीं किया, हालांकि, मेरे पास अन्य पुस्तकालय थे जिनके लिए react या react-dom की आवश्यकता थी इसलिए मेरे डीएलएल में react और react-dom शामिल हैं (मेनिफेस्ट जेसन फ़ाइल की त्वरित जांच इसे प्रकट कर सकती है)। इसलिए, जब मैं कोड चला रहा था, और एप्लिकेशन में रिएक्ट आयात कर रहा था, तो यह इसे node_modules से लोड कर रहा था, लेकिन विक्रेताओं के कोड में उनकी डीएलएल फ़ाइल से रिएक्ट की आवश्यकता थी।

कुल मिलाकर : डीएलएल फाइलों से सावधान रहें और सुनिश्चित करें कि आपके शामिल मॉड्यूल में अतिरिक्त निर्भरताएं शामिल नहीं हैं जिनकी आपको आवश्यकता नहीं है अन्यथा आप उन्हें दोगुना आयात करेंगे।

मैं react-hot-loader से 4.6.0 . को अपडेट करके इसे ठीक करने में सक्षम था

इसने पार्सल में npm link सामान के लिए चाल चली:

"alias": {
        "react": "../ui/node_modules/react",
        "react-dom": "../ui/node_modules/react-dom"
    }

सुनिश्चित नहीं है कि यह उत्पादन निर्माण के लिए उपयोग करने का प्रयास करेगा, यह हैकी की तरह लगता है लेकिन यह कम से कम विकास के लिए काम करता है

@theKashey OMG यार, यह काम करता है! मैंने कई अलग-अलग समाधानों की कोशिश की है जो लोग इस मुद्दे से संबंधित सुझाव देते हैं: package.json deps के साथ उलझन, परियोजना में "दो प्रतिक्रियाओं" का पता लगाना, यह जांचना कि क्या मैं * हुक का नियम तोड़ रहा हूं (जो मैं हूं नहीं), लेकिन मुझे लगता है कि इसके साथ आपका विकल्प :

alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

हमें अपने ऐप-ए-ए-लिब में हुक का उपयोग करके, हमारी परियोजना को अगले एलवीएल में ले जाने की अनुमति देता है।

यह परिणामी webpack.config.js है

npm ls react

रिटर्न

[email protected] D:\code\project
`-- (empty)

मेरे लिए

console.log(window.React1 === window.React2) सच लौटाता है
इस बिंदु पर मैं सोच रहा हूँ कि यह SSR समस्या पैदा कर रहा है

अद्यतन। यह वास्तव में रिएक्ट-अपोलो के एसएसआर व्यवहार के कारण हुआ था (https://github.com/apollographql/react-apollo/issues/2541)
2.3.1 में अपग्रेड करके इसे ठीक किया गया

नमस्कार दोस्तों, हमारी टीम इस समस्या का सामना कर रही है और इसे हल करने में कुछ दिन लगे।

हमारे लिए कार्य समाधान

समाधान ए: जैसा ऊपर बताया गया है, देखने के लिए पैकेज की स्थिति निर्दिष्ट करें

  alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

समाधान बी: ​​मॉड्यूल देखने के लिए सही नोड_मॉड्यूल फ़ोल्डर को प्राथमिकता देने के लिए वेबपैक संकल्प.मॉड्यूल का उपयोग करें

केस बैकग्राउंड और ऐसा क्यों होता है

सबसे पहले, यह प्रतिक्रिया की गलती नहीं है, यह लर्न की भी नहीं है, लेकिन प्रतिक्रिया, वेबपैक और एनपीएम-लिंक को कुछ जिम्मेदारियां लेने की आवश्यकता हो सकती है।

मामले की आवश्यकता:

-गैर मोनोरेपो:

• सिम्लिंक्ड पैकेज हैं
• सिम्लिंक्ड पैकेज ने हुक का उपयोग करके घटक निर्यात किया है
• प्रतिक्रिया क्लाइंट साइड पेज बनाना
  
  
  
  • अगर एक monorepo . पर काम कर रहे हैं
  
  
• पैकेज सिम्लिंक्ड
• पैकेजों को निर्भरता के विभिन्न संस्करण मिले (यहां तक ​​कि पैच संस्करण अंतर भी), इसलिए कार्यक्षेत्र भी हल हो जाएगा क्योंकि 2 प्रतिक्रिया स्थापित है
• प्रवेश पैकेज ने एक सिम्लिंक्ड पैकेज आयात किया जो हुक का उपयोग करता है

उदाहरण

संरचना

- mono repo root
  - packages
    - ComponentWithHooks (peerDependency: react@^16.8.1)
    - ProductA (dependency: ComponentWithHooks, dependency: react@^16.8.4)
    - ProductB (dependency: react@^16.8.1)

एक बार कार्यस्थानों के साथ बूटस्ट्रैप होने पर, यह हल हो जाएगा

- mono repo root
  - node_modules
    - react(16.8.1)
  - packages
    - ComponentWithHooks
      - node_modules (empty)
    - ProductA
      - node_modules
        - react(16.8.4)
    - ProductB
      - node_modules (empty)

और एक बार जब आप वेबपैक या शायद कुछ और के साथ ProductA की सेवा करते हैं, तो इसमें 2 प्रतिक्रिया उदाहरण होंगे।

ProductA में कोड, ProductA/node_modules/react की तलाश करेगा।

लेकिन आयातित ComponentWithHooks mono repo root/node_modules/react की तलाश करेगा।

क्यों? npm के लुकअप नियम याद रखें? यदि यह मॉड्यूल को अपने स्वयं के नोड_मॉड्यूल फ़ोल्डर में नहीं ढूंढ पाता है, तो यह माता-पिता के नोड_मॉड्यूल की तलाश करेगा ...

इसलिए वेबपैक जैसे टूल ने इस नियम को पूरी तरह से डिफ़ॉल्ट रूप से लागू किया।
मोनो रेपो समाधान लोकप्रिय होने में कुछ भी गलत नहीं है।
और सामान्य पैकेज इस पर ध्यान नहीं देगा क्योंकि उनमें से अधिकतर को प्रतिक्रिया और रेडक्स के रूप में एकल उदाहरण की आवश्यकता नहीं होती है।

मुझे यार्न वर्कस्पेस उदाहरण का उपयोग करके एक बहुत ही बुनियादी प्रजनन का उपयोग करके एक ही समस्या हो रही है - https://github.com/mwarger/yarn-workspace-hooks-repro

मेरे पास एक component-library है जो टाइपस्क्रिप्ट में लिखा गया है और पार्सल के साथ बंडल किया गया है। example-demo वह है जो इस component-library को प्रदर्शित करेगा और यह एक ताज़ा बनाया गया CRA ऐप है। सभी सामान्य पैकेज यार्न के साथ फहराए जाते हैं, इसलिए सिद्धांत रूप में प्रतिक्रिया का केवल एक संस्करण उपलब्ध होना चाहिए। हालांकि, मैं index.tsx में जो React.useEffect कॉल कर रहा हूं, वह उस त्रुटि का कारण बनता है जो मुझे इस GitHub मुद्दे की ओर ले जाता है।

एक हुक जोड़े जाने तक सब कुछ काम करता है। त्रुटि को पुन: उत्पन्न करने के लिए, component-library/src/index.tsx . में 7-9 पंक्तियों को असम्बद्ध करें

उम्मीद है कि मैं कुछ मूर्खतापूर्ण कर रहा हूं जिसे मैंने अनदेखा कर दिया है। कृपया किसी भी कदम के बारे में सलाह दें जिसका उपयोग मैं इसे आजमाने और इसका समाधान करने के लिए कर सकता हूं। शुक्रिया!

अनुवर्ती संपादन: नीचे सुझाई गई डीबग स्क्रिप्ट आउटपुट मेरे लिए true प्रिंट करती है। ऐसा प्रतीत होता है कि मेरे पास दो प्रतिक्रियाएँ नहीं हैं।

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

मुझे कई घंटे लग गए, इसलिए यहां एक नोट लेना उचित हो सकता है।

मेरे मामले में, मैंने HTML टेम्प्लेट के शीर्ष में <script defer src="./dist/bundle.js" /> की एक पंक्ति डाली है, जो रिएक्ट हुक का उपयोग न करने पर सामान्य रूप से काम करता है। सभी समाधान काम नहीं करते हैं और इस मामले में window.React1 == window.React2 चेक true लौटाता है।

चूंकि वेबपैक स्क्रिप्ट टैग को बाद में इंजेक्ट करेगा, टेम्पलेट में स्वयं स्क्रिप्ट टैग नहीं होना चाहिए। टेम्प्लेट से स्क्रिप्ट टैग को हटा दें, रिएक्ट को हुक के साथ फिर से कार्यात्मक बनाएं।

मेरे मामले में मेरे पास एक रिएक्ट ऐप है जो npm एक निर्भरता से जुड़ा हुआ था जिस पर मैं काम कर रहा था। यह तब तक काम करेगा जब तक कि मैं कुछ निर्भरताओं को ठीक नहीं कर सकता जिन्हें react और react-dom को देव और सहकर्मी डिपो में स्थानांतरित करने की आवश्यकता होती है।

1. ऐप से: cd node_modules/react && npm link
2. ऐप से: cd node_modules/react-dom && npm link react
3. लिंक किए गए पैकेज से: npm link react

यह क्यों काम करता है? त्रुटि चेतावनी पृष्ठ का उल्लेख है कि "हुक के काम करने के लिए, आपके एप्लिकेशन कोड से प्रतिक्रिया आयात को उसी मॉड्यूल को हल करने की आवश्यकता है जैसे प्रतिक्रिया-डोम पैकेज के अंदर से प्रतिक्रिया आयात"।

उपरोक्त सभी कोशिशों के बावजूद मुझे अभी भी यह समस्या हो रही है। मानक webpack4/babel कॉन्फ़िगरेशन, preset-env और preset-react प्लगइन्स के साथ। मेरे रिएक्ट/रिएक्शन-डोम संस्करणों को यार्न रिज़ॉल्यूशन का उपयोग करके 16.8.4 पर पिन किया गया है (जहां ऊपर से window.React1 === window.React2 चेक भी true लौटाता है)।

यह उपयोगों के सबसे बुनियादी पर है:

import React, { useState } from "react";

function MyComp() {
  const [hello] = useState(0);

  return <div>HELLO {hello}</div>;
}
export default MyComp;

क्या किसी के पास कोई दूसरा विचार है?

संपादित करें: स्पष्ट करने के लिए, त्रुटि को ओपी के अनुसार react.development.js:88 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. के रूप में दिखाया गया है

मेरे मामले में मेरे पास एक रिएक्ट ऐप है जो npm एक निर्भरता से जुड़ा हुआ था जिस पर मैं काम कर रहा था। यह तब तक काम करेगा जब तक कि मैं कुछ निर्भरताओं को ठीक नहीं कर सकता जिन्हें react और react-dom को देव और सहकर्मी डिपो में स्थानांतरित करने की आवश्यकता होती है।

1. ऐप से: cd node_modules/react && npm link
2. ऐप से: cd node_modules/react-dom && npm link react
3. लिंक किए गए पैकेज से: npm link react

यह क्यों काम करता है? त्रुटि चेतावनी पृष्ठ का उल्लेख है कि "हुक के काम करने के लिए, आपके एप्लिकेशन कोड से प्रतिक्रिया आयात को उसी मॉड्यूल को हल करने की आवश्यकता है जैसे प्रतिक्रिया-डोम पैकेज के अंदर से प्रतिक्रिया आयात"।

धन्यवाद! यह मेरे लिए बहुत अच्छा काम करता है। (यहां तक ​​​​कि जब मैं एनपीएम लिंक और सिम्लिंक मिश्रित स्थिति का उपयोग करता हूं)

मैंने ऊपर दिए गए सभी सुझावों का प्रयास किया है और अभी भी त्रुटि हो रही है।

@inverherive की थोड़ी सी मदद से हमने पाया कि enzyme-adapter-react-16 अभी भी समस्याएं पैदा कर रहा था।

जबकि हमने react-test-renderer को नवीनतम संस्करण (16.8.4) में अपडेट किया क्योंकि इसने हाल ही में हुक समर्थन जोड़ा है, हमने npm ls react-test-renderer के माध्यम से पाया कि enzyme-adapter-react-16 (1.11.2) का नवीनतम संस्करण ) की [email protected] की आंतरिक निर्भरता थी, जो हुक का समर्थन नहीं करती है।

├─┬ [email protected]
│ └── [email protected] 
└── [email protected]

इस समस्या को ठीक करने के लिए, साथ ही @chulanovskyi के सुधारों का पालन करने के लिए, जैसा कि हम यार्न का उपयोग कर रहे हैं, हमने अपने package.json में react-test-renderer संकल्प जोड़े। यह react-test-renderer के सभी संदर्भों को "16.8.4" का उपयोग करने के लिए बाध्य करता है।

  "resolutions": {
    "react-test-renderer": "16.8.4"
  },

यह बहुत निराशाजनक था, उम्मीद है कि यह किसी और की मदद कर सकता है। @chulanovskyi और @theKashey को भी उनके सुझावों के लिए धन्यवाद।

यह तब तक चाल चलेगा जब तक कि मैं कुछ निर्भरताओं को ठीक नहीं कर सकता जिन्हें प्रतिक्रिया और प्रतिक्रिया-डोम को देव और सहकर्मी डिपो में स्थानांतरित करने की आवश्यकता होती है।

@ajcrews (मैंने कुछ याद किया होगा लेकिन) मैं npm link में एक आंतरिक पुस्तकालय है और उस पुस्तकालय में react peerDependencies और devDependencies में है और मुझे अभी भी आपकी आवश्यकता है त्रुटि को हल करने की परवाह किए बिना ठीक करें। अच्छा खोज!

मैं पोस्ट करने वाला था लेकिन एक समाधान मिला

मेरे पास एक घटक पुस्तकालय है, विकास के लिए एक उदाहरण सीआरए ऐप के अंदर

CRA ऐप के package.json में मुझे मूल घटक के package.json से "उधार" लेने के लिए प्रतिक्रिया और प्रतिक्रिया-डोम को संशोधित करना पड़ा।

"dependencies": {
  "react": "link:../node_modules/react",
  "react-dom": "link:../node_modules/reac-dom",
}

यह बहुत निराशाजनक था, उम्मीद है कि यह किसी और की मदद कर सकता है। @chulanovskyi और @theKashey को भी उनके सुझावों के लिए धन्यवाद।

@ धान-हैमिल्टन इंस्टॉल के बाद हमेशा अपने लॉकफाइल की जांच करें। मुझे उसी मुद्दे का सामना करना पड़ा जहां yarn डुप्लिकेट कर रहा था react-test-renderer । अपने लॉकफाइल में थोड़ी सी सर्जरी से आप उन्हें ठीक कर सकते हैं:

yarn add -D react-test-renderer

-react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
+react-test-renderer@^16.0.0-0:
  version "16.8.4"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
  dependencies:
    object-assign "^4.1.1"
    prop-types "^15.6.2"
    react-is "^16.8.4"
    scheduler "^0.13.4"

+react-test-renderer@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"

एक yarn check आपको पहले ही चेतावनी दे देगा

$ yarn check
warning "enzyme-adapter-react-16#react-test-renderer@^16.0.0-0" could be deduped from "16.8.5" to "[email protected]"

फिर निम्नलिखित पैच को लागू करके इसे मैन्युअल रूप से घटाएं:

-react-test-renderer@^16.0.0-0:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
-  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.4"
-    scheduler "^0.13.4"
-
-react-test-renderer@^16.8.5:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.5:

अब आपके पास बिना किसी resolutions या webpack उर्फ ​​शीनिगन्स के react-test-renderer का एकल संस्करण है।

लिंक किए गए पैकेज और create-react-app से संबंधित किसी भी समस्या के लिए facebook/create-react-app#6207 का अनुसरण करें

इसे हल करने के कई तरीके हैं, और यार्न संकल्प आमतौर पर मदद नहीं करेंगे - यह "बिल्डिंग टूल" से अधिक संबंधित है

• वेबपैक के लिए aliases का उपयोग करें - बस "हार्ड" उर्फ ​​​​सब कुछ बतख जैसे react एक फ़ाइल में

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

• पार्सल के लिए समान उपनामों का उपयोग करें, लेकिन उन्हें package.json - https://parceljs.org/module_resolution.html#aliases में परिभाषित करें
• नोडज (नॉन जेस्ट) के लिए आप आवश्यकता नियंत्रण का उपयोग कर सकते हैं

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

• मजाक के लिए moduleNameMapper का उपयोग करें

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

यह मेरे लिए किया।

@ajcrews
शुक्रिया! मेरे लिए शानदार ढंग से काम करता है!

मैंने प्रतिक्रिया 16.8.6, इलेक्ट्रॉन-वेबपैक और आरएचएल का उपयोग करके न्यूनतम सेटअप के साथ थोड़ा परीक्षण केस बनाया। विशेष रूप से, जब यह त्रुटि होती है तो संपूर्ण ब्राउज़र (इस सेटअप में, इलेक्ट्रॉन) बस CPU समय के पूरे समूह का उपयोग करना शुरू कर देता है)

https://github.com/PerfectionCSGO/reeee

मैं इस समस्या पर 3 दिनों से अपना सिर काट रहा हूं। मूल रूप से मैंने सोचा था कि आरएचएल समस्या थी लेकिन इस परियोजना से इसे पूरी तरह से हटाने से समस्या का समाधान नहीं होगा।

npm ls प्रतिक्रिया केवल एक परिणाम देता है। मैंने सुनिश्चित किया है कि उपरोक्त फिक्स नवीनतम संस्करणों + वेबपैक उपनाम के साथ लागू किया गया है।

कोड सैंडबॉक्स में काम करेगा।

एक साधारण वेबपैक/वेबसाइट में कोड बिना किसी समस्या के काम करेगा। हालाँकि, इलेक्ट्रॉन-वेबपैक के साथ यह समस्या बनी रहती है।

  "dependencies": {
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "react": "^16.8.6",
    "react-dom": "npm:@hot-loader/react-dom",
    "react-hot-loader": "^4.8.2",
    "react-i18next": "^10.6.1",
    "source-map-support": "^0.5.11",
    "tslint": "^5.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.12",
    "@types/react-dom": "^16.8.3",
    "electron": "^4.1.3",
    "electron-builder": "20.39.0",
    "electron-webpack": "^2.6.2",
    "electron-webpack-ts": "^3.1.1",
    "typescript": "^3.4.1",
    "webpack": "^4.29.6"
  }

मुझे आशा है कि कोई मुझे एक सूचक दे ​​सकता है ...

जब मैं प्रतिक्रिया-l18next को mobx-react-lite से बदल देता हूं और पर्यवेक्षक का उपयोग करता हूं, तो यह वही प्रभाव पैदा करेगा।

मेरे मुद्दे के संबंध में, मैंने इसे इलेक्ट्रॉन-वेबपैक को कोहनी से हल किया है और अधिक 'शुद्ध' इलेक्ट्रॉन समाधान के साथ जाना है। मेरा अनुमान है कि यह वेबपैक या बेबेल में प्रयुक्त टूलचेन है जो असंगत है।

मुझे केवल उत्पादन में इस मुद्दे का सामना करना पड़ा। यहां प्रस्तावित समाधानों में से कोई भी मदद नहीं करता है।
मेरा उपयोग मामला एक तृतीय पक्ष ऐप था जो किसी अन्य वेबसाइट में विजेट के रूप में लोड होता है।
जब साइट पहली बार विजेट के साथ लोड हुई तो सभी ने अच्छा काम किया, लेकिन जब उपयोगकर्ता किसी भिन्न पृष्ठ पर नेविगेट करता है और विजेट के साथ पृष्ठ पर वापस आता है, तो मुझे हुक त्रुटि मिली।

ध्यान दें कि त्रुटि केवल तब होती है जब नेविगेशन के कारण पृष्ठ पुनः लोड नहीं होता है।

मैंने घंटों यह पता लगाने की कोशिश की कि मामला क्या है। अंत में समस्या कोड स्निपेट के साथ थी जो ऐप बंडल को लोड करता है। पृष्ठ परिवर्तन पर बंडल कई बार लोड हो सकता है, जिसके कारण मुझे एक ही नाम स्थान में एक से अधिक प्रतिक्रिया उदाहरणों का अनुमान है।

मैंने इसे जांच कर तय किया है कि स्क्रिप्ट पहले ही लोड हो चुकी है या नहीं।
सबसे पहले मैंने वेबपैक की 'लाइब्रेरी' कॉन्फ़िगरेशन का उपयोग करके अपनी लाइब्रेरी को वैश्विक नामस्थान में निर्यात किया:

output: {
    library: 'myLib',
    ...
}

और फिर लोडिंग स्क्रिप्ट में मैंने जाँच की कि पुस्तकालय मौजूद है या नहीं:

if(!window.myLib){
    var bz = document.createElement('script');
    bz.type = 'text/javascript'; 
    bz.async = true;
    bz.src = 'https://path/to/bundle.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(bz, s);
}

यह एक बहुत ही विशिष्ट उपयोग का मामला हो सकता है लेकिन मुझे आशा है कि यह किसी और की मदद कर सकता है।

तो हमारे पास वेबपैक का लाभ उठाने वाला एक मुख्य रिएक्ट एप्लिकेशन है।
हम एक छोटी प्रतिक्रिया पुस्तकालय बनाने की कोशिश कर रहे हैं जो हुक का उपयोग करती है, हमने बंडलर (पार्सल, शुद्ध बेबेल, वेबपैक) को स्वैप करने का प्रयास किया है।
अपने वेबपैक कार्यान्वयन का प्रयास करते समय, हमने प्रतिक्रिया और प्रतिक्रिया-डोम को बाहरी के रूप में चिह्नित किया, इसलिए हम उन्हें अपने बंडल में शामिल नहीं करेंगे।
एनपीएम लिंक का उपयोग करते समय हमें अभी भी वही हुक अपवाद मिलता है।

मुख्य एप्लिकेशन की प्रतिक्रिया के लिए एक सिमलिंक बनाना काम करता है, लेकिन यह एक महान देव वर्कफ़्लो नहीं है।

मुझे समस्या के मूल कारण का पता लगाने में मुश्किल हो रही है। डुप्लिकेट प्रतिक्रिया उदाहरण क्या उत्पन्न कर रहा है?

हाय @ एड्रिएन-ऑरेंज, आपको अधिक स्पष्टीकरण के लिए मेरी पोस्ट https://github.com/facebook/react/issues/13991#issuecomment -472740798 मिल सकती है।

npm लिंक के कारण बहु-आवृत्ति इसलिए है क्योंकि नोड डिफ़ॉल्ट रूप से मॉड्यूल के लिए मूल फ़ोल्डर के नोड_मॉड्यूल में दिखाई देगा यदि यह आपके पैकेज में नहीं मिल सकता है।

इसके लिए सबसे सरल और सबसे अच्छा समाधान हम आपके प्रवेश पैकेज के वेबपैक (या अन्य टूल) कॉन्फ़िगरेशन में पाते हैं, वेबपैक मॉड्यूल के लिए खोजे जाने वाले पथों के लिए मैन्युअल रूप से पथ और क्रम सेट करने के लिए resolve.modules जैसा कुछ है। Exp., resolve: { modules: [path.resolve(PACKAGE_ROOT, 'node_modules'), 'node_modules'] } , वेबपैक को पहले आपके प्रवेश पैकेज रूट के नोड_मॉड्यूल में मॉड्यूल खोजने के लिए बाध्य करेगा। यदि रूट में मॉड्यूल नहीं मिल रहा है, तो संबंधित नोड_मॉड्यूल फ़ोल्डर में खोजें...

तो हमारे पास वेबपैक का लाभ उठाने वाला एक मुख्य रिएक्ट एप्लिकेशन है।
हम एक छोटी प्रतिक्रिया पुस्तकालय बनाने की कोशिश कर रहे हैं जो हुक का उपयोग करती है, हमने बंडलर (पार्सल, शुद्ध बेबेल, वेबपैक) को स्वैप करने का प्रयास किया है।
अपने वेबपैक कार्यान्वयन का प्रयास करते समय, हमने प्रतिक्रिया और प्रतिक्रिया-डोम को बाहरी के रूप में चिह्नित किया, इसलिए हम उन्हें अपने बंडल में शामिल नहीं करेंगे।
एनपीएम लिंक का उपयोग करते समय हमें अभी भी वही हुक अपवाद मिलता है।

मुख्य एप्लिकेशन की प्रतिक्रिया के लिए एक सिमलिंक बनाना काम करता है, लेकिन यह एक महान देव वर्कफ़्लो नहीं है।

मुझे समस्या के मूल कारण का पता लगाने में मुश्किल हो रही है। डुप्लिकेट प्रतिक्रिया उदाहरण क्या उत्पन्न कर रहा है?

हाय मुझे यह त्रुटि मिल रही है

अपरिवर्तनीय उल्लंघन: अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। यह निम्न कारणों में से एक के कारण हो सकता है:
1. आपके पास रिएक्ट और रेंडरर के बेमेल संस्करण हो सकते हैं (जैसे रिएक्ट डोम)
2. आप कांटों के नियम तोड़ रहे होंगे
3. आपके पास एक ही ऐप में रिएक्ट की एक से अधिक कॉपी हो सकती हैं
डिबग करने और इस समस्या को ठीक करने के बारे में सुझावों के लिए https://fb.me/react-invalid-hook-call देखें।

   5 | 
   6 | const useApiHelper = (url, reducer) => {
>  7 |     const [state, dispatch] = useReducer(reducer, {});
     |                                                  ^
   8 | 
   9 |     useEffect(() => {
  10 |         fetch(url).then(res => res.json())

नमूना कोड https://stackblitz.com/edit/react-mbze9q

जब मैं इस फ़ंक्शन को परीक्षण मामलों के अंदर एक्सेस करने का प्रयास करता हूं तो मुझे त्रुटि से ऊपर मिल रहा है

@abhishekguru आप अपने परीक्षण में यहां एक घटक के बाहर हुक को बुला रहे हैं:

test('API test', async () => {
  const newState = useAPIHelper( // <- Called outside of a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  )
  console.log(newState, 'new');
  // expect(newState[samUrl].loading).toEqual(true);
});

जैसा कि त्रुटि बताती है, हुक को केवल दूसरे हुक से, या एक घटक के भीतर से ही बुलाया जा सकता है। आपके मामले में आप अपने परीक्षण के लिए एक घटक बना सकते हैं और उस घटक को प्रस्तुत कर सकते हैं जो यदि आप चाहें तो हुक का उपयोग करता है।

बेशर्म प्लग

@abhishekguru यदि आपके पास कई घटकों के बीच एक सामान्य हुक का उपयोग किया जाता है और आप इसे किसी विशेष घटक से स्वतंत्र रूप से परीक्षण करना चाहते हैं, तो आप react-hooks-testing-library का उपयोग करने पर विचार कर सकते हैं।

import { renderHook } from 'react-hooks-testing-library'

test('API test', async () => {
  const { result } = renderHook(() => useAPIHelper( // <- now called within a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  ))

  console.log(result.current, 'new');
  // expect(result.current[samUrl].loading).toEqual(true);
});

मैं यहां आना चाहता था क्योंकि हमारे पास केवल एसएसआर के साथ मुद्दे थे। हम फ़ाइल परिवर्तनों पर नोड के require.cache को साफ़ करते हैं। यह प्रभावी रूप से सर्वर पर हॉट रीलोडिंग देता है। समाशोधन नोड का require.cache उन पुस्तकालयों के साथ समस्याएँ पैदा करेगा जिनके लिए एक प्रति की आवश्यकता होती है। यहाँ हमारा समाधान है:

Object.keys(require.cache)
  .filter(key => !isSingleton(key)) // This is needed here because react cannot be deleted without causing errors
  .forEach(key => {
    delete require.cache[key]
  })

हमारे isSingleton फ़ंक्शन में उन पुस्तकालयों की सूची है जिनकी एक प्रति होनी चाहिए। अंगूठे का एक अच्छा नियम किसी भी पुस्तकालय है जिसे peerDependencies . में परिभाषित करने की आवश्यकता है

https://yarnpkg.com/lang/hi/docs/dependency-types/#toc -peerdependencies

भी एक ही मुद्दा था और मेरे लिए

window.React1 = require('react');
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // true

true भी लौटाया, दिए गए सभी सुझावों की कोशिश की लेकिन कुछ भी काम नहीं किया। अंत में यह पता चला कि:

वेबपैक bundle.js के साथ स्क्रिप्ट टैग को index.html में स्वचालित रूप से जोड़ता है। मेरी समस्या इसलिए थी क्योंकि मैं bundle.js को index.html में स्पष्ट रूप से जोड़ रहा था, जो हुक से पहले ठीक काम करता था।

मेरे लिए मुद्दा बेबेल 7 अपग्रेड के बाद था, एनपीएम एलएस रिएक्ट के साथ कोई अलग संस्करण नहीं था। निकाला जा रहा है
.babelrc से "react-hot-loader/babel" ने इस मुद्दे को अस्थायी रूप से ठीक कर दिया।

मैंने उपरोक्त सभी समाधानों की कोशिश की, लेकिन फिर भी त्रुटि मिली।
आखिरकार, मैंने पाया कि यह पैकेज why-did-you-update के कारण हुआ था, और इसके लिए एक संबंधित समस्या है। किसी के लिए बस एक सुराग एक समान पैकेज का उपयोग करता है जो प्रतिक्रिया को संशोधित करता है।

मैं इसे react-native + Yarn Workspaces परिदृश्य में ठीक करने में सक्षम था।

जड़ में package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/react-native",
      "**/react-native/!(react)/**"
    ]
  }
}

यह react-native कोड को फहराने से रोकता है (जैसा कि प्रतिक्रिया देशी के लिए आवश्यक है), जबकि अभी भी react फहराया जाता है, इस प्रकार सभी साझा मॉड्यूल एक ही प्रतिक्रिया का उपयोग करते हैं।

metro.config.js . में

module.exports = {
  watchFolders: [
    path.resolve(__dirname, '../', 'shared-module'), 
    // ...more modules
    path.resolve(__dirname, '../', '../') // to make sure the root `react` is also part of the haste module map
  ]
}

मेट्रो कॉन्फिगरेशन से बंडलर को पता चलता है कि सब कुछ कहां है।

मुझे उन लोगों के लिए समस्या को हल करने का एक तरीका मिला, जो उदाहरण के लिए स्थानीय रूप से npm पैकेज विकसित कर रहे हैं, और वे किसी प्रकार के उदाहरण ऐप में npm लिंक का उपयोग करके अपने पैकेज को लोड करके स्थानीय रूप से इसका परीक्षण करने का प्रयास कर रहे हैं।

मैंने उदाहरण ऐप (घटक के परीक्षण का मूल तरीका) से Storybook पर स्विच किया। प्रोजेक्ट में स्टोरीबुक का उपयोग करते समय यह रिएक्ट को दो बार लोड नहीं करेगा क्योंकि यह उसी का उपयोग करेगा जो घटक उपयोग कर रहा है। एनपीएम लिंक का उपयोग करते समय मुझे हुक और रिएक्ट के दो बार लोड होने में समस्या थी, साथ ही मैं काम करने के लिए उपरोक्त में से कोई भी समाधान प्राप्त करने में सक्षम नहीं था। तो स्टोरीबुक ने मेरी समस्या हल कर दी, और अब मेरे पास कई परिदृश्यों के माध्यम से अपने घटक का परीक्षण करने का एक तरीका है और साथ ही इसके लिए कुछ इंटरैक्टिव दस्तावेज़ीकरण भी बनाएं।

इसके साथ अपना अनुभव साझा करते हुए, बिल्ड से react और react-dom को बाहर करने के लिए कंपोनेंट लाइब्रेरी के लिए वेबपैक एक्सटर्नल का उपयोग करके इसे हमारे प्रोजेक्ट के लिए हल किया।

हम अभी रिएक्ट से शुरुआत कर रहे हैं। मेरे मामले में, हम न्यूट्रिनो घटकों पुस्तकालय पैकेज और न्यूट्रिनो वेबएप क्लाइंट पैकेज के साथ लर्ना मोनोरेपो से शुरू कर रहे हैं। वेबएप लिंक किए गए घटक पुस्तकालय के निर्माण उत्पाद का उपभोग करता है। कुछ प्रयोग करने और उसी प्रतिक्रिया उदाहरण के लिए true प्राप्त करने के बाद, मैंने घटक पुस्तकालय के निर्माण से react और react-dom को बाहर करने का एक तरीका देखा है।

यह वेबपैक घटक पुस्तकालयों के लिए एक सामान्य डिजाइन पैटर्न समाधान लगता है, इसलिए घटक पुस्तकालय में मैंने वेबपैक कॉन्फ़िगरेशन में जोड़ा है:

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

मुझे react और react-dom के लिए वेबएप पैकेज में वैश्विक स्क्रिप्ट टैग डालने की आवश्यकता नहीं थी। मैं अनुमान लगा रहा हूं कि वेबपैक घटक पुस्तकालय को अपने require कार्यान्वयन में प्रदान कर रहा है जैसा कि यह वेबएप को प्रदान करता है।

इस त्रुटि का एक अन्य कारण रिएक्ट राउटर के Route को गलत तरीके से कॉन्फ़िगर करना है,

यह विफल रहता है :

<Route render={MyHookedComponent}/>

, लेकिन यह सफल होता है:

<Route component={MyHookedComponent}/>

उदा. आपको component नहीं render का उपयोग करने की आवश्यकता है। यह एक आसान गलती है क्योंकि render आम तौर पर वर्ग आधारित घटकों के साथ ठीक काम करता है।

मैं बायोलरप्लेट पर काम कर रहा था और इसे npm पर प्रकाशित करना चाहता था, और npm लिंक की मदद से विकसित करना यह ठीक से काम कर रहा था लेकिन कुछ समय बाद त्रुटियाँ देना शुरू कर दिया Invalid Hook call warning ।
मैंने npm लिंक ../myapp/node_modules/react का उपयोग करने की कोशिश की, लेकिन यह मेरी समस्या का समाधान नहीं करता है,
और React1 === React2 की तुलना में यह सच है और साथ ही npm ls react भी किया है, यह केवल एक पैकेज दिखाता है।

और मैं वेबपैक का भी उपयोग नहीं कर रहा हूं, मैं सिर्फ क्रिएट-रिएक्शन-ऐप के बाहर कुछ परत जोड़ रहा हूं, इसलिए मैं अपने ऐप को स्थानीय स्थापित प्रतिक्रिया मॉड्यूल का उपयोग करने के लिए मजबूर नहीं कर सकता।
पिछले 3 दिनों से इसके साथ अटका हुआ है।_

@hnagarkoti के समान।

मैंने सर्वर साइड रेंडरिंग (एसएसआर) के दौरान इस चेतावनी का अनुभव किया क्योंकि मैं react-apollo के पुराने संस्करण का उपयोग कर रहा था, इसलिए इस मुद्दे में चलने वाली अगली गरीब आत्मा की सहायता के लिए इस लिंक को यहां छोड़ना चाहता था:

https://github.com/apolographql/react-apollo/issues/2541

संक्षेप में, getDataFromTree संस्करण [email protected] तक प्रतिक्रिया हुक का समर्थन नहीं करता है।

मेरे पास एक ही समस्या थी और मैंने इसे जोड़कर हल किया:

 alias: {
        react: path.resolve('./node_modules/react')
      }

मेरे मुख्य ऐप के वेबपैक कॉन्फ़िगरेशन में resolve संपत्ति के लिए।

यह स्पष्ट रूप से प्रतिक्रिया की दो प्रतियों का उपयोग करने की मेरी गलती थी, लेकिन मैं मानता हूं कि यदि त्रुटि संदेश बेहतर होता तो यह बहुत अच्छा होता। मुझे लगता है कि यह शायद इसी तरह है: #2402

create-react-app के साथ ऐसा करने के लिए कोई सुझाव?

^ ठीक है, क्रिएट-रिएक्शन-ऐप के लिए इसे हल करने के लिए मैं जिस समाधान के लिए गया था, वह है रिएक्ट-ऐप-रीवायर्ड और कस्टमाइज़-क्रा का उपयोग करना।

यहाँ मेरी config-overrides.js है:

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react')
    })
)

उदाहरण परियोजना: https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

हमारी टीम में हमारे पास दसियों ऐप्स में एक सार्वभौमिक नेविगेशन घटक काम है, ये सभी ऐप्स प्रतिक्रिया 15.0.0 से प्रतिक्रिया 16.8.0 तक आते हैं, हुक के ऊपर लागू नेविगेशन को सक्षम करने के लिए, हमें इसे नवीनतम प्रतिक्रिया के साथ बंडल करना होगा

इस मामले में, प्रतिक्रिया के कई उदाहरण हमारे लिए एक मूलभूत आवश्यकता है, मैं जानना चाहता हूं कि क्या प्रतिक्रिया आधिकारिक टीम भविष्य में इस मुद्दे को हल करने के लिए तैयार है?

@dwjohnston create-react-app के लिए मेरा कामकाज विकास के लिए एक वेबपैक कॉन्फ़िगरेशन बनाना था। create-react-app आंतरिक रूप से वेबपैक, वेबपैक-देव-सर्वर और बेबेल-लोडर का उपयोग करता है, इसलिए केवल विकास के लिए एक वेबपैक कॉन्फ़िगरेशन बनाना बहुत बुरा नहीं था क्योंकि निर्भरताएं पहले से ही निहित हैं लेकिन अभी भी प्राप्त करने के लिए एक अच्छी मात्रा में ओवरहेड है सही ढंग से काम कर रहा है।

मुझे create-react-app पर एक समस्या है: https://github.com/facebook/create-react-app/issues/6953 वेबपैक alias समर्थन या समान जोड़ने के लिए।

अगर कोई भी create-react-app का उपयोग कर रहा है और इस दर्द बिंदु का अनुभव कर रहा है, तो क्या आप कृपया उस मुद्दे पर ध्यान दे सकते हैं?

@ricokahler - इसे इंगित करने के लिए धन्यवाद। मुझे यह देखकर खुशी हो रही है कि मैं इस मुद्दे के साथ अकेला व्यक्ति नहीं हूं - मैंने इसे संदर्भ के साथ भी देखा है।

क्या कोई संसाधन है जिसके बारे में आप जानते हैं कि इस मुद्दे पर आगे चर्चा करें?

यदि आप मेरी नाव में हैं, तो आपने स्थानीय निर्देशिका से एक प्रतिक्रिया घटक पैकेज जोड़ा है, और अब यह स्वचालित रूप से नोड_मॉड्यूल्स की अपनी प्रति के साथ इसे बनाता और स्थापित करता है (क्योंकि यह ऐसा करने के लिए npm लिंक का उपयोग करता है), आपको दे रहा है ऐप 2 प्रतियां या अभी प्रतिक्रिया दें।

मैंने node_modules/ को हटाकर इसके आसपास काम किया है/node_modules ऐप चलाने से पहले। इसे स्वचालित रूप से करने के लिए:

"prestart": "rimraf ./node_modules/<my_package>/node_modules"

एसएसआर करते समय मुझे भी इसका सामना करना पड़ा।
यदि आप स्थानीय रूप से अपने रिएक्ट पुस्तकालय का परीक्षण करने के लिए लर्न का उपयोग करते हैं, तो आप अपने पुस्तकालय पर सहकर्मी निर्भरता के रूप में "प्रतिक्रिया/प्रतिक्रिया-डोम/प्रतिक्रिया-राउटर" जोड़ सकते हैं, लेकिन आपको उन्हें देव निर्भरता के रूप में नहीं जोड़ना चाहिए । (यह इसे डुप्लिकेट बनाता है)
आप node --preserve-symlinks का उपयोग कर सकते हैं ताकि यह मूल रेपो को देख सके जो सहकर्मी निर्भरता स्थापित करता है।
जेस्ट के लिए, आपको "jest.moduleDirectories" विकल्प में पैरेंट रेपो पथ जोड़ने की आवश्यकता है ताकि जेस्ट उन्हें हल कर सके

@apieceofbart यह मेरे लिए काम करता है, thx!

बाहरी प्रतिक्रिया घटकों को लोड करते समय मैं इस त्रुटि में भाग गया, उदाहरण के लिए जेएस मॉड्यूल के साथ। वे पूरी तरह से परियोजना से बाहर हैं, गतिशील आयात() (अधिक समर्थन के लिए अच्छी तरह से जेसनपी) से भरे हुए हैं। समस्या को हल करने के लिए, हम प्रत्येक मॉड्यूल के लिए एक संपत्ति के रूप में प्रतिक्रिया को पास/इंजेक्ट करते हैं। यह काम करता है, लेकिन फिर प्रत्येक मॉड्यूल युक्त रिएक्ट ऐप पर निर्भर होता है। हम निर्भरता को दूर करने का प्रयास कर रहे हैं।

जैसा कि अन्य ने उल्लेख किया है, यह संपत्ति किसी भी प्रकार के माइक्रो फ्रंट एंड के लिए प्रयोग करने योग्य प्रतिक्रिया को समाप्त कर देती है। मुद्दा यह है कि एक पुस्तकालय के रूप में उपयोग करने के लिए प्रतिक्रिया आयात करते समय जेएस रनटाइम में वैश्विक स्थिति बनाने का यह दुष्प्रभाव है।

मैं समझता हूं कि साधारण उपयोग के मामलों के लिए, उस दुष्प्रभाव के होने का अर्थ है कि प्रतिक्रिया "उपयोग में आसान" है। लेकिन जब एक वेब पेज कई बंडल चरणों से कई स्क्रिप्ट से बना होता है, तो उनमें से एक को रिएक्ट सेट करने में सक्षम होना चाहिए (उस साइड इफेक्ट को स्पष्ट रूप से करें) और अन्य केवल लाइब्रेरी फ़ंक्शन को कॉल कर सकते हैं।

मुझे अभी भी प्रतिक्रिया-बूटस्ट्रैप के साथ कोई समस्या है: # https://github.com/react-bootstrap/react-bootstrap/issues/3965

किसी और के लिए रिएक्ट के लिए एक लिब बनाने की कोशिश में फंस गया, कोशिश करें https://github.com/whitecolor/yalc यह सिम्लिंक की तुलना में बहुत बेहतर काम करता है।

@mpeyper अच्छा काम करता है। धन्यवाद

@apieceofbart जिसने मेरे लिए काम किया। सलाह के लिये धन्यवाद। मैं

मेरे लिए यह समस्या तब हुई जब मैंने पावरशेल में अपनी प्रोजेक्ट निर्देशिका में नेविगेट किया और पथ में निर्देशिका नाम को कैपिटल नहीं किया। मैंने उपयोगकर्ताओं/…/… के बजाय उपयोगकर्ता/…/… में प्रोजेक्ट बनाया है
जब मैंने पूंजीकरण त्रुटियों को ठीक किया और परियोजना को फिर से बनाया तो समस्या हल हो गई।

मेरे लिए, कर:

    "react": "file:../my-library/node_modules/react",
    "react-dom": "file:../my-library/node_modules/react-dom",

इसमें से अधिकांश को ठीक किया गया लेकिन पर्याप्त नहीं था, मुझे त्रुटि मिलती रही hooks can only be called inside the body of a function component ।

यह पता चला क्योंकि मेरे पुस्तकालय के कुछ घटक जहां निर्यात किए गए थे:

export default Radium(withTranslation()(MyComponent))

:एक्स:

जहां withTranslation रिएक्ट-i18next से एचओसी है और रेडियम से Radium एचओसी है।

और उन्हें इस तरह निर्यात करना:

export default withTranslation()(Radium(MyComponent))

:भारी_चेक_चिह्न:
सब कुछ ठीक कर दिया।

ध्यान दें कि प्रतिक्रिया-i18next संस्करण 10 में था जो रिएक्ट हुक का उपयोग करता है

@mikeaustin हम एक ही समस्या कर रहे हैं। क्या आपके पास "प्रत्येक मॉड्यूल के लिए एक संपत्ति के रूप में प्रतिक्रिया पारित/इंजेक्शन" का कोई उदाहरण है?

अभी भी यह समस्या हो रही है, सभी चरणों का प्रयास किया:

• यार्न कार्यक्षेत्र (लर्न के माध्यम से)
• जाँच की गई कि क्या एक प्रतिक्रिया डीपी है, हाँ

कुछ चीजें जिनका प्रभाव हो सकता है:

• पुस्तकालय लक्ष्य के साथ वेबपैक का उपयोग करना
• टाइपस्क्रिप्ट का उपयोग करना

$ npm ls react-dom
/xxx
└── [email protected]

$ npm ls react
/xxx
└── [email protected]

रूट पैकेज.json

{
  ...
  "workspaces": [
    "packages/*",
  ],
  "devDependencies": {
    ...
  },
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "resolutions": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "**/react": "16.8.6",
    "**/react-dom": "16.8.6"
  }
}

@JeremyGrieshop मेरे पास एक ही मुद्दा था और यह मेरे लिए काम करता था, धन्यवाद।

अपने package.json में "prestart" को नीचे की तरह जोड़ें:

"scripts": {
    "prestart": "rimraf ./node_modules/<my package>/node_modules",
    "start": "react-scripts start",
    "build": "react-scripts build",
  },

मेरे पास यह मुद्दा था और यह प्रतिक्रिया/प्रतिक्रिया-डोम के कई संस्करणों के कारण नहीं था
मेरे द्वारा उपयोग किए जाने वाले कस्टम टूलिंग में, कैश की आवश्यकता को साफ़ किया जा रहा था (इस चर्चा के बाहर एक उद्देश्य के लिए), उदाहरण के लिए:

Object.keys(require.cache).forEach((key) => {
      delete require.cache[key];
    });

तो वहां के लोगों के लिए, अगर आप ऐसा कुछ कर रहे हैं - यह रिएक्ट हुक को प्रभावित करेगा, इसलिए यदि आप कर सकते हैं तो इससे बचें

मेरे पास एक ही समस्या थी और मैंने इसे जोड़कर हल किया:

 alias: {
        react: path.resolve('./node_modules/react')
      }

मेरे मुख्य ऐप के वेबपैक कॉन्फ़िगरेशन में resolve संपत्ति के लिए।

यह स्पष्ट रूप से प्रतिक्रिया की दो प्रतियों का उपयोग करने की मेरी गलती थी, लेकिन मैं मानता हूं कि यदि त्रुटि संदेश बेहतर होता तो यह बहुत अच्छा होता। मुझे लगता है कि यह शायद इसी तरह है: #2402

पार्सल का उपयोग करने वाले किसी भी व्यक्ति के लिए, यदि dist वह जगह है जहां आपकी संकलित फ़ाइलें हैं, तो आपको जोड़ना चाहिए:

  "alias": {
    "react-mediator": "./dist"
  },

आपके package.json और फिर भी आप स्थानीय विकास/परीक्षण के लिए link (एनपीएम या यार्न) पुस्तकालय कर सकते हैं।

@mikeaustin हम एक ही समस्या कर रहे हैं। क्या आपके पास "प्रत्येक मॉड्यूल के लिए एक संपत्ति के रूप में प्रतिक्रिया पारित/इंजेक्शन" का कोई उदाहरण है?

आप "रिएक्ट" को पास करने के लिए रिएक्ट कॉन्टेक्स्ट का उपयोग कर सकते हैं, और प्रत्येक घटक में संपत्ति को इंजेक्ट करने के लिए एक एचओसी बना सकते हैं। आप एपीआई जैसे एपीआई में कुछ भी पास कर सकते हैं। प्रतिक्रिया करें, लेकिन उन घटकों के आसपास एचओसी लपेटना थोड़ा मुश्किल हो जाता है (क्योंकि अब वे केवल एक घटक के अंदर उपलब्ध हैं, निर्यात के लिए उपलब्ध नहीं हैं।

const withReact = Component = props => (
  <ReactContext.Provider value={api => <Component api={api} {...props} /> } />
)

मैं इस पर कुछ घंटे बिताता हूं, अगर त्रुटि संदेश को बदलने के लिए स्रोत कोड बदलना और इसमें अधिक जानकारी जोड़ना आसान नहीं है और आपको अधिक समय चाहिए, कम से कम इस नोट को दस्तावेज़ में जोड़ें,

_p.s: प्रतिक्रिया में बहुत अच्छे दस्तावेज़ हैं, लेकिन मुझे लगता है कि उस पृष्ठ को समीक्षा की आवश्यकता है।_

@OliverRadini

मैं react-hot-loader से ^4.6.0 . को अपडेट करके इसे ठीक करने में सक्षम था

मान, जिसने इसे ठीक कर दिया।
@gaearon @theKashey इसे https://reactjs.org/warnings/invalid-hook-call-warning.html में जोड़ने के बारे में क्या सोचें ताकि लोग react-hot-loader के पुराने संस्करण के कारण अपना समय बर्बाद न करें?

मैंने सोचा कि यह पहले से ही एक दर्जन मुद्दों में काफी अच्छा दस्तावेज है।

नमस्ते, मैं एक ऐप और लाइब्रेरी दोनों में रिएक्ट का उपयोग कर रहा हूं। मैं ऐप के अंदर लाइब्रेरी का उपयोग करता हूं। मैं दो प्रतिक्रिया उदाहरणों का उपयोग करके समस्या को ठीक करने में कामयाब रहा:

ऐप वेबपैक कॉन्फ़िगरेशन में:

    alias: { react: path.resolve( '__dirname', '..',  'node_modules', 'react' ) // Adapt this to match your file tree

पुस्तकालय वेबपैक विन्यास में

  externals: {
    react: 'react', // Case matters here
    'react-dom': 'react-dom' // Case matters here
  }

तो मैं एक गैर-पारदर्शी फ़ाइल (*.js) से हुक कॉलिंग के साथ एक समस्या में भाग रहा हूं:

index.js :

import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(App(), document.getElementById('root'));

app.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const BaseContext = React.createContext();

const initialState = {
  woo: true
};

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const Home = () => <h1>You're at home.</h1>;

const App = () => {
  // eslint-disable-next-line
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    <Router>
      <BaseContext.Provider value={initialState}>
        <BaseContext.Consumer>
          <div className="welcome">
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
              </ul>
            </nav>
            <header className="header">
              <h1>Welcome!</h1>
            </header>
            <Route path="/" exact component={Home} />
          </div>
        </BaseContext.Consumer>
      </BaseContext.Provider>
    </Router>
  );
};
export default App;

कोई सलाह, यह मानते हुए कि यह "इसे JSX फ़ाइल और ट्रांसपाइल में ले जाएँ" नहीं है?

मेरे लिए कुछ भी काम नहीं करता है, उत्तेजना और प्रतिक्रिया के मिश्रण का उपयोग कर रहा हूं, मेरे पास एक हाइब्रिड ऐप है, हुक का उपयोग करना शुरू कर दिया है और जैसे ही मैंने टर्बोलिंक जोड़ना शुरू किया, यह विफल हो गया :(

संपादित करें: अभी के लिए मैंने स्क्रिप्ट टैग में data-turbolinks-track="reload" data-turbolinks-eval="false" जोड़कर अपनी समस्या का समाधान किया है ताकि इसे अभी के लिए करना चाहिए

मेरे पास एक ही सवाल है, 4 घंटे के बाद, मुझे पता चला कि जेनकींस गायब ट्रांसफॉर्म का उपयोग कर रहा था। सर्वर पर बेबेलआरसी फाइलें

यह त्रुटि क्यों पैदा करेगा?

$ npm ls react
[email protected] /mnt/g/development/javascript/pow-vehmain
└── [email protected]`

Invalid hook call...
ServiceVisitMaintenance
src/components/ServiceVisit/ServiceVisitMaintenance.js:6
  3 | import { ServiceVisitForm } from './ServiceVisitForm';
  4 | 
  5 | const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
> 6 | const ServiceVisitMaintenance = () => {
  7 |   const [vehicleList, setVehicleList] = useState([]);
  8 |   return (
  9 |     <div>

ServiceVisitMaintenance.js:

import React, { useState } from 'react';
import { ServiceVisitForm } from './ServiceVisitForm';
const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
const ServiceVisitMaintenance = () => {
  const [vehicleList, setVehicleList] = useState([]);
  return (
    <div>
      <ServiceVisitForm vehicleList={data} />
    </div>
  );
};

export { ServiceVisitMaintenance };

कृपया जांचें कि आपका प्रतिक्रिया-डोम संस्करण क्या है।

$ npm ls प्रतिक्रिया-डोम
[email protected] /mnt/g/Development/javascript/pow-vehmain
└── प्रतिक्रिया-डोम@16.8.6

मुझे इसका सामना तब करना पड़ा जब मैं पुस्तकालय से एक कनेक्ट (mapStateToProps) (MyComponent) निर्यात करता हूं और अपने सीआरए ऐप में उस पुस्तकालय का उपयोग करता हूं।

नहीं, यह मेरी बुरी गलती थी। जिस रूटीन ने इसे कहा, वह रिएक्ट-राउटर-डोम का इस्तेमाल करता था और कंपोनेंट के बजाय रेंडर प्रोप का इस्तेमाल करता था।

क्या आप में से किसी का भी यही मुद्दा था लेकिन गैट्सबी के साथ?

मैं 'npm ls प्रतिक्रिया' के बाद निम्नलिखित परिणाम प्राप्त करता हूं:

और 'एनपीएम एलएस प्रतिक्रिया-डोम'

सबसे पहले, मुझे लगा कि मैंने गलती से विश्व स्तर पर प्रतिक्रिया स्थापित कर ली है, विश्व स्तर पर अनइंस्टॉल करने के बाद, कुछ भी नहीं बदला। फिर, मैंने एक अलग निर्देशिका में एक पूरी तरह से नई परियोजना बनाने की कोशिश की, 'gatsby new random-name' और एक छोटी सी विशेषता जोड़ी (टिप्पणियां जोड़ें, साथ में https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtu .be) गैट्सबी-स्टार्टर-डिफॉल्ट में यह जांचने के लिए कि क्या त्रुटि खुद को पुन: उत्पन्न करेगी। खैर, मेरे चिराग के लिए, यह किया!

किसी भी और सभी सलाह को एक निराश जनसमूह द्वारा अच्छी तरह से प्राप्त किया जाएगा।

मैं अभी भी स्टोरीबुक में इस मुद्दे का सामना कर रहा हूं। क्या यह आउटपुट npm ls से सही है या नहीं?

मेरे मामले में, समस्या why-did-you-update मॉड्यूल के कारण हुई थी।

उपयोगकर्ता या तो कार्यक्षेत्र और लर्न मोनोरेपो और पैकेज को फहराता है। जिससे समस्या का समाधान हो जाएगा।

हम एसएसआर के साथ एक ही समस्या कर रहे हैं। यह हमारे वेबपैक कॉन्फ़िगरेशन में externals: [“react”] सेट करके और फिर मैन्युअल रूप से react/umd/react.development.js लोड करके काम करता प्रतीत होता है। हालाँकि, यह एक दर्द है और एक आसान तरीका खोजना पसंद करेंगे।

ठीक है तो उम्मीद है कि यह किसी की मदद करता है। हम गलती से वेबपैक रनटाइम.जेएस को कई बार लोड कर रहे थे जिसके कारण रिएक्ट की कई प्रतियां मौजूद थीं। सुनिश्चित करें कि आप केवल एक बार रनटाइमचंक (runtime.js) लोड करते हैं।

यदि आपको मेरे जैसे अपने जेस्ट परीक्षणों में समस्या है, तो यह मेरे लिए इसे ठीक करने वाला प्रतीत होता है।
इसे अपने jest.config.js . में जोड़ें

moduleNameMapper: {
    '^react$': '<rootDir>/node_modules/react/'
  }

यह अच्छा होगा यदि यह त्रुटि कम से कम उस फ़ाइल की ओर इशारा करती है जहाँ यह हो रहा है। मैंने गलती से एक सामान्य समारोह में एक हुक बुलाया और इसे डीबग करना मुश्किल था।

मुझे समस्या का एक और कारण और उसका समाधान मिला।

मेरा वातावरण electron और webpack है लेकिन यह गैर-इलेक्ट्रॉन लोगों की भी मदद कर सकता है। रिएक्ट 16.9 (और रिएक्ट डोम 16.9) में अपग्रेड करने के बाद मुझे यह त्रुटि संदेश क्यों मिलता है, इसे हल करने के लिए मैंने दर्दनाक दिन बिताए।

मेरे मामले में ऐसा लग रहा था कि मेरे पास ऐप में दो प्रतिक्रियाएँ थीं, लेकिन मुझे नोड_मॉड्यूल्स में दो भौतिक पुस्तकालय नहीं मिले, यहाँ तक कि npm ls react का उपयोग भी नहीं किया। बंडल के अंदर क्या है यह देखने के लिए मैंने webpack-bundle-analyzer का भी उपयोग किया।

आखिरकार, मुझे पता चला कि मेरे पास परियोजना में भौतिक रूप से दो प्रतिक्रियाएँ नहीं हैं, लेकिन प्रतिक्रिया और प्रतिक्रिया DOM को HTML फ़ाइल में दो बार संदर्भित/लोड किया गया था । रिएक्ट लाइब्रेरी के index.js में उदाहरण के लिए console.log("React load") जोड़कर इसे आसानी से चेक किया जा सकता है।

वास्तविक स्रोत electron-webpack से जुड़ा था। प्रतिक्रिया और प्रतिक्रिया-डोम को बाहरी के रूप में चिह्नित नहीं किया गया था इसलिए बंडल में और साथ ही बाद में किसी अन्य मॉड्यूल में उपयोग की आवश्यकता के कारण नोड_मॉड्यूल से लोड किया गया था।

समाधान इन पंक्तियों को जोड़ने जितना आसान था webpack.renderer.config.js :

module.exports = {
    externals: [
        "react",
        "react-dom"
    ],
};

ठीक है, इसलिए यदि कोई यहां पार्सल.जेएस का उपयोग करता है, तो किसी अजीब कारण से मैं निम्नलिखित आयात से दूर होने में सक्षम था: import React from 'React'; और एक बार जब मैंने रिएक्ट हुक का उपयोग करना शुरू किया, तो मुझे अपरिवर्तनीय उल्लंघन त्रुटि मिली, यह महसूस नहीं हुआ कि यह था क्योंकि मैं from 'react' के बजाय from 'react' from 'React' का उपयोग करके अनुचित तरीके से आयात कर रहा था। ओह।

क्या आप में से किसी का भी यही मुद्दा था लेकिन गैट्सबी के साथ?

मैं 'npm ls प्रतिक्रिया' के बाद निम्नलिखित परिणाम प्राप्त करता हूं:

और 'एनपीएम एलएस प्रतिक्रिया-डोम'

सबसे पहले, मुझे लगा कि मैंने गलती से विश्व स्तर पर प्रतिक्रिया स्थापित कर ली है, विश्व स्तर पर अनइंस्टॉल करने के बाद, कुछ भी नहीं बदला। फिर, मैंने एक अलग निर्देशिका में एक पूरी तरह से नई परियोजना बनाने की कोशिश की, 'gatsby new random-name' और एक छोटी सी विशेषता जोड़ी (टिप्पणियां जोड़ें, साथ में https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtu .be) गैट्सबी-स्टार्टर-डिफॉल्ट में यह जांचने के लिए कि क्या त्रुटि खुद को पुन: उत्पन्न करेगी। खैर, मेरे चिराग के लिए, यह किया!

किसी भी और सभी सलाह को एक निराश जनसमूह द्वारा अच्छी तरह से प्राप्त किया जाएगा।

हाँ, मुझे आपके जैसा ही समस्या का सामना करना पड़ा है। मैंने यहाँ सलाह का पालन किया है... ,

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

मैंने पृष्ठों के अंतर्गत अनुक्रमणिका फ़ाइल में React2 जोड़ा। यह झूठी वापसी करता है।

Deduped का अर्थ है कि npm को निर्भरता को यहाँ से हटा देना चाहिए था ...

एक ही पैकेज को दो बार स्थापित करने की आवश्यकता नहीं है! यह सिर्फ संदर्भित है।

इसके अलावा, यह संकुल को "पेड़ के ऊपर" (पेड़ को समतल करता है) ले जाता है। यह पूरी तरह से समझ में आता है क्योंकि अन्यथा एक पैकेज को किसी अन्य पैकेज के नोड_मॉड्यूल में देखना होगा (जो कि गन्दा होगा) और निर्भरता को सरल बनाने में मदद करता है।

आप इसे मान्य कर सकते हैं, क्योंकि आपके निर्भरता ग्राफ़ में प्रत्येक पैकेज जो deduped कहता है, ग्राफ़ में कम से कम एक बार और पाया जा सकता है, आमतौर पर "उच्च स्तर" पर।

हालांकि जाहिर तौर पर डिडुपिंग ने काम नहीं किया।

आपने क्या प्रयास किया है?

नेक्स्टजेएस के साथ निर्माण करने का प्रयास करते समय मुझे यह त्रुटि मिल रही है। कुछ घटक सामग्री-यूआई का उपयोग करते हैं और अगर मैं उन्हें हटा दूं तो समस्या दूर हो जाएगी। मैं स्टाइल-घटकों का उपयोग नहीं करता। मैंने बिना किस्मत के node_modules आदि को हटाने की कोशिश की। मैंने अपनी अगली.config.js फ़ाइल और package.json में बिना किसी किस्मत के react के लिए उपनाम जोड़ने और हल करने का प्रयास किया। मैं प्रतिक्रिया 16.8.6, प्रतिक्रिया-डोम 16.8.6, और अगले 9.0.4 का उपयोग कर रहा हूँ। npm ls कहता है कि प्रत्येक में से केवल एक ही है। मैं किसी भी एनपीएम लिंक का उपयोग नहीं कर रहा हूं।

भंडार: https://github.com/dancancro/questions/tree/invalid-hook-call

कोडसैंडबॉक्स यहाँ है: https://codesandbox.io/s/github/dancancro/questions/tree/invalid-hook-call/?fontsize=14

स्टैक ओवरफ्लो: https://stackoverflow.com/questions/57647040/nextjs-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-fun

त्रुटि यहाँ है: https://gist.github.com/dancancro/2dfafb053aaaedfade406fd4f67eb68a
... रेंडर -> रेंडरटॉस्ट्रिंग -> ReactDOMServerRenderer.read -> ReactDOMServerRenderer.render -> Object.WithStyles [रेंडर के रूप में] ...

आपत्तिजनक हुक एक useStyles() एक withStyles फ़ंक्शन में निम्न फ़ाइल की लाइन 17428 पर कॉल है। "Var Classes = useStyles (props)" के लिए खोजें। समस्या नेक्स्ट-जेनरेटेड कोड के साथ है। मैंने जो कोड लिखा है वह withStyles या किसी भी हुक या "उपयोग *" से शुरू होने वाले किसी भी फ़ंक्शन का उपयोग नहीं करता है

https://raw.githubusercontent.com/dancancro/questions/invalid-hook-call/.next/static/development/pages/index.js

अद्यतन: इसे मेरे next.config.js से हटाने से समस्या हल हो गई:

    webpack: config => {
        config.externals = [
            '/'
        ]
        return config
    },

मैंने अपने लिंक किए गए पैकेज के node_modules फ़ोल्डर से react और react-dom को हटाकर एक समाधान खोजा।

मैं आप में से एक ही नाव में हूं। मेरे पास एक पुस्तकालय पैकेज है जिस पर मैं स्थानीय रूप से काम कर रहा हूं, और जब भी मुझे अपने एप्लिकेशन पैकेज में बदलाव देखने की आवश्यकता होती है, तो मैं इसे प्रकाशित करने की परेशानी से नहीं गुजरना चाहता। मैंने इसे लिंक किया और यह त्रुटि मिलने लगी।

यहाँ उपाय है:

• पैकेज ए: आपका लाइब्रेरी कोड पैकेज, npm link 'd . रहा है
• पैकेज बी: आपका एप्लिकेशन कोड पैकेज। पैकेज A . के लिए आपके node_modules फ़ोल्डर में एक सिमलिंक है

1. पैकेज बनाएं ए। मेरा अपनी संपत्ति dist/ पर आउटपुट करता है, जिसमें यह node_modules भी शामिल है
2. पैकेज ए के वितरित node_modules फ़ोल्डर में, react और react-dom हटाएं
3. ???
4. फायदा!

ध्यान दें कि मैंने दोनों पैकेजों में रिएक्ट का एक ही संस्करण स्थापित किया था। आपको किसी भी चल रही प्रक्रिया को पुनरारंभ करना होगा।

मेरे लिए असंगत why-did-you-update काम निकालें। (https://github.com/maicki/why-did-you-update/issues/52)

असंगत क्यों-क्या-आप-अद्यतन

@ बर्थो-शून्य उपयोग नए devtools या मेरे हुक उपयोग का उपयोग कर सकते हैं WhyDidYouUpdate

@brunolemos यह बहुत अच्छा है लेकिन अधिक विवश है क्योंकि आपको इसे प्रत्येक घटक पर रखना है।

@ dmart914 के समाधान ने मेरे लिए समस्या हल कर दी। मेरे पास भी पैकेज जुड़े हुए हैं ताकि मैं बिना बदलाव प्रकाशित किए अपनी लाइब्रेरी का परीक्षण कर सकूं ... क्या किसी को इसके लिए कोई समाधान मिला है? ओपन-सोर्स लाइब्रेरी को प्रकाशित करना और हुक के लिए जादुई रूप से काम करना शुरू करने के लिए विशिष्ट एनपीएम पैकेज को हटाने के लिए यह एक अच्छा अनुभव नहीं है ...

लिंक किए गए पैकेज के react मॉड्यूल को हटाने का समाधान काम नहीं करता है यदि उस पैकेज में ऐसे परीक्षण हैं जिनके लिए react (जैसे @testing-library/react या @testing-library/react-hooks ) की आवश्यकता होती है, तो यह ऐसा लगता है कि हमें इसे संभालने के लिए अभी भी एक बेहतर तरीके की जरूरत है।

मेरे आवेदन में दो भाग हैं। मुख्य वेब एप्लिकेशन और एक मॉड्यूल जो गतिशील रूप से वेब एप्लिकेशन में लोड हो जाता है। वेब एप्लिकेशन और मॉड्यूल दोनों रिएक्ट 16.9.0 का उपयोग करते हैं।
मॉड्यूल को React.lazy () और डायनेमिक इंपोर्ट () स्टेटमेंट का उपयोग करके वेब एप्लिकेशन में लोड किया जाता है।
जब मॉड्यूल लोड होता है तो "अमान्य हुक कॉल" त्रुटि फेंक दी जाती है।

मेरे मामले में चूंकि मुख्य एप्लिकेशन और मॉड्यूल अलग-अलग बनाए गए हैं, इसलिए वे एक-दूसरे से अवगत नहीं हैं और प्रतिक्रिया की अपनी प्रति रखने जा रहे हैं। मैंने धागे में पाए गए निम्नलिखित सुझावों का प्रयास किया लेकिन इस मुद्दे को हल नहीं किया।

1. मॉड्यूल के webpack.config में एक उपनाम जोड़ना जो मुख्य एप्लिकेशन की प्रतिक्रिया को इंगित करता है जैसा कि apieceofbart द्वारा सुझाया गया है।
   उपनाम: {
   प्रतिक्रिया: path.resolve ('../../node_modules/react')
   }

2. मॉड्यूल के package.json में मुख्य अनुप्रयोग में प्रतिक्रिया निर्भरता को इंगित करने का प्रयास किया।
   "निर्भरता": {
   "प्रतिक्रिया-डोम": " फ़ाइल:../सामान्य/नोड_मॉड्यूल्स/प्रतिक्रिया-डोम ",
   "प्रतिक्रिया": " फ़ाइल:../सामान्य/नोड_मॉड्यूल/प्रतिक्रिया "
   }

मुझे लगता है कि जब गतिशील रूप से लोड किए गए मॉड्यूल की बात आती है तो प्रतिक्रिया को कई प्रतियों को चलाने का समर्थन करना पड़ता है।

ऊपर दी गई कुछ प्रतिक्रियाओं के आधार पर, यहाँ मेरे लिए क्या काम किया गया है:

1. निम्नलिखित को config/webpack.config.js . में जोड़ा गया

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

1. संपादित package.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

1. संपादित public/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

उसके बाद, मैं सीडीएन से लोड किए गए रिएक्ट का उपयोग करके अपनी लाइब्रेरी में हुक चलाने में सक्षम था, जबकि जेस्ट ने अभी भी नोड_मॉड्यूल्स (देव निर्भरता से स्थापित) से प्रतिक्रिया प्रति लोड की।

उम्मीद है की वो मदद करदे

जब मैं अपने घटक को कार्यात्मक से क्लासफुल घटक में बदलने की कोशिश करता हूं तो मुझे इस समस्या का सामना करना पड़ता है और मुझे यह त्रुटि भी मिलती है, इसलिए इस त्रुटि के बारे में मेरा समाधान यहां है, आशा है कि यह आपके मामले में भी मदद करता है।

इस मामले में उच्च क्रम घटक का उपयोग करने का प्रयास करें

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'प्रोप-प्रकार' से प्रोपटाइप आयात करें;
आयात { withStyles } '@material-ui/styles' से;
'@ सामग्री-यूआई/कोर/बटन' से आयात बटन;

कॉन्स्ट स्टाइल = थीम => ({
जड़: {
पृष्ठभूमि: 'रैखिक-ढाल (45deg, #FE6B8B 30%, #FF8E53 90%)',
सीमा: 0,
सीमा त्रिज्या: 3,
बॉक्सशैडो: '0 3px 5px 2px आरजीबीए (255, 105, 135, .3)',
रंग सफेद',
ऊंचाई: 48,
पैडिंग: '0 30px',
},
});

क्लास हायरऑर्डरकंपोनेंट रिएक्ट का विस्तार करता है। कॉम्पोनेंट {

प्रस्तुत करना(){
कास्ट {कक्षाएं} = this.props;
वापसी (
उच्च-क्रम घटक
);
}
}

HighOrderComponent.propTypes = {
कक्षाएं: PropTypes.object.isRequired,
};

स्टाइल्स (शैलियों) (हायरऑर्डर कॉम्पोनेंट) के साथ डिफ़ॉल्ट निर्यात करें;

मैं यार्न का उपयोग कर रहा हूं, और मेरे package.json में संकल्प को मजबूर करके इसे ठीक किया है:

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

क्या आपने पैरेंट या चाइल्ड पैकेज में जोड़ा है?

ऊपर दी गई कुछ प्रतिक्रियाओं के आधार पर, यहाँ मेरे लिए क्या काम किया गया है:

1. निम्नलिखित को config/webpack.config.js . में जोड़ा गया

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

1. संपादित package.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

1. संपादित public/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

उसके बाद, मैं सीडीएन से लोड किए गए रिएक्ट का उपयोग करके अपनी लाइब्रेरी में हुक चलाने में सक्षम था, जबकि जेस्ट ने अभी भी नोड_मॉड्यूल्स (देव निर्भरता से स्थापित) से प्रतिक्रिया प्रति लोड की।

उम्मीद है की वो मदद करदे

कोई अपराध नहीं है, लेकिन यह परेशान करने वाला है कि इस तरह के समाधान का पालन करना होगा। मैं पिछले कुछ दिनों से इस तरह के हैक्स पर भरोसा किए बिना इस बग को हल करने की कोशिश कर रहा हूं।

मैं एक पुन: प्रयोज्य पुस्तकालय पर काम कर रहा हूं जिसमें हुक का उपयोग करने वाले घटक शामिल हैं। मुझे उन्हें प्रकाशित करने से पहले वास्तविक परियोजनाओं में उनका परीक्षण करने की आवश्यकता है। इसका एकमात्र समाधान yarn|npm link का उपयोग करना है। मैं रोलअप का उपयोग करके पुस्तकालय को बंडल करता हूं, और मैं सत्यापित कर सकता हूं कि बंडल में प्रतिक्रिया का संस्करण नहीं है। जब मैं पुस्तकालय का उपयोग करने वाले ऐप को बंडल (वेबपैक) करता हूं तो बग/समस्या प्रकट होती है। यह केवल create-react-app और next.js ऐप्स के लिए भी होता है। दोनों ढांचे पृष्ठभूमि में वेबपैक का उपयोग करते हैं।

क्या किसी ने अभी तक कोई स्थायी समाधान खोजा है?

npm|yarn link पूरी तरह से हटाकर, मैं इस मुद्दे को हल करने में सक्षम था। इसके बजाय, मैं इस सुंदर पुस्तकालय का उपयोग करता हूं, जो आपकी परियोजना संरचना के अज्ञेयवादी है। यह आपको वेबपैक को अपने बंडलर के रूप में उपयोग करने की अनुमति भी देता है, इसलिए आपको _react_ और _react-dom_ को external या alias के रूप में घोषित करने की आवश्यकता नहीं है। दुर्भाग्य से, यह प्रोजेक्ट में कुछ नई निर्देशिकाओं और लॉक फाइलों को पेश करता है, लेकिन यह काम करता है ... स्थानीय रूप से और यहां तक ​​​​कि हमारे डॉकटर कंटेनरों के अंदर भी।

शायद यह सूची में थोड़ा मददगार होगा:

संपर्क

@GabrielBB धन्यवाद, यह मेरे लिए काम है

@ dmart914 धन्यवाद! अब तक एकमात्र कामकाज जो मेरे लिए काम करता है :)

वर्तमान में न्यूनतम, सीधे सेटअप का उपयोग करते समय रिएक्ट अमान्य हुक कॉल चेतावनी प्राप्त करना।

यह फ़ंक्शन घटक:

1. रिएक्ट और रिएक्टडॉम के लिए एक ही संस्करण का उपयोग करता है।
2. हुक के नियमों का पालन करता है।
3. केवल प्रतिक्रिया की एक प्रति है।

__निर्भरता__
प्रतिक्रिया@16.10.1
प्रतिक्रिया-डोम@16.10.1
वेबपैक@4.41.0
वेबपैक-क्ली@3.3.9

और निर्माण के लिए webpack test.js -o main.js चल रहा है।

मैं इस फ़ाइल की अपेक्षा करता हूं:

• बॉक्स रेंडर करें।
  
  
  
  • React.useState पर कॉल करने से पहले डीबगर को रोकें।
  
  
  • एक बूलियन बनाएं test और कॉलबैक अपडेट करें updateTest ।
  
  
  • प्रतिक्रिया त्रुटि फेंकता है।
  
  
  • रेंडर करने पर React.useEffect कॉलबैक करें।
  
  
  • प्रतिक्रिया त्रुटि फेंकता है।
  
  

क्या मैं कुछ गलत कर रहा हूँ, या कुछ और चल रहा है?

// test.js
import React, { createElement as el } from 'react';
import ReactDOM from 'react-dom'; 

function Item() {
  debugger;
  const [test, updateTest] = React.useState(false); // Throws React error.

  React.useEffect(function checkTest() { // Throws React error.
    console.log("checking test", test);
  }, [test]);

  React.useEffect(function tester() { // Throws React error.
    if (!test) {
      setTimeout(() => {
        console.log("changing value for test");
        updateTest(true);
      }, 1000);
    }
  }, [test]);

  return el('div', {style: {width: '300px', height: '300px', 'background-color': 'green', border: '1px solid red'}});
}

function render() {
  let root = document.querySelector('#primary');
  if (!root) {
    root = document.createElement('div');
    document.body.appendChild(root);
  }

  ReactDOM.render(Item(), root);
}

render();

आप वास्तव में एक तत्व बनाना भूल गए हैं। आप ReactDOM.render कॉल पर पहुंचने से पहले सिंक्रोनाइज़ कर रहे हैं Item() । आपको el(Item) पास करना होगा।

सत्य! जानकारी के लिए धन्यवाद।

कुछ अन्य टिप्पणीकारों के समान स्थिति में हूँ। मैं कुछ प्रतिक्रिया घटकों (जिनमें से कुछ हुक का उपयोग करता हूं) को ट्रांसपाइल करने के लिए वेबपैक का उपयोग कर रहा हूं और ट्रांसपिल्ड कोड को lib फ़ोल्डर में रख रहा हूं। मैंने वेबपैक कॉन्फिग के externals फ़ील्ड में प्रतिक्रिया जोड़ी ताकि यह घटक कोड के साथ बंडल न हो। मैं इन घटकों को दो अलग-अलग परियोजनाओं में उपयोग करना चाहता हूं - ये घटक उनके बीच आम हैं और इसलिए हम उन्हें एक ही स्थान पर विकसित करना चाहते हैं और अपडेट दोनों ऐप्स में दिखाई दे सकते हैं।

यदि पैकेज.जेसन में common-components: file:../../common-components/lib का उपयोग करके निर्भरता को जोड़ा जाता है तो घटक पूरी तरह से लोड हो जाते हैं, हालांकि वेबपैक चलाना घटकों को तुरंत अपडेट नहीं करता है - इसके बजाय मुझे yarn upgrade common-components चलाना होगा और फिर देव सर्वर को पुनरारंभ करना होगा।

यदि निर्भरता को common-components: link:../../common-components/lib का उपयोग करके जोड़ा जाता है तो वेबपैक को फिर से चलाने से मुख्य ऐप के node_modules में फ़ाइलें अपडेट हो जाएंगी (क्योंकि यह अब एक सिमलिंक का उपयोग कर रहा है), लेकिन मुझे कई उदाहरणों की उपरोक्त त्रुटि मिल रही है प्रतिक्रिया. मुझे लगता है कि यह अब common-components/node_modules फ़ोल्डर में प्रतिक्रिया संस्करण का उपयोग कर रहा है।

क्या सिम्लिंक (यानी common-components: link:../../common-components/lib ) का उपयोग करने का कोई तरीका है, जबकि यह भी सुनिश्चित करता है कि लिंक किए गए घटक मुख्य ऐप के नोड_मॉड्यूल्स फ़ोल्डर में मिली प्रतिक्रिया का उपयोग करते हैं? चूंकि मैं दोनों ऐप्स में इन घटकों का उपयोग करने की योजना बना रहा हूं, इसलिए मैं उनमें से किसी एक से प्रतिक्रिया पैकेज को सामान्य घटक लाइब्रेरी में लिंक नहीं कर सकता हूं और मैं सामान्य घटक पैकेज में उपयोग किए जाने वाले दोनों मुख्य ऐप्स की प्रतिक्रियाओं को जोड़ने से बचना चाहता हूं। मैंने वेबपैक resolve फ़ील्ड का जिक्र करते हुए कुछ टिप्पणियां देखी हैं जो आशाजनक लगती हैं लेकिन मैं इसे काम करने में असमर्थ हूं। किसी भी तरह की सहायता का स्वागत किया जाएगा!

संपादित करें: हमारे उपयोग के मामले में रुचि रखने वाले किसी भी व्यक्ति के लिए, हमने फाइलों को केवल दो परियोजनाओं में कॉपी करने के लिए बिल्ड चरण को बदलना समाप्त कर दिया, और पूरी तरह से ट्रांसपिलिंग से परहेज किया।

पैकेज को प्रकाशित करने के लिए एक त्वरित काम नहीं होगा, लेकिन इसे केवल जीथब पर धक्का दें और इसे yarn add <git-url> का उपयोग करके अपने प्रोजेक्ट में आयात करें।

पैकेज को प्रकाशित करने के लिए एक त्वरित काम नहीं होगा, लेकिन इसे केवल जीथब पर धक्का दें और इसे yarn add <git-url> का उपयोग करके अपने प्रोजेक्ट में आयात करें।

हम में से कई लोग npm लिंक और npm पैकेज सापेक्ष पथ का उपयोग करते हैं, इससे पहले कि हम जानते हैं कि यह काम करेगा, NPM या GitHub में परिवर्तन प्रकाशित किए बिना कोड को विकसित और परीक्षण करना है।

हम https://github.com/facebook/react/issues/13972#issuecomment -447599035 से संबंधित होने के कारण इस मुद्दे में भाग गए हैं, मुझे लगता है कि यह एक वेबपैक नोड सर्वर के कारण भी हो सकता है। हमारा उपयोग मामला जेस्ट के भीतर चल रहा एक एकीकरण परीक्षण था जो परीक्षण निष्पादित करने से पहले सर्वर बनाने के लिए प्रोग्रामेटिक रूप से webpack() चलता था। मेरा मानना ​​​​है कि यह मुद्दा इस बात से संबंधित है कि कैसे ESM और CJS एक ही समय में मौजूद हो सकते हैं।

उदाहरण के लिए इस उदाहरण को लें:

// node express server, doing server-rendering
import React from 'react';
import { ApolloProvider } from '@apollo/react-common';
import { renderToStringWithData } from '@apollo/react-ssr';

res.send(await renderToStringWithData(<ApolloProvider><App /></ApolloProvider>)

डीबगर सत्र में मैं जो देख रहा हूं वह यह है कि हम इस फ़ाइल के संकलित संस्करण में प्रतिक्रिया के दो अलग-अलग उदाहरण प्राप्त कर सकते हैं:

_react: {Children, ...}
_react2: {default: {Children, ...}

कहां
_react इस फ़ाइल में ESM import React from 'react' से है
_react2 सीजेएस var _react = _interopRequireDefault(require("react")); से node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js के भीतर से है

मेरा मानना ​​​​है कि इसने प्रतिक्रिया के संदर्भ को दो स्थानों (सर्वर-रेंडर फ़ाइल, और @apollo/react-ssr के बंडल के अंदर) के बराबर नहीं होने का कारण बना दिया और इस प्रकार त्रुटि को फेंक दिया।

हमने पाया कि यह संभवतः परीक्षण के भीतर से webpack() के प्रोग्रामेटिक उपयोग के कारण हुआ था, और उन परीक्षणों को एंड-टू-एंड परीक्षण होने के लिए फिर से तैयार किया है। हमारे लिए सबक यह है कि यदि समस्या केवल परीक्षण कोड में हो रही है, तो आपके पास अत्यधिक जटिल परीक्षण हो सकते हैं।

मैं इसे यार्न के साथ हल करने में कामयाब रहा:

सीडी से myApp/node_modules/react और yarn link

फिर अपनी लाइब्रेरी में yarn link react . चलाएं

अब आपकी लाइब्रेरी ठीक उसी प्रतिक्रिया संस्करण का उपयोग कर रही है जो आपके मुख्य ऐप

मैंने अपने lib में एक सहकर्मी निर्भरता के रूप में प्रतिक्रिया सेट करने का प्रयास किया लेकिन फिर lib नहीं बन पाएगा

कोई create-react-app yarn निकाले या स्विच किए बिना इसे कैसे ठीक कर सकता है?

आप npm लिंक का उपयोग करके ठीक उसी तकनीक का उपयोग कर सकते हैं। कोई निष्कासन आवश्यक नहीं है।

जब आप विभिन्न संस्करणों के साथ कई प्रोजेक्ट पर काम करते हैं तो react को लिंक करना सबसे अच्छा विचार नहीं है।

@woles आप पूरी तरह से सही हैं लेकिन मेरे मामले में, यह मेरी 'हुक' समस्या हल करता है। मुझे आशा है कि प्रतिक्रिया डेवलपर्स एक बेहतर समाधान के साथ आएंगे

नमस्ते,
मैंने इस बग को घंटों के बाद यह महसूस किया कि मैंने गलती से प्रतिक्रिया राउटर के अंदर घटक का गलत तरीके से उपयोग किया था।

मेरा ऐप काम कर रहा था लेकिन एक घटक में मैं यूज़स्टेट बिल्कुल नहीं जोड़ सका। इसका कारण यह था कि मैंने इस तरह के उच्च ऑर्डर फ़ंक्शन के बिना प्रतिक्रिया राउटर रेंडर विधि के अंदर घटक का उपयोग किया था:
<Route exact path="/path" render={ ComponentCausingTheErrorMesage }/>
इसमें स्विच हो रहा है
<Route exact path="/path" component={ ComponentNowWorkingAgain }/>
इसे मेरे लिए तय किया

मैं एक ऐप और एक मॉड्यूल के बीच npm link का उपयोग कर रहा था, जिस पर मैं सक्रिय रूप से काम कर रहा था, और मुझे ऐप के react और react-dom को मॉड्यूल से जोड़कर इसे ठीक करना था, फिर लिंक करना ऐप के लिए मॉड्यूल:

ऐप में:

1. cd node_modules/react && npm link
2. react-dom के लिए समान

मॉड्यूल में:

1. npm link react && npm link react-dom
2. npm link

ऐप में:

1. npm link [module-name]

आशा है कि यह किसी की मदद करता है

हमारे पास क्लाइंट-साइड काम करने वाले हुक थे लेकिन एसएसआर पर इस त्रुटि को मार रहे थे। मेरे सहयोगी ने इसे हमारे सर्वर-साइड वेबपैक कॉन्फ़िगरेशन में निम्नलिखित के साथ हल किया:

const nodeExternals = require('webpack-node-externals');

const serverConfig = () => {
  // lots of config, then:
  externals: [
    nodeExternals({
      modulesFromFile: true,
    }),
  ],
}

मैं इसे यार्न के साथ हल करने में कामयाब रहा:

सीडी से myApp/node_modules/react और yarn link

फिर अपनी लाइब्रेरी में yarn link react . चलाएं

अब आपकी लाइब्रेरी ठीक उसी प्रतिक्रिया संस्करण का उपयोग कर रही है जो आपके मुख्य ऐप

मैंने अपने lib में एक सहकर्मी निर्भरता के रूप में प्रतिक्रिया सेट करने का प्रयास किया लेकिन फिर lib नहीं बन पाएगा

यह सिर्फ सुंदर काम करता है

एक ही समय में इलेक्ट्रॉन-वेबपैक, प्रतिक्रिया और सामग्री-यूआई का उपयोग करते समय बस इस मुद्दे में भाग गया। जब मैं सामग्री-यूआई से कुछ भी उपयोग करने का प्रयास करता हूं - मुझे यह त्रुटि मिलती है (उदाहरण के लिए घटक या उपयोग का उपयोग करने का प्रयास करें))
सामग्री-ui से घटकों में त्रुटि उत्पन्न होती है।
मेरे मामले के लिए कोई समाधान?

हाय ZVER3D, मेरी पिछली टिप्पणी पढ़ने का प्रयास करें। आशा है ये मदद करेगा!

मैं एक ऐप और एक मॉड्यूल के बीच npm link का उपयोग कर रहा था, जिस पर मैं सक्रिय रूप से काम कर रहा था, और मुझे ऐप के react और react-dom को मॉड्यूल से जोड़कर इसे ठीक करना था, फिर लिंक करना ऐप के लिए मॉड्यूल:

ऐप में:

1. `cd node_modules/react && npm link`

2. same for `react-dom`

मॉड्यूल में:

1. `npm link react && npm link react-dom`

2. `npm link`

ऐप में:

1. `npm link [module-name]`

आशा है कि यह किसी की मदद करता है

स्वीट बेबी मूसा, इससे मुझे बहुत मदद मिली। समस्या को प्रतिक्रिया के विभिन्न संस्करण होने पर भी विचार नहीं किया !! मैं एनपीएम को प्रकाशित करने के लिए स्थानीय रूप से एक घटक का निर्माण कर रहा हूं, लेकिन एनपीएम लिंक का उपयोग करके स्थानीय स्तर पर इसका परीक्षण करने के लिए एक अलग परियोजना है। जाहिर है (अब) वे दोनों प्रतिक्रिया के विभिन्न संस्करणों का उपयोग कर रहे हैं। डी ओह!

हाय ZVER3D, मेरी पिछली टिप्पणी पढ़ने का प्रयास करें। आशा है ये मदद करेगा!

मुझे सही दिशा बताने के लिए धन्यवाद। एक और समाधान यूई लाइब्रेरी को जोड़ना था, जो कि मैं "व्हाइटलिस्टेड मॉड्यूल" में उपयोग कर रहा हूं। एकमात्र समस्या यह होगी कि आपको इसे उन सभी मॉड्यूलों के लिए करना होगा जिन्हें संकलन के लिए प्रतिक्रिया की आवश्यकता होती है।
तो, package.json में मैंने यह लिखा है:

"electronWebpack": {
    "whiteListedModules": [
      "@material-ui/core",
      "@material-ui/icons"
    ]
  }

मैं monorepo दृष्टिकोण का उपयोग कर एक प्रतिक्रिया आवेदन विकसित कर रहा हूँ। मेरे पास एक मुख्य ऐप ( brush ) और एक प्रतिक्रिया पुस्तकालय घटक ( react-gbajs ) है।

इसलिए जब मैं अपना react-gbajs घटक प्रस्तुत करने का प्रयास करता हूं, तो मुझे प्रतिक्रिया के कई उदाहरणों के बारे में यह त्रुटि होती है। अगर मैं उसी कोड को brush पर कॉपी और पेस्ट करता हूं तो मुझे कोई समस्या नहीं है।
मैंने इसे ठीक करने के लिए कई तरीकों का पालन किया, लेकिन उनमें से किसी ने भी इसे हल नहीं किया (वेबपैक, यार्न के कार्यक्षेत्र, एनपीएम लिंक पर निर्माण बदलें ...)

मैंने यह जांचने के लिए डिबग करने की कोशिश की कि क्या मेरे पास वास्तव में दो प्रतियां हैं ओएस रिएक्ट ( console.log(window.React1 === window.React2) रिएक्ट के डॉक्टर से उपयोग करके), लेकिन यह true के रूप में मूल्यांकन करता है!
(एक बहुत बुरा समाधान जो मैं अब उपयोग कर रहा हूं वह है हुक को प्रोप के रूप में पास करना: <GBAEmulator useEffect={useEffect} /> ... लेकिन मैं वास्तव में इसे मर्ज नहीं करना चाहता)

किसी के पास इसे ठीक करने के लिए कुछ विचार है?

मेरी परियोजना खुला स्रोत है और मैं इस शाखा में यह नया प्रतिक्रिया पुस्तकालय घटक जोड़ रहा हूँ: https://github.com/macabeus/klo-gba.js/blob/ac18f4d42b122c333622f502947135c2de217ce2/react-gbajs/src/index.js#L251 -एल274

नमस्ते,

मेरे पास एक ऐप (myApp) है जो एक कस्टम लाइब्रेरी (myDepPackage) पर निर्भरता के रूप में उपयोग करता है। वे दोनों एक बिल्ड टूल के रूप में वेबपैक का उपयोग कर रहे हैं और निश्चित रूप से मुझे एक ही त्रुटि हो रही थी। उपरोक्त समाधानों में से किसी ने भी मेरे लिए काम नहीं किया। इसने क्या किया, वेबपैक को कस्टम लाइब्रेरी (myDepPackage) के अंतिम बंडल में प्रतिक्रिया शामिल नहीं करने के लिए बाध्य करना था। वेबपैक कॉन्फिगरेशन (myDepPackage की) में जोड़ने वाली एकमात्र कॉन्फ़िगरेशन लाइन नीचे दी गई है:

externals: {
  react: "react",
},

आप यहां "बाहरी" विकल्प के बारे में अधिक जान सकते हैं: https://webpack.js.org/configuration/externals/#externals

@tsevdos Veeeery धन्यवाद !!! ❤️
इसने मेरी समस्या का समाधान किया जो मैंने पिछली टिप्पणी में कहा था।

हमारे लिए, समस्या यह थी कि हमारे पास एक एम्बेड करने योग्य रिएक्ट ऐप है जो एक वर्डप्रेस शोर्ट से पेज में लोड हो जाता है और एक यादृच्छिक आईडी के साथ एक डिव पर आरोहित हो जाता है। कुछ पृष्ठों पर हमारे पास कई एम्बेडेड ऐप्स हैं और जब तक हमने हुक का उपयोग शुरू नहीं किया तब तक यह ठीक काम कर रहा था।

यह केवल उन पृष्ठों पर शिकायत करेगा जिनमें एकाधिक एम्बेडेड ऐप्स हैं, इसलिए समाधान केवल एक बार बिल्ड के साथ स्क्रिप्ट लोड करने के लिए WP शोर्टकोड को अपडेट करना था।

सरल और स्पष्ट लगता है, लेकिन यह पता लगाना मुश्किल था! विशेष रूप से क्योंकि यह ऐसा कर रहा था और ठीक काम कर रहा था जब तक कि हम हुक नहीं जोड़ते।

दिलचस्प बात यह है कि कुछ पृष्ठों पर हमारे पास अन्य-अलग-अलग ऐप्स हैं जिन्हें हम एम्बेड करते हैं जो हुक का भी उपयोग कर रहे हैं, और वे अपनी स्क्रिप्ट/बिल्ड को रिएक्ट के साथ भी लोड करते हैं, लेकिन फिर यह ठीक काम करता है! समस्या तब थी जब यह एक ही बिल्ड को एक से अधिक बार लोड किया जा रहा था और वे हुक का उपयोग करते थे ।

मेरे लिए जो काम किया वह इस मुद्दे के धागे से दो सुझावों का संयोजन था।

मुख्य एप्लिकेशन का वेबपैक कॉन्फिगरेशन (@apieceofbart का सुझाव )

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

निर्भरता की वेबपैक कॉन्फ़िगरेशन ( @tsevdos का सुझाव )

  externals:
    react: 'react'
  }

मुझे html-webpack-plugin के साथ यह समस्या हो रही थी और मैं index.html का उपयोग कर रहा था, यह template से HtmlWebpackPlugin सेटिंग के रूप में दिखता है।

// webpack.config.js
plugins: [
   new HtmlWebpackPlugin({
      template: "./public/index.html"
   })
],

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>

</html>

मुझे एहसास हुआ कि प्लगइन <script type="text/javascript" src="main.js"></script> के ठीक बाद इंजेक्शन लगा रहा था <div id="root"></div> ।

तो, जब मैंने देव उपकरण खोला और एचटीएमएल उत्पन्न किया तो इस तरह दिखता था।

<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
    <script type="text/javascript" src="main.js"></script> <!-- injected from html-webpack-plugin -->
</body>

</html>

मेरे लिए, वह Invalid Hook Call Warning पैदा कर रहा था।

मैं नीचे की तरह <script src="main.js"></script> को हटाकर चेतावनी निकालने में सक्षम था।

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>

</html>

मुझे आशा है कि यह समाधान की तलाश में किसी की मदद करेगा!

ध्यान रखें कि प्रतिक्रिया-निर्भर पुस्तकालय भी इन मुद्दों का कारण बन सकते हैं। मेरे मामले में, मैं @emotion/core और @emotion/styled के विभिन्न संस्करणों का उपयोग कर रहा था।

https://github.com/emotion-js/emotion/issues/1470

नमस्ते,

बेदखल किए बिना एक संभावित समाधान वेबपैक उपनाम कॉन्फ़िगरेशन समाधान को कस्टमाइज़-क्रै और प्रतिक्रिया-ऐप-रीवायर्ड लाइब्रेरी के साथ मिलाना है। इस तरह आप एक config-overrides.js फ़ाइल बनाकर समस्या को हल करने के लिए केवल आवश्यक वेबपैक कॉन्फ़िगरेशन को ओवरराइड कर सकते हैं:

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    react: path.resolve(path.join(__dirname, './node_modules/react')),
  }),
);

मेरे पास Gatsby साइट पर यह समस्या थी, मैंने npm install चलाया और Gatsby के नवीनतम संस्करण में अपडेट किया और यह सब ठीक कर दिया

यदि आपको yarn or npm test (जैसे मैं था) चल रहे जेस्ट परीक्षण के साथ कोई समस्या हो रही है और react-test-renderer का उपयोग कर रहे हैं, तो सुनिश्चित करें कि react-test-renderer react के समान संस्करण से मेल खाता है आप उपयोग कर रहे हैं।

उदाहरण:

// Package.json
{
  ...
    "react" : "16.8.3",
  ...
}

yarn add [email protected] . चलाएँ

मेरे पास एक lib है और मैंने lib और मुख्य परियोजनाओं दोनों में react और react-dom के सभी संस्करणों की जांच की है। वे बिल्कुल वही हैं लेकिन काम नहीं किया।
हालाँकि @apieceofbart समाधान ने मेरे लिए काम किया।

@apieceofbart , आपने मेरा दिन बचाया <3

मेरे लिए जो काम किया वह इस मुद्दे के धागे से दो सुझावों का संयोजन था।

मुख्य एप्लिकेशन का वेबपैक कॉन्फिगरेशन (@apieceofbart का सुझाव )

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

निर्भरता की वेबपैक कॉन्फ़िगरेशन ( @tsevdos का सुझाव )

  externals:
    react: 'react'
  }

मेरा भी यही विचार है। मुझे इसे काम करने के लिए इन दोनों सुधारों को करने की ज़रूरत है। मेरी व्याख्या यह है कि दूसरी कॉन्फ़िगरेशन निर्भरता को 'प्रतिक्रिया' नाम के साथ बाहरी प्रतिक्रिया का उपयोग करने के लिए कहती है, और पहली कॉन्फ़िगरेशन मुख्य भंडार में 'नोड_मॉड्यूल्स/प्रतिक्रिया' फ़ोल्डर में 'प्रतिक्रिया' नाम को इंगित करती है। इसलिए रिएक्ट ब्रिज को काम करने के लिए ये दोनों आवश्यक हैं।

फिर भी, ऐसा लगता है कि कुछ लोगों के लिए उनमें से एक ही काफी है, जो मैं वास्तव में नहीं समझता।

मेरे लिए जो काम किया वह इस मुद्दे के धागे से दो सुझावों का संयोजन था।
मुख्य एप्लिकेशन का वेबपैक कॉन्फिगरेशन (@apieceofbart का सुझाव )

  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }

निर्भरता की वेबपैक कॉन्फ़िगरेशन ( @tsevdos का सुझाव )

  externals:
    react: 'react'
  }

मेरा भी यही विचार है। मुझे इसे काम करने के लिए इन दोनों सुधारों को करने की ज़रूरत है। मेरी व्याख्या यह है कि दूसरी कॉन्फ़िगरेशन निर्भरता को 'प्रतिक्रिया' नाम के साथ बाहरी प्रतिक्रिया का उपयोग करने के लिए कहती है, और पहली कॉन्फ़िगरेशन मुख्य भंडार में 'नोड_मॉड्यूल्स/प्रतिक्रिया' फ़ोल्डर में 'प्रतिक्रिया' नाम को इंगित करती है। इसलिए रिएक्ट ब्रिज को काम करने के लिए ये दोनों आवश्यक हैं।

फिर भी, ऐसा लगता है कि कुछ लोगों के लिए उनमें से एक ही काफी है, जो मैं वास्तव में नहीं समझता।

दूसरा आइटम महत्वपूर्ण है!
यदि अनदेखा किया जाता है, तो निर्माण प्रक्रिया पर, प्रतिक्रिया एक साथ निर्यात की जाएगी, क्योंकि यह एक आंतरिक निर्भरता है

ढेर सारा प्यार @apieceofbart !!!! मैं दीवार के माध्यम से अपनी मेज को लात मारने वाला था

इसलिए, माइक्रोसर्विसेज के लिए अभी भी कोई समाधान नहीं है। मेरे पास प्रतिक्रिया के साथ रूट एप्लिकेशन है जिसे गतिशील रूप से किसी अन्य प्रतिक्रिया के साथ बंडलों की आवश्यकता होती है। हम प्रतिक्रिया के बाहरी संस्करण का उपयोग नहीं कर सकते क्योंकि बहुत सारी स्वतंत्र टीमें हैं जिनकी अपनी निर्भरता है। यदि हम उन्हें उसी बाहरी संस्करण का उपयोग करने के लिए धक्का देते हैं तो अधिकांश परियोजनाएं स्पष्ट रूप से दुर्घटनाग्रस्त हो जाएंगी और इस संस्करण को अपग्रेड करना असंभव हो जाएगा क्योंकि प्रत्येक परियोजना इस संस्करण पर निर्भर करेगी।

कोई विचार?

क्या एनपीएम लिंक के साथ रिएक्ट हुक का उपयोग करने का कोई समाधान है, जिसे सीआरए से बाहर निकालने की आवश्यकता नहीं है?

@tschellenbach
आप बिना इजेक्ट किए CRA कॉन्फिगरेशन को अधिलेखित करने के लिए craco का उपयोग कर सकते हैं।
https://github.com/gsoft-inc/craco

@tsevdos के लिए धन्यवाद मैंने अपनी समस्या का समाधान किया है और एक प्रतिक्रिया पैकेज बनाने के तरीके पर एक ट्यूटोरियल बनाया है: https://youtu.be/esyS87NfBOw

मुझे यह समस्या हो रही थी और वेबपैक समाधान लागू नहीं हुआ क्योंकि मैं इसके बजाय पार्सल बंडलर का उपयोग कर रहा हूं। मैं अपने मुख्य ऐप के package.json में एक उपनाम निर्दिष्ट करके इसे ठीक करने में सक्षम था जो इस तरह दिखता था

    "alias": {
        "react": "./node_modules/react",
        "react-dom": "./node_modules/react-dom"
    },

अलग-अलग पैकेज जोंस के साथ एक ही प्रोजेक्ट में एक इलेक्ट्रॉन ऐप में मेरे रिएक्ट घटकों (हुक में लिखे गए) का उपयोग करने की कोशिश करने में समस्याएँ आ रही हैं। फ़ाइल संरचना इस तरह दिखती है:

- javascript
  - src
     - ComponentIWantToUse.tsx
      - package.json
- electron
   - src
     - IwantToUseItHere.tsx
      - package.json

package.json दोनों में package.json में प्रतिक्रिया और प्रतिक्रिया-डोम शामिल हैं लेकिन वे एक ही संस्करण हैं और जब मैं npm ls react करता हूं तो मुझे यह दो प्रतिक्रिया इंस्टॉल नहीं दिख रहा है। कोई विचार?

संपादित करें: @ ewan-m का समाधान काम किया!

तो मुझे लगता है कि मैं एक अजीब मामले में भाग गया हूं। एक तीसरे पक्ष के पुस्तकालय में दुर्भाग्य से मिश्रित कार्यात्मक और वर्ग आधारित घटक हैं। मेरे कोडबेस में मेरे घटक कार्यात्मक हैं। पुस्तकालय से एक वर्ग आधारित घटक एक लेआउट के रूप में कार्य करता है जो मेरे घटक को एक बच्चे के रूप में प्रस्तुत करता है। मेरा मानना ​​है कि यही 'त्रुटि: अमान्य हुक कॉल' को ट्रिगर कर रहा है। हुक का उपयोग करने के लिए मुझे उसके आसपास कैसे काम करना चाहिए, क्या मुझे मेरा वर्ग घटक में बदलने की ज़रूरत है?

@GrandathePanda मिक्सिंग क्लासेस और फंक्शनल कंपोनेंट्स मायने नहीं रखने चाहिए। यदि कोई वर्ग एक कार्यात्मक कॉल करता है, जो एक हुक कहता है, तो वहां कोई समस्या नहीं है। केवल एक चीज जो आप नहीं कर सकते, वह है सीधे कक्षा से एक हुक को कॉल करना।

ठीक है, @JeremyGrieshop तो मुझे अभी भी कुछ जांच करनी है, अगर मैं तीसरे पक्ष के घटक का उपयोग किए बिना प्रस्तुत करता हूं तो यह ठीक हो जाता है, इसलिए उस पुस्तकालय और मेरे कोड के बीच कुछ संघर्ष होता है। अगर मुझे लगता है कि वे शायद अपने पैकेज में एक अलग प्रतिक्रिया संस्करण का उपयोग कर रहे हैं।

ठीक है, @JeremyGrieshop तो मुझे अभी भी कुछ जांच करनी है, अगर मैं तीसरे पक्ष के घटक का उपयोग किए बिना प्रस्तुत करता हूं तो यह ठीक हो जाता है, इसलिए उस पुस्तकालय और मेरे कोड के बीच कुछ संघर्ष होता है। अगर मुझे लगता है कि वे शायद अपने पैकेज में एक अलग प्रतिक्रिया संस्करण का उपयोग कर रहे हैं।

ठीक है, यह देखने के लिए कि क्या कई संस्करण हैं, अपने ऐप से npm ls react react-dom जांचें। यह संभव है कि तृतीय-पक्ष लाइब्रेरी की किसी विशिष्ट संस्करण के साथ निर्भरता हो।

@JeremyGrieshop तो ऐसा लगता है कि मेरा एप्लिकेशन प्रतिक्रिया और डोम के लिए 16.12.0 का उपयोग कर रहा है और तृतीय-पक्ष (लोचदार खोज-यूआई) प्रतिक्रिया और डोम के लिए 16.8.0 का उपयोग करता है। अगर मैं सही हूं तो समस्या यह है कि चूंकि मेरी 16.8.0 तृतीय-पक्ष लाइब्रेरी 16.12.0 के साथ बनाए गए घटक को प्रस्तुत कर रही है, इससे समस्या होगी? वे एक लर्न मोनोरेपो भी हैं जो उपरोक्त सभी टिप्पणियों को पढ़ने के बाद संभावित रूप से इसे और भी जटिल बना देता है। यह मुद्दा मटेरियलुई में बनाए गए यूज़ स्टाइल हुक से उत्पन्न हो रहा है, वे बैकवर्ड संगतता के लिए स्टाइल के साथ एक आपूर्ति करते हैं और मुझे लगता है कि इस बीच मैं उस मार्ग पर जा रहा हूं। ऊपर उल्लिखित वेबपैक और या पैकेज जोंस में सभी परिवर्तन वास्तव में एक बैंडएड की तरह लगते हैं जो टूटने के लिए अधिक उत्तरदायी है, फिर बस इस बीच एक क्लासिक हॉक के साथ जा रहा है, जबकि हुक यह पता लगाते हैं कि इतने सारे अलग-अलग कार्यान्वयन क्विबल्स के सामने कैसे परिपक्व होना है।

@GrandathePanda IMHO, आपके विकल्प हैं (1) तीसरे पक्ष को अपनी प्रतिक्रिया निर्भरता को 16.12 पर अपडेट करने के लिए प्राप्त करें, या उन्हें यह तय करने के लिए कहें कि क्या यह एक सहकर्मी के रूप में निर्भरता से अधिक उपयुक्त है; (2) अपने ऐप में 16.8 का उपयोग करें ताकि वे समान lib संस्करण साझा करें; (3) प्रतिक्रिया की उनकी प्रति को हटा दें:

rimraf node_modules/search-ui/node_modules/react && rimraf node_modules/search-ui/node_modules/react-dom

उपरोक्त कमांड को आपके पैकेज के "स्क्रिप्ट्स" भाग के तहत "प्रीबिल्ड" और "प्रेस्टार्ट" में रखा जा सकता है। जेसन (जो कि मैं वर्तमान में कर रहा हूं)। नकारात्मक पक्ष (3), मुझे लगता है, अगर वे हैं 16.8 और 16.12 के बीच बहिष्कृत किसी भी चीज़ का उपयोग कर रहे हैं।

नमस्ते,

मेरे पास एक ऐप (myApp) है जो एक कस्टम लाइब्रेरी (myDepPackage) पर निर्भरता के रूप में उपयोग करता है। वे दोनों एक बिल्ड टूल के रूप में वेबपैक का उपयोग कर रहे हैं और निश्चित रूप से मुझे एक ही त्रुटि हो रही थी। उपरोक्त समाधानों में से किसी ने भी मेरे लिए काम नहीं किया। इसने क्या किया, वेबपैक को कस्टम लाइब्रेरी (myDepPackage) के अंतिम बंडल में प्रतिक्रिया शामिल नहीं करने के लिए बाध्य करना था। वेबपैक कॉन्फिगरेशन (myDepPackage की) में जोड़ने वाली एकमात्र कॉन्फ़िगरेशन लाइन नीचे दी गई है:

externals: {
  react: "react",
},

आप यहां "बाहरी" विकल्प के बारे में अधिक जान सकते हैं: https://webpack.js.org/configuration/externals/#externals

@tsevdos मैं तुमसे प्यार करता हूँ। आपने अभी कुछ दिनों की तीव्र परेशानी का अंत किया है। धन्यवाद।

हेलो सब लोग,

मैं एक घटक में एक हुक का उपयोग करने की कोशिश कर रहा हूं, इस घटक को gatsby-browser.js से निर्यात किया जाना है।

वर्तमान व्यवहार क्या है?

मुझे यह त्रुटि मिल रही है:

हैंडल न किया गया अस्वीकृति (त्रुटि): अमान्य हुक कॉल। हुक को केवल फ़ंक्शन घटक के शरीर के अंदर ही बुलाया जा सकता है। यह निम्न कारणों में से एक के कारण हो सकता है:

1. आपके पास रिएक्ट और रेंडरर के बेमेल संस्करण हो सकते हैं (जैसे रिएक्ट डोम)
2. आप कांटों के नियम तोड़ रहे होंगे
3. आपके पास एक ही ऐप में रिएक्ट की एक से अधिक कॉपी हो सकती हैं
   डिबग करने और इस समस्या को ठीक करने के बारे में सुझावों के लिए https://fb.me/react-invalid-hook-call देखें।

यह एक नमूना कोड है:

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';

import configureStore from './src/utils/configure-store';
import { useApiResources } from './src/hooks/use-api-resources';

const RootWrapper = ({ element }) => {
  const resources = useApiResources();
  const store = configureStore();
  return <Provider store={store}>{element}</Provider>;
};

RootWrapper.propTypes = {
  element: PropTypes.node.isRequired,
};

export default RootWrapper;

अपेक्षित व्यवहार क्या है?

हुक बिना किसी त्रुटि के चलना चाहिए, या उपयोगी त्रुटि संदेश प्रदान किए जाने चाहिए।

प्रतिक्रिया और प्रतिक्रिया-डोम निर्भरता के संस्करण 16.12.0 . हैं

@ leejh3224 बहुत बहुत धन्यवाद यार! घंटों की खोज के बाद मुझे यह उत्तर मिला, इसने मेरी समस्या का समाधान किया।
बस से HtmlWebpackPlugin कॉन्फिगरेशन को बदल दिया
inject: true से inject: 'head' और न्यूनतम प्रतिक्रिया त्रुटियां दूर हो गई हैं।

मैंने इसे काम करने की कोशिश करने के अपने अनुभव के साथ एक स्टैक ओवरफ्लो प्रश्न बनाया है। क्या यह उन लोगों के लिए संभव होगा जो इसे काम करने में कामयाब रहे हैं, इसे देखने और कुछ सलाह देने के लिए?

मैं प्रतिक्रिया करने के लिए एक jQuery आवेदन पोर्ट कर रहा हूँ। मेरे पास asJqueryPlugin नामक jQuery के भीतर प्रतिक्रिया घटकों को बेनकाब करने की उपयोगिता है। यहाँ फ़ाइल है:

import React from 'react'
import ReactDOM from 'react-dom'

/**
 * A way to render React components with props easily with jQuery
 *
 * ## Register the React Component
 *
 * In your React Component file, register the component with jQuery using `asJqueryPlugin`
 * ```
 * const Greeting = ({ person }) => <div>Hello {person}</div>
 * asJqueryPlugin('Greeting', Greeting, { person: "Bob" })
 * ```
 *
 * ## Rendering, Selecting and Updating Props with jQuery
 *
 * Select an element and render using the `react` function
 * ```
 * $('#greeting').react('Greeting', { person: 'Frank' })
 * ```
 */

window.reactRegistry = window.reactRegistry || {}

// This is how React components register themselves as available within jQuery
export default function asJqueryPlugin(componentName, Component) {
  window.reactRegistry[componentName] = { Component }
}

if (typeof window.$ !== 'undefined') {
  ;(function($) {
    // Add the plugin function jQuery
    $.fn.react = function renderReactIntoElements(componentName, props) {
      this.each(function render() {
        const entry = window.reactRegistry[componentName || $(this).data('react')]
        if (!entry) throw Error(`${componentName} component is not registered.`)
        ReactDOM.render(<entry.Component {...props} />, this)
      })
      return this
    }
  })(window.$)
}

वेबपैक में ऐप के कई प्रवेश बिंदु हैं, और लगभग 3-4 घटक अब इस तकनीक का उपयोग कर रहे हैं। जब घटकों को अलग-अलग एंट्रीपॉइंट बंडलों में बांधा जाता है, तो मेरा मानना ​​​​है कि जब समस्या होती है।

तो अगर मेरे पास वेबपैक में दो प्रवेश बिंदु हैं:

entry: {
      foo: './assets/js/foo',
      bar: './assets/js/bar'
}

फिर उन फाइलों में से प्रत्येक में हम एक उजागर घटक (प्रत्येक हुक का उपयोग करके) सेट करते हैं:

// foo.js
import React from 'react'
import asJqueryPlugin from '../utils/asJqueryPlugin'
const Foo = () => {
  const ref = useRef()
  return <div ref={ref}>Foo</div>
}
asJqueryPlugin('Foo', Foo)

// bar.js
... same stuff but with Bar component

अब यदि मैं एक ही पृष्ठ पर दोनों प्रविष्टियां शामिल करता हूं, और jQuery प्लगइन के माध्यम से दोनों घटकों को प्रस्तुत करने का प्रयास करता हूं ...

<script src="/bundles/foo.js" />
<script src="/bundles/bar.js" />
<script>
    $('#foo-container').react('Foo')
    $('#bar-container').react('Bar')
</script>

...मुझे यह हुक त्रुटि मिलती है।

सुनिश्चित नहीं है कि यह बातचीत में मदद करता है या नहीं, लेकिन कम से कम एक उपयोग के मामले को दिखाता है कि कैसे एक (संदिग्ध रूप से) समझदार देव खुद को कई प्रतिक्रिया उदाहरणों के साथ स्थिति में ले सकता है।

इससे मुझे मदद मिली - https://github.com/facebook/react/issues/13991#issuecomment -554928373
लेकिन मुझे निर्भरता से react और react-dom को भी हटाना पड़ा और उन्हें सहकर्मी निर्भरताओं में ले जाना और नोड मॉड्यूल को अनइंस्टॉल और पुनर्स्थापित करना पड़ा।

नमस्ते,
मैं बातचीत और वेब पर कई पोस्ट पढ़ता हूं और मैं अभी भी प्रतिक्रिया के कई उदाहरणों में त्रुटि के साथ फंस गया हूं।
मैं बग को पुन: उत्पन्न करने के लिए इस रेपो को आगे बढ़ाता हूं: https://github.com/jeromelegrand/dooliz-lib
मुझे आशा है कि किसी के द्वारा मेरी सहायता की जा सकती है।
धन्यवाद।

मुझे इस मुद्दे का सामना करना पड़ रहा है और उपरोक्त समाधानों के साथ कहीं भी नहीं मिलता है।
संक्षेप में: मुझे पूरा यकीन है कि मेरे पास केवल एक प्रतिक्रिया संस्करण चल रहा है, और मुझे प्रतिक्रिया-बूटस्ट्रैप का उपयोग करके त्रुटि मिलती है, जो शायद हुक का गलत उपयोग नहीं करती है, क्योंकि किसी और के पास समस्या नहीं है।

यह त्रुटि मेरे लिए नोड.जेएस बैकएंड पर होती है।

__ मैंने प्रतिक्रिया संस्करणों के आसपास क्या जाँच की__

मेरे पास कार्यक्षेत्रों के साथ एक यार्न सेटअप है, yarn list react या yarn list react-dom केवल एक उदाहरण दिखाता है।

क्या आयात किया गया है यह देखने के लिए मैंने कैश की आवश्यकता मुद्रित की है:

for(var key in require.cache) {
    if(key.indexOf("react") !== -1 && key.indexOf("index") !== -1) {
        console.log(key);
    }
}

मैं इसे प्रतिक्रिया-बूटस्ट्रैप से कुछ प्रस्तुत करने से ठीक पहले चलाता हूं, जो मेरे लिए अमान्य हुक त्रुटि का कारण बनता है, और यह लॉग करता है:

C:\web\resourceful\daCore\node_modules\react-dom\index.js
C:\web\resourceful\daCore\node_modules\react\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\react-is\index.js
C:\web\resourceful\daCore\node_modules\mini-create-react-context\dist\cjs\index.js
C:\web\resourceful\daCore\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\@fortawesome\react-fontawesome\index.js
C:\web\resourceful\daCore\node_modules\@tinymce\tinymce-react\lib\cjs\main\ts\index.js

जो इस बात की पुष्टि करता है कि केवल 1 प्रतिक्रिया संस्करण लोड किया गया है।

अंत में मैंने इसे node_modules/react-dom/index.js . में जोड़ा है

console.log("React DOM daCore");
global['React1'] = require('react');

और यह करने के लिए node_modules/react-router-dom/cjs/Form.js

require('react-dom');
global['React2'] = require('react');
console.log('#TEST '+(global['React1'] === global['React2']? 'SAME' : 'NOT SAME'));

जो SAME प्रिंट करता है

कोई विचार यह और क्या हो सकता है?
मैं इसे प्रतिक्रिया-बूटस्ट्रैप रेपो पर भी पोस्ट करूंगा।

इसलिए मुझे पूरा यकीन है कि रिएक्ट के दो इंस्टेंस होने से यहां कोई समस्या नहीं है। मुझे लगता है कि समस्या तब होती है जब दो प्रतिक्रियाएँ _roots_ होती हैं। क्या आप पृष्ठ के विभिन्न भागों में ReactDOM.render() कई बार कॉल कर रहे हैं? अगर ऐसा है, तो मुझे लगता है कि यह समस्या पैदा कर सकता है। मुझे लगता है कि हुक एक विशेष "रूट" से "संबंधित" होते हैं और उनमें से कई होने पर टूट जाते हैं और दो बंडल कुछ सामान्य कोड साझा करते हैं। मैं यहाँ अनुमान लगा रहा हूँ ...

... मुझे लगता है कि मुद्दा तब है जब दो प्रतिक्रिया _roots_ हैं। क्या आप पृष्ठ के विभिन्न भागों में ReactDOM.render() कई बार कॉल कर रहे हैं?

धन्यवाद @timkindberg इससे मुझे इसे हल करने में मदद मिली। मुझे एहसास हुआ कि मैं एक प्रारंभिक रेंडर करने के लिए प्रतिक्रिया-पेड़-वाकर का उपयोग कर रहा हूं और ReactDOMServer.renderToString के साथ अंतिम रेंडर करने से पहले आवश्यक डेटा प्राप्त कर रहा हूं

इस पैकेज के उपयोग को जल्दी से हटाने से त्रुटि दूर हो गई, और मुझे अब वही काम मिल गया है जो प्रतिक्रिया-एसएसआर-प्रीपास के साथ काम कर रहा है, जो वास्तव में अब प्रतिक्रिया-पेड़-वाकर रीडमी पृष्ठ पर अनुशंसित है

तो यह वास्तव में दो ReactDOM.render कॉल थे! अभी के लिए प्रतिक्रिया-एसएसआर-प्रीपास के साथ यह सेटअप मेरे लिए काम करता है, और जब सस्पेंस प्रतिक्रिया-डोम/सर्वर में आता है तो मैं उस पर स्विच कर सकता हूं

मैं अपने गुटेनबर्ग प्रोजेक्ट में react-compare-image https://github.com/junkboy0315/react-compare-image का उपयोग कर रहा हूं, लेकिन यह अजीब मुद्दा है, हालांकि जब भी मैं ReactCompareImage घटक को सेव फंक्शन से हटाता हूं तो सब कुछ काम करता है। एडिट फंक्शन पूरी तरह से काम करता है लेकिन सेव काम नहीं कर रहा है।

मैंने https://reactjs.org/warnings/invalid-hook-call-warning.html देखा और मुझे नहीं लगता, मुझे इनमें से कोई समस्या है।

यहाँ पूर्ण सहेजें फ़ंक्शन फ़ाइल है:

```आयात निरीक्षक "./निरीक्षक" से;
"प्रतिक्रिया" से आयात {टुकड़ा};
"प्रतिक्रिया-तुलना-छवि" से ReactCompareImage आयात करें;

/**

• वर्डप्रेस निर्भरता
  */
  कास्ट {__} = wp.i18n;

कॉन्स्ट सेव = ({वर्गनाम, विशेषताएँ}) => {

const {
    paddingTop,
    paddingRight,
    paddingBottom,
    paddingLeft,

    marginTop,
    marginRight,
    marginBottom,
    marginLeft,

    border,
    borderColor,
    borderType,
    background,

    backgroundImage,
    gradient,

    dividerColor,
    buttonColor,

    direction,

    beforeImage,
    beforeLabel,
    afterImage,
    afterLabel,

} = attributes;

const style = {
    "padding": `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
    "margin": `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
    "border": `${border}px ${borderType} ${borderColor}`,
    "background": background
};

return(
    <Fragment>
        <ReactCompareImage
            leftImage={beforeImage.url}
            leftImageLabel={beforeLabel}
            rightImage={afterImage.url}
            rightImageLabel={afterLabel}
            vertical={'vertical' === direction}
            sliderLineColor={dividerColor}
        />
    </Fragment>
);

};

निर्यात डिफ़ॉल्ट सहेजें;
```

मैं भी इस मुद्दे में भाग रहा हूँ। मेरे पास SO पर एक पुनर्कथन पोस्ट किया गया है: https://stackoverflow.com/questions/60331304/next-js-with-typescript-invalid-hook-call-hooks-can-only-be-call-inside-of-t

मेरे पास एक न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण भी है: https://github.com/coler-j/shopify_playground

माई मेन ऐप एक create-react ऐप है (बेदखल नहीं) जो एक साझा लाइब्रेरी आयात कर रहा था जिसमें रिएक्ट का भी इस्तेमाल किया गया था। मैं इसे इसके द्वारा हल करने में सक्षम था:

वेबपैक के बजाय लाइब्रेरी को पैकेज करने के लिए रोलअप का उपयोग करना
किसी कारण से मैंने अभी तक काम नहीं किया है, बाहरी का उपयोग करके लाइब्रेरी बंडल से रिएक्ट को नहीं हटाया।

रोलअप-config.js

export default [
  {
    input: 'src/index.js',
    output: {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    plugins: [external(), babel(), resolve(), commonjs(), svgr()],
  },
  {
    input: 'src/index.js',
    output: {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      alias({
        entries: [{ find: '<strong i="12">@components</strong>', replacement: 'src/components' }],
      }),
      external(),
      babel(),
      svgr(),
    ],
  },
]

मुख्य ऐप के वेबपैक को संशोधित करने के लिए क्रेको स्थापित करना और उसका उपयोग करना
craco.config.js

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}

मुझे क्रेको की ओर इशारा करने के लिए @arminyahya का धन्यवाद।

मैं एक सीडीएन से प्रतिक्रिया लोड करते समय हुक का उपयोग करने की कोशिश कर रहा हूं। यह उदाहरण (यह संपूर्ण HTML पृष्ठ है) Hooks can only be called inside of the body of a function component त्रुटि देता है जब Example() कहा जाता है। मैंने सब कुछ हटा दिया है, यहां तक ​​​​कि रिएक्टडॉम भी, इसलिए यह कल्पना करना मुश्किल है कि मेरे पास रिएक्ट की कई प्रतियां हो सकती हैं। क्या यह सिर्फ असंभव है?

<!DOCTYPE html>
<html>

<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

</body>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

  Example();
  </script>
</body>

</html>

@samkamin ऐसा इसलिए है क्योंकि आपके पास शून्य प्रतिक्रिया जड़ें हैं। आपको अपना आवेदन प्रस्तुत करना होगा। हालांकि, यह अभी भी एक अच्छी पुष्टि है कि हुक एक प्रतिक्रिया रूट पर भरोसा करते हैं (और युग्मित होते हैं)।

<html>
<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
</body>
  <div id="root"></div>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

    ReactDOM.render(<Example />, document.getElementById('root'))
  </script>
</body>
</html>

शुक्रिया! यह वास्तव में एक प्रतिक्रिया जड़ की कमी नहीं थी - मैंने इसे जितना संभव हो सके त्रुटि को सरल बनाने के दौरान हटा दिया - लेकिन कुछ समान रूप से गूंगा: <Example /> के बजाय, मैं सिर्फ Example() लिख रहा था

मेरे लिए कुछ भी काम नहीं लग रहा है। मैं अन्य परियोजनाओं में साझा करने और उपयोग करने के लिए एक घटक बना रहा हूं, लेकिन जब किसी अन्य परियोजना से स्थानीय रूप से परीक्षण करना काम नहीं करता है। मैं 16.13.0 प्रतिक्रिया के साथ हुक का उपयोग कर रहा हूँ।

webpack.config.js

module.exports = {
  entry: ENTRY,
  output: {
    library: LIBRARY_NAME,
    path: path.resolve(__dirname, OUTPUT_DIR),
    filename: OUTPUT_FILENAME,
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '<strong i="7">@src</strong>': path.resolve(__dirname, './src'),
      '<strong i="8">@components</strong>': path.resolve(__dirname, './src/components'),
      '<strong i="9">@core</strong>': path.resolve(__dirname, './src/core'),
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    },
    extensions: ['.js', '.json', '.tsx', '.ts'],
  },
  externals: {
    react: 'react',
  },
  target: 'node',
  plugins: [
    new HtmlWebPackPlugin({
      template: './tests/index.html',
      filename: 'index.html',
    }),
  ]}

कोई सुझाव? मैंने पुरानी चर्चाओं के सभी सुझावों का परीक्षण किया।
धन्यवाद! मुस्कराहट:

मैंने एक Settings.js को निम्नानुसार घोषित किया:

import React, {useState} from 'react';

import {
    View,
    Text,
    Switch
} from 'react-native';

export function Settings(props) {
    const [rememberPin, setRememberPin] = useState(false);
    let {changeView, header} = props;


    const toggleRememberPin = (value) => {
        setRememberPin(value);
    };

    return (
            <View>
                    <Text>Remember PIN:</Text>
                    <Switch
                        onValueChange={toggleRememberPin}
                        value={rememberPin}
                        ios_backgroundColor="#aeaeae"
                        />
            </View>
    );
}

export default {Settings};

मैं इसे App.js में निम्नानुसार आयात और उपयोग करता हूं:

import React, {Component} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Switch
} from 'react-native';

import Colors from './src/assets/Colors';
import {Settings} from './src/components/Settings';
...

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {viewsStack: this.viewsStack};
    }

    viewsStack = {
        SplashScreen: false,
        BindingInstructions: false,
        PinPad: false,
        Qr: false,
        Dashboard: false,
        Authorizations: false,
        Settings: true,
        Browsers: false,
        TransmitSDK: false,
        OTP: false,
    };

    changeView = (newView) => {
        let {viewsStack} = this.state;
        for (let key of Object.keys(viewsStack)) {
            viewsStack[key] = false;
        }
        viewsStack[newView] = true;
        this.setState(viewsStack);
    };

    render() {
        let {viewsStack} = this.state;
        return (
            <SafeAreaView style={styles.safeAreaView}>
                {viewsStack.SplashScreen && (splashScreen())}
                {viewsStack.BindingInstructions && (bindingInstructions({changeView: this.changeView}))}
                {viewsStack.PinPad && (pinPad({message: 'Inserisci un nuovo PIN', changeView: this.changeView}))}
                {viewsStack.Qr && (qr({header: 'QR Binding', message: 'Scansiona il QR dalla tua dashboard\noppure\ninserisci il codice manualmente.', changeView: this.changeView}))}
                {viewsStack.Dashboard && (dashboard({header: 'Profilo Utente', changeView: this.changeView}))}
                {viewsStack.Authorizations && (authorizations({header: 'Autorizzazioni', authorizations: [1, 2, 3, 4, 5, 6], changeView: this.changeView}))}
                {viewsStack.Settings && (Settings({header: 'Impostazioni', changeView: this.changeView}))}
            </SafeAreaView>
        );
    }
};
...

लेकिन मुझे मिलता है:

मैं उपयोग कर रहा हूँ:

"react": "16.9.0",
"react-native": "0.61.5"

क्या गलत है?

आप अपने Settings घटक को फ़ंक्शन के रूप में कॉल कर रहे हैं न कि फ़ंक्शन घटक के रूप में।

<Settings header='Impostazioni' changeView={this.changeView} />

सादे कार्यों के अंदर हुक की अनुमति नहीं है, केवल फ़ंक्शन घटकों में और जिस तरह से आप इसे ट्रिक्स कह रहे हैं, यह सोचकर प्रतिक्रिया करें कि आपका घटक वास्तव में एक सामान्य कार्य है।

हो सकता है कि यह किसी को सिरदर्द से बचाए, यदि आप प्रतिक्रिया-राउटर-डोम का उपयोग कर रहे हैं यदि आप इस तरह प्रस्तुत करने में अपना घटक पास करते हैं (उचित तरीके से नहीं) तो यह Invalid Hook Call Warning देगा
<Route path="/:cuid/:title" render={PostArticle} />

मुझे यह जानने में आधा घंटा लगा कि मैं कहां गलत हो गया

यह किसी की मदद कर सकता है - यदि आप प्रतिक्रिया-राउटर-डोम का उपयोग करने के बाद इस बग का अनुभव कर रहे हैं, तो जांचें कि आपने अपने मार्गों को कैसे परिभाषित किया है। उदाहरण के लिए यह <Route path={'/upgrade/:plan'} exact children={<Upgrade />} /> होना चाहिए जबकि मैं <Route path={'/upgrade/:plan'} exact children={Upgrade} /> . कर रहा था

यह विशेष रूप से अजीब है यदि आप सीएलआई बनाने के लिए स्याही या पेस्टल का उपयोग कर रहे हैं (देखें https://github.com/vadimdemedes/pastel/issues/2)। मैं इसे एक पीयरडिप नहीं बना सकता क्योंकि मैं प्रत्येक उपयोगकर्ता को रिएक्ट स्थापित करने के लिए नहीं कह सकता और मैं उन्हें एक निश्चित संस्करण / रिएक्ट की श्रेणी का उपयोग करने के लिए मजबूर नहीं कर सकता।

मेरी टीम यार्न का उपयोग कर रही है और केवल परीक्षणों में Invalid hook call त्रुटि प्राप्त कर रही थी, ऐप में नहीं। समस्या यह थी कि react-test-renderer react और react-dom से कम संस्करण में हल हो रहा था, इसलिए हमने package.json में package.json resolutions जोड़ा:

"devDependencies": {
    ...
    "react": "16.12.0",
    "react-dom": "16.12.0",
    ...
},
"resolutions": {
    "react-test-renderer": "16.12.0"
}

उपदिर में गैट्सबी का उपयोग करने वाले लोगों के लिए, यह एक संभावित समाधान है।

gatsby-node.js :

const path = require('path')
const fromRoot = name => path.resolve(__dirname + '/../node_modules/' + name)

exports.onCreateWebpackConfig = ({ actions }) => actions.setWebpackConfig({
  resolve: {
    alias: {
      'react': fromRoot('react'),
      'react-dom': fromRoot('react-dom'),
    },
  },
})

npm link कमांड निष्पादित करते समय मुझे एक ही समस्या है (एक समस्या है)

तब मैंने इस समस्या को हल करने के लिए प्रतिक्रिया द्वारा प्रदान किए गए आधिकारिक समाधान का उपयोग किया

यह समस्या तब भी आ सकती है जब आप npm लिंक या समकक्ष का उपयोग करते हैं। उस स्थिति में, आपका बंडलर दो प्रतिक्रियाएँ "देख" सकता है - एक एप्लिकेशन फ़ोल्डर में और एक आपके लाइब्रेरी फ़ोल्डर में। यह मानते हुए कि myapp और mylib सहोदर फोल्डर हैं, एक संभावित समाधान npm link ../myapp/node_modules/react mylib से चलाना है। यह पुस्तकालय को एप्लिकेशन की प्रतिक्रिया प्रति का उपयोग करना चाहिए।

यदि A को B का परिचय कराना है तो A और B भाई-बहन हैं）

• चरण 1 (बी में)
  
  
  
  • npm link ./../A/node_modules/react
  
  
  • npm link
  
  
• चरण 2 (ए में)
  npm link B

इससे मेरा काम बनता है

इन उत्तरों के साथ भी मैं अनिश्चित हूं कि मुझे त्रुटि क्यों मिल रही है। मेरे पास मेरी निर्भरता पुस्तकालय मेरे मुख्य ऐप से जुड़ा हुआ है और त्रुटि मिलने के बाद मैंने प्रतिक्रिया-दस्तावेज़ों का पालन किया और मेरे ऐप की प्रतिक्रिया पर मेरी निर्भरता पुस्तकालय के प्रतिक्रिया के संस्करण को जोड़ा ( npm link <>/webapp/node_modules/react चल रहा है। (यहां तक ​​​​कि प्रतिक्रिया के साथ भी किया- जब मैंने यह जांचने के लिए लॉग इन किया कि क्या React1 और React2 समान थे, तो इसने true लॉग किया, इसलिए मैं रिएक्ट के डुप्लिकेट संस्करणों का उपयोग नहीं कर रहा था, मैं रिएक्ट के समान संस्करणों का उपयोग कर रहा था, और मैं फ़ंक्शन घटकों का उपयोग कर रहा था इसलिए भले ही परीक्षण लॉगिंग ने संकेत दिया कि मेरे पास रिएक्ट का डुप्लिकेट संस्करण नहीं था, फिर भी मुझे हुक त्रुटि मिल रही थी।

लेकिन जैसा कि ऊपर बताया गया है, इस समाधान की कोशिश करना उस विशेष बग को ठीक करता है:

alias: {
        react: path.resolve('./node_modules/react')
 }

तो मैं घाटे में हूं।

तो मैं घाटे में हूं।

@orpheus क्या आप एक ही पृष्ठ में एक से अधिक प्रतिक्रिया रूट प्रस्तुत करते हैं? उर्फ क्या आपके पास एक ही पृष्ठ पर एक से अधिक ReactDOM.render कॉल हैं?

क्या आप एक ही पृष्ठ में एक से अधिक प्रतिक्रिया रूट प्रस्तुत करते हैं? उर्फ क्या आपके पास एक ही पृष्ठ पर एक से अधिक ReactDOM.render कॉल हैं?

@timkindberg

मैं नहीं। मेरे पास ReactDOM.render मेरे app के मूल में है, और lib मॉड्यूल जो मैं लिंक कर रहा हूं वह एक घटक पुस्तकालय है और ReactDOM.render का उपयोग नहीं करता है बिलकुल।

संपादित करें: मैं कुछ ऐसा कर रहा हूं:

import React from 'react'
import ReactDOM from 'react-dom'
import Root from './App/Root'

ReactDOM.render(
  <Root />,
  document.getElementById('root')
)

जहां <Root /> कुछ इस तरह प्रस्तुत करता है

const Root = () => {
  return <Provider store={store}>
        <PermissionsProvider>
              <Suspense fallback={null}>
                <Router history={history}>
                  <Routes store={store} />
                </Router>
              </Suspense>
        </PermissionsProvider>
  </Provider>
}

PermissionsProvider रिएक्ट घटक है जिसे मैं अपने लिंक किए गए lib मॉड्यूल से आयात करता हूं जो एक हुक का उपयोग करता है जिससे ऐप विफल हो जाता है। यह राज्य और संदर्भ बनाता है और अपने बच्चों को प्रस्तुत करता है।

नमस्ते, मैं प्रतिक्रिया हुक के साथ इलेक्ट्रॉन का उपयोग कर रहा हूँ। अगर मैं अपना हुक लिखता हूं, तो यह काम करता है। लेकिन जब मैं नोड_मॉड्यूल में अन्य पैकेज से हुक का उपयोग करता हूं, तो यह त्रुटि फेंकता है, जैसे react-use , swr ।

मुझे पैकेज को अपनी स्थानीय फाइल में कॉपी करना है।

क्या कोई इस समस्या से मिलता है?

उदाहरण परियोजना यहाँ:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

कोर कोड:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

प्रतिक्रिया और प्रतिक्रिया-डोम की डुप्लिकेट प्रतियों को हटाने के बाद भी मुझे अभी भी यह समस्या हो रही है। मैंने पुन: पेश करने के लिए एक सुपर सरल परीक्षण परियोजना बनाई।

$ tree -I node_modules
.
|-- test-app
|   |-- dist
|   |   |-- index.html
|   |   `-- main.js
|   |-- package-lock.json
|   |-- package.json
|   |-- src
|   |   |-- index.html
|   |   `-- index.js
|   `-- webpack.config.js
`-- test-lib
    |-- dist
    |   `-- main.js
    |-- package-lock.json
    |-- package.json
    |-- src
    |   `-- index.js
    `-- webpack.config.js

वर्तमान में, मैं वेबपैक उपनाम विधि का उपयोग कर रहा हूं, लेकिन मैंने npm link विधि का भी प्रयास किया है, और न ही काम किया है।

मैं भी इस मुद्दे पर आया था। मैं विचारों को प्रस्तुत करने के लिए एक्सप्रेसजेएस + पग का उपयोग कर रहा हूं, फिर मैंने एक रेंडरर (रिएक्टरेल के समान) लिखा है जो आपको घटक सर्वर और क्लाइंट साइड प्रस्तुत करने की अनुमति देता है।

मैंने इसे एक अलग पैकेज में निकालने की कोशिश की क्योंकि यह गड़बड़ हो रहा था, और मैं इस मुद्दे पर आया।

इसे ठीक करने के लिए, मुझे resolve कुंजी के तहत जोड़ना पड़ा:

alias: {
  react: path.resolve("./node_modules/react"),
},

यह अब सामान्य रूप से वेबपैक चलाते समय अपेक्षा के अनुरूप काम करता है, लेकिन समस्या अभी भी डॉक वॉल्यूम के साथ बनी रहती है। मैं इससे निपटने के लिए डॉकटर के लिए बहुत नया हूं, इसलिए बाद में इसे फिर से देखने जा रहा हूं।

संपादित करें: मैंने बहुत जल्दी बात की। यह अब रिएक्ट रेंडर के साथ ठीक काम करता है, लेकिन हाइड्रेट के साथ नहीं।

नमस्ते, मैं प्रतिक्रिया हुक के साथ इलेक्ट्रॉन का उपयोग कर रहा हूँ। अगर मैं अपना हुक लिखता हूं, तो यह काम करता है। लेकिन जब मैं नोड_मॉड्यूल में अन्य पैकेज से हुक का उपयोग करता हूं, तो यह त्रुटि फेंकता है, जैसे react-use , swr ।

मुझे पैकेज को अपनी स्थानीय फाइल में कॉपी करना है।

क्या कोई इस समस्या से मिलता है?

उदाहरण परियोजना यहाँ:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

कोर कोड:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

नमस्कार। मेरी भी यही समस्या थी। मैं इलेक्ट्रॉन-वेबपैक का उपयोग कर रहा हूं जो सभी मॉड्यूल को वेबपैक के लिए बाहरी के रूप में चिह्नित करता है। कुछ हार्डकोड अपवादों के साथ - जैसे प्रतिक्रिया और प्रतिक्रिया-डोम।
मेरे लिए इसका मतलब था कि मेरे कोड से लोड की गई प्रतिक्रिया ऐसे मॉड्यूल से लोड की गई प्रतिक्रिया से अलग थी।
इन मॉड्यूल को श्वेतसूची में जोड़ने से मदद मिलती है (सुनिश्चित नहीं है कि यह अभी तक कुछ और नहीं तोड़ा है :)

@ हुहले धन्यवाद, यह काम करता है! शायद हमें इलेक्ट्रॉन-वेबपैक में गोता लगाना चाहिए।

मैं बस इसे स्वयं काम करने में कामयाब रहा। मुझे लगता है कि जब लर्न और यार्न कार्यक्षेत्र की बात आती है तो यह बेहतर समाधानों में से एक है, और शायद कुछ टुकड़ों का उपयोग किसी अन्य समाधान के लिए किया जा सकता है।

यह सब मेरे द्वारा आयात किए जा रहे package.json प्रोजेक्ट के कॉन्फ़िगरेशन के लिए उबलता हुआ प्रतीत होता है। मुझे इन वर्गों को शामिल करने की आवश्यकता थी:

 "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "workspaces": {
    "nohoist": [
      "react", "react-dom"
    ]
  }

ऐसा करने के बाद, मुझे परियोजनाओं का पुनर्निर्माण करना पड़ा और मैं चल रहा था। ऐसा लगता है कि उन्हें सहकर्मी निर्भरता के रूप में सूचीबद्ध करने से उन्हें आपके उपभोग करने वाले प्रोजेक्ट द्वारा स्थापित करने की आवश्यकता होती है। और क्योंकि वे निर्भरता में सूचीबद्ध नहीं हैं, वे उस पैकेज के लिए उपलब्ध नहीं होने चाहिए जिसे आप आयात करने का प्रयास कर रहे हैं, लेकिन किसी कारण से जब तक आप इसे फहराने के लिए नहीं कहते हैं, वे उपलब्ध रहते हैं और एक नया प्रतिक्रिया उदाहरण अपना रास्ता बनाता है और त्रुटि का कारण बनता है।

आपको कामयाबी मिले!

मैं एक साधारण फीका-प्रभाव प्राप्त करने के लिए प्रतिक्रिया-वसंत का उपयोग करने की कोशिश कर रहा हूँ। कुछ भी काम का नहीं लगता।
'प्रतिक्रिया' से 'आयात प्रतिक्रिया, {useState, useEffect};
'प्रतिक्रिया-वसंत' से आयात {एनिमेटेड, उपयोग संक्रमण};

कॉन्स्ट टेक्स्टकंटेंट = (प्रॉप्स) => {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

डिफ़ॉल्ट टेक्स्ट सामग्री निर्यात करें; `

मैंने जाँचने की कोशिश की कि क्या मेरे पास प्रतिक्रिया के कई उदाहरण हैं। एनपीएम एलएस-आईएनजी मुझे बताता है कि मेरे पास प्रतिक्रिया और प्रतिक्रिया-डोम का सिर्फ एक ही संस्करण है, जो दोनों 16.13.1 पर हैं।

नमस्ते, मैं प्रतिक्रिया हुक के साथ इलेक्ट्रॉन का उपयोग कर रहा हूँ। अगर मैं अपना हुक लिखता हूं, तो यह काम करता है। लेकिन जब मैं नोड_मॉड्यूल में अन्य पैकेज से हुक का उपयोग करता हूं, तो यह त्रुटि फेंकता है, जैसे react-use , swr ।
मुझे पैकेज को अपनी स्थानीय फाइल में कॉपी करना है।
क्या कोई इस समस्या से मिलता है?
उदाहरण परियोजना यहाँ:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
कोर कोड:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

नमस्कार। मेरी भी यही समस्या थी। मैं इलेक्ट्रॉन-वेबपैक का उपयोग कर रहा हूं जो सभी मॉड्यूल को वेबपैक के लिए बाहरी के रूप में चिह्नित करता है। कुछ हार्डकोड अपवादों के साथ - जैसे प्रतिक्रिया और प्रतिक्रिया-डोम।
मेरे लिए इसका मतलब था कि मेरे कोड से लोड की गई प्रतिक्रिया ऐसे मॉड्यूल से लोड की गई प्रतिक्रिया से अलग थी।
इन मॉड्यूल को श्वेतसूची में जोड़ने से मदद मिलती है (सुनिश्चित नहीं है कि यह अभी तक कुछ और नहीं तोड़ा है :)

बहुत खूब! शुक्रिया

मैं एक साधारण फीका-प्रभाव प्राप्त करने के लिए प्रतिक्रिया-वसंत का उपयोग करने की कोशिश कर रहा हूँ। कुछ भी काम का नहीं लगता।
'प्रतिक्रिया' से 'आयात प्रतिक्रिया, {useState, useEffect};
'प्रतिक्रिया-वसंत' से आयात {एनिमेटेड, उपयोग संक्रमण};

कॉन्स्ट टेक्स्टकंटेंट = (प्रॉप्स) => {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

डिफ़ॉल्ट टेक्स्ट सामग्री निर्यात करें; `

मैंने जाँचने की कोशिश की कि क्या मेरे पास प्रतिक्रिया के कई उदाहरण हैं। एनपीएम एलएस-आईएनजी मुझे बताता है कि मेरे पास प्रतिक्रिया और प्रतिक्रिया-डोम का सिर्फ एक ही संस्करण है, जो दोनों 16.13.1 पर हैं।

मेरा भी यही विचार है। प्रतिक्रिया और प्रतिक्रिया-डोम मेरे लिए 16.13.1 पर हैं, और प्रतिक्रिया-वसंत का उपयोग करने का प्रयास यही त्रुटि लाता है।

styled-components पर एक और थ्रेड से, मैंने सीखा कि यदि आप file: package.json में अपने स्वयं के स्थानीय पैकेज का उपयोग कर रहे हैं, तो आपको rm -rf node_modules/local-package-name/node_modules की आवश्यकता है node_modules की जांच किए बिना कॉपी किया जाता है।

styled-components पर एक और थ्रेड से, मैंने सीखा कि यदि आप file: package.json में अपने स्वयं के स्थानीय पैकेज का उपयोग कर रहे हैं, तो आपको rm -rf node_modules/local-package-name/node_modules की आवश्यकता है node_modules की जांच किए बिना कॉपी किया जाता है।

हां, अकेले इस धागे में लगभग एक दर्जन उपयोग मामलों के लिए यह वही मुद्दा है। मैंने rm -rf (रिमराफ का उपयोग करके) करने के लिए "प्रीस्टार्ट" और "प्रीबिल्ड" लक्ष्य जोड़ा। इस थ्रेड में एक अन्य उपयोगकर्ता ने प्रतिक्रिया के समान उदाहरण को साझा करने के लिए मॉड्यूल प्राप्त करने के लिए अपने प्रीस्टार्ट में npm-link-shared का उपयोग किया। हम में से बहुत से मोनोरेपो उपयोगकर्ता इसमें भाग रहे हैं।

नमस्ते, मैं प्रतिक्रिया हुक के साथ इलेक्ट्रॉन का उपयोग कर रहा हूँ। अगर मैं अपना हुक लिखता हूं, तो यह काम करता है। लेकिन जब मैं नोड_मॉड्यूल में अन्य पैकेज से हुक का उपयोग करता हूं, तो यह त्रुटि फेंकता है, जैसे react-use , swr ।
मुझे पैकेज को अपनी स्थानीय फाइल में कॉपी करना है।
क्या कोई इस समस्या से मिलता है?
उदाहरण परियोजना यहाँ:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
कोर कोड:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

नमस्कार। मेरी भी यही समस्या थी। मैं इलेक्ट्रॉन-वेबपैक का उपयोग कर रहा हूं जो सभी मॉड्यूल को वेबपैक के लिए बाहरी के रूप में चिह्नित करता है। कुछ हार्डकोड अपवादों के साथ - जैसे प्रतिक्रिया और प्रतिक्रिया-डोम।
मेरे लिए इसका मतलब था कि मेरे कोड से लोड की गई प्रतिक्रिया ऐसे मॉड्यूल से लोड की गई प्रतिक्रिया से अलग थी।
इन मॉड्यूल को श्वेतसूची में जोड़ने से मदद मिलती है (सुनिश्चित नहीं है कि यह अभी तक कुछ और नहीं तोड़ा है :)

यह उन लोगों के लिए भी लागू होता है जिन्हें redux या redux टूलकिट और इलेक्ट्रॉन-वेबपैक से परेशानी है। मेरे पास निम्न कार्यशील कॉन्फ़िगरेशन है:

// package.json
...
"electronWebpack": {
  "whiteListedModules": ["react-redux"]
}

देखें https://github.com/electron-userland/electron-webpack/issues/349

मेरी समस्या यह थी कि मैंने लिखा

import React from 'React'

के बजाय:

import React from 'react'

कभी-कभी यह गूंगी बातें होती हैं।

मैंने इसे अपने वेबपैक कॉन्फ़िगरेशन में निम्नलिखित जोड़कर हल किया:

 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },

मैंने शुरू में सोचा था कि यह एनपीएम लिंक के साथ एक समस्या थी, जो कुछ भी सुझाया गया था, और यहां तक ​​​​कि यार्न पर भी स्विच किया गया था। आखिरकार लगा कि कुछ और चल रहा है जब npm को प्रकाशित करते समय किसी अन्य प्रोजेक्ट में आयात करते समय वही त्रुटि हुई।

क्या यहां किसी ने हाल ही में लर्न मोनोरेपो के साथ इसे हल किया है? मैंने बिना किसी किस्मत के कुछ सुझावों का प्रयास किया है।

नीचे दिए गए // के साथ टिप्पणी किए गए कोड को जोड़ने के बाद त्रुटि में चल रहा है। CssBaseline जोड़ना, और प्रतिक्रिया खंड जानकारी त्रुटि का कारण बनती है। जब यह टिप्पणी की जाती है तो सब कुछ ठीक चलता है। मूल कोड बस मूल एनपीएक्स क्रिएट-रिएक्शन-ऐप कोड है। इसके लिए पूरी तरह से नया और ऊपर से मेरे द्वारा किए गए कुछ सुधारों का कोई प्रभाव नहीं पड़ा।

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'./logo.svg' से लोगो आयात करें;
'@ सामग्री-यूआई/कोर/सीएसएस बेसलाइन' से सीएसएस बेसलाइन आयात करें;

निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () {
वापसी (

        //<React.Fragment>

        //<CssBaseline />

        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                    </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                    </a>
            </header>
        </div>

    //</React.Fragment>

);
}

स्थानीय परीक्षण के लिए:
पुस्तकालय में node_modules प्रतिक्रिया और प्रतिक्रिया-डोम फ़ोल्डर को हटा दें
मुख्य पैकेज में "यार्न इंस्टॉल" या "एनपीएम इंस्टॉल" फिर से चलाएं।

यह प्रतिक्रिया की दूसरी प्रति को मुख्य बंडल में लोड होने से रोकता है। स्पष्ट रूप से स्थायी फिक्स नहीं है लेकिन स्थानीय परीक्षण के लिए काम करता है।

लर्न का उपयोग करने वाले किसी भी व्यक्ति के लिए, एक पैकेज में परीक्षण चलाते समय आपको इस समस्या का सामना करना पड़ सकता है, जहां कोड दूसरे पैकेज में घटकों का संदर्भ देता है।

इस मामले में हमने जिस समस्या का अनुभव किया, वह प्रतिक्रिया के कारण कल्पना में आयात की जा रही थी, और घटक ट्री में एक घटक में आयात किया जा रहा था जो सामग्री UI के withStyles का उपयोग कर रहा था, जिसे सामग्री UI में हुक का उपयोग करके कार्यान्वित किया जाता है।

ऐसा लगता है कि प्रतिक्रिया आंतरिक रूप से ReactCurrentDispatcher.current चर में राज्य का प्रबंधन करती है, और यह प्रतिक्रिया के एक उदाहरण में सेट हो जाती है, लेकिन प्रतिक्रिया के दूसरे उदाहरण में उपयोग की जाती है - जब यह खाली होती है, तो यह Invalid hook call ... फेंकता है

हम बिल्ड समय पर क्रिएट रिएक्ट ऐप के वेबपैक कॉन्फिगरेशन को ओवरराइड करने के लिए पहले से ही क्रेको का उपयोग कर रहे थे:

  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },

हालाँकि, इस वेबपैक ओवरराइड का उपयोग केवल निर्माण समय पर किया जाता है - परीक्षण चलाते समय, कोड नहीं बनाया जाता है, लेकिन स्रोत से त्वरित किया जाता है - इसलिए हमारा समाधान हमारे craco.config.js में निर्दिष्ट करने के लिए क्रेकोअलियास का उपयोग करना था। परीक्षण के दौरान प्रतिक्रिया पथ:

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],

मैंने @apieceofbart के उदाहरण का अनुसरण करते हुए, बिना बेदखल किए, समाधान के रूप में @craco/craco का उपयोग किया। स्थानीय मॉड्यूल का परीक्षण करने के लिए npm link का उपयोग करके मेरे लिए निम्नलिखित कदम उठाए गए थे:

1. npm i @craco/craco --save . चलाकर मेरे डेमो ऐप में क्रेको इंस्टॉल करें
2. जहां पैकेज.जेसन डेमो ऐप में रहता है, वहां रूट करने के लिए कॉन्फ़िगरेशन फ़ाइल craco.config.js बनाएं।
3. मेरे डेमो ऐप में react-scripts को craco से बदलकर $ start , build और test स्क्रिप्ट बदलें।

// craco.config.js
const path = require('path');

module.exports = {
    webpack: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react')
        }
    }
}

// package.json
{
....
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...
}

संपादित करें: मैंने यह भी ध्यान नहीं दिया कि @jasondarwin का भी यही विचार था।

इस मुद्दे को ठीक करने की कोशिश में एक दिन का बेहतर समय बिताया। मेरा समाधान यहां पोस्ट करना अगर यह किसी की मदद करता है।

हम एक मोनोरेपो का उपयोग कर रहे हैं और दो पैकेज प्रतिक्रिया से अलग-अलग उदाहरण आयात कर रहे थे, लेकिन वे रूट नोड मॉड्यूल में एक ही स्थान पर हल कर रहे थे। पता चला कि हमारे पास ये दो उदाहरण थे क्योंकि एक ऐप बंडल बनाने के लिए अपने स्वयं के वेबपैक का उपयोग कर रहा था। यह रूट नोड मॉड्यूल में सही ढंग से फहराया जा रहा था, लेकिन उस पैकेज द्वारा आयात किए जाने पर इसका अपना उदाहरण प्राप्त होगा। समाधान में वेबपैक कॉन्फ़िगरेशन के बाहरी हिस्से में प्रतिक्रिया और प्रतिक्रिया डोम शामिल था ताकि वेबपैक बंडल के लिए प्रतिक्रिया का एक नया उदाहरण न बनाए।

externals: { react: 'react', reactDOM: 'react-dom', },

उम्मीद है कि यह किसी की मदद करता है!

मेरे लिए यह प्रतिक्रिया-हॉट-लोडर संस्करण 4.0.0 का उपयोग कर रहा था, प्रतिक्रिया-हॉट-लोडर 4.8 को अद्यतन करना चाल चल रहा है

मुझे केवल Invalid hook call संदेश प्राप्त हो रहा है, जब मैं एक कस्टम हुक पर अपने परीक्षण चला रहा हूं जिसे मैं मोडल विंडो के साथ काम करने के लिए बना रहा हूं।

व्यवहार को प्रदर्शित करने के लिए, मैंने निम्नलिखित में एक उदाहरण बनाया है:
(https://github.com/BradCandell/invalid-hook-example)

• react और react-dom . का केवल एक संस्करण

क्या मुझे कुछ बहुत स्पष्ट याद आ रहा है? जब मैंने अतीत में नियम तोड़ा है, तो npm start विफल हो जाएगा। लेकिन यह केवल मेरे परीक्षणों में विफल रहा है।

मैं मदद की सराहना करता हूँ!
-ब्राडो

मैंने इसे अपने वेबपैक कॉन्फ़िगरेशन में निम्नलिखित जोड़कर हल किया:

 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },

मैंने शुरू में सोचा था कि यह एनपीएम लिंक के साथ एक समस्या थी, जो कुछ भी सुझाया गया था, और यहां तक ​​​​कि यार्न पर भी स्विच किया गया था। आखिरकार लगा कि कुछ और चल रहा है जब npm को प्रकाशित करते समय किसी अन्य प्रोजेक्ट में आयात करते समय वही त्रुटि हुई।

इसने मेरे लिए इसे ठीक कर दिया। मैं प्रतिक्रिया-टोस्टिफ़ आयात कर रहा था और अमान्य हुक कॉल प्राप्त कर रहा था। मैं कंसोल त्रुटि में प्रत्येक आइटम से गुज़रा:

1. आपके पास रिएक्ट और रिएक्ट डोम के बेमेल संस्करण हो सकते हैं।
   
   
   
   1. हो सकता है कि आप हुक के नियम तोड़ रहे हों।
   
   
   2. आपके पास एक ही ऐप में रिएक्ट की एक से अधिक कॉपी हो सकती हैं।
   
   

तीसरा मुद्दा बनकर समाप्त हुआ। मैंने इसका पालन किया:
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

ऊपर दिए गए किसी भी समाधान ने मेरे लिए काम नहीं किया, जब तक मुझे एहसास नहीं हुआ कि मैं पुस्तकालय के साथ प्रतिक्रिया की एक और प्रति बंडल कर रहा था, मैं _importing_ था।
मैंने अपनी लाइब्रेरी के सोर्स कोड को ट्रांसपाइल और बंडल किया था, इसलिए डॉक्स पर सूचीबद्ध रिएक्ट के विभिन्न संस्करणों के लिए चेक $#$ false $#$ के बजाय true लौटा रहा था।
react को बाहरी निर्भरता के रूप में चिह्नित करना और इसे मेरी लाइब्रेरी के बंडल से बाहर छोड़ना चाल थी।

मेरा मामला एक मोनोरेपो नहीं था, बल्कि कुछ इसी तरह की स्थिति थी। हम एक नया UI ढांचा विकसित कर रहे हैं, और npm लिंक या लर्न का उपयोग करने के बजाय हम केवल वेबपैक उपनामों का उपयोग एक भाई फ़ोल्डर पर फ़ाइलों की आवश्यकता के लिए करते हैं। यह ठीक काम करता है, लेकिन आप इस समस्या में भाग लेंगे। सौभाग्य से @apieceofbart के समाधान ने हमारे लिए समस्या को ठीक कर दिया।

लाइन 130:21: रिएक्ट हुक "यूज स्टाइल्स" को फंक्शन "फार्मेसीडैशबोर्ड" में कहा जाता है, जो न तो रिएक्ट फंक्शन कंपोनेंट है और न ही कस्टम रिएक्ट हुक फंक्शन रिएक्ट-हुक / रूल्स-ऑफ-हुक
लाइन 133:45: रिएक्ट हुक "React.useState" को फंक्शन "फार्मेसीडैशबोर्ड" में कहा जाता है, जो न तो रिएक्ट फंक्शन कंपोनेंट है और न ही कस्टम रिएक्ट हुक फंक्शन रिएक्ट-हुक / रूल्स-ऑफ-हुक

यह त्रुटि है ..... क्या कोई इसे हल करने में मेरी मदद कर सकता है

@vyshnaviryali आप बेहतर तरीके से अपने फ़ंक्शन को कॉल करें usePharmacyDashboard

./src/components/HomeFiles/AppFooter.js
पंक्ति 1:1: नियम के लिए परिभाषा 'सामग्री-यूआई/नो-हार्डकोडेड-लेबल'' नहीं मिली सामग्री-यूआई/नो-हार्डकोडेड-लेबल'
क्या कोई इसे हल करने में मेरी मदद कर सकता है

हर किसी के लिए जो इस मुद्दे को npm link के साथ चला रहे हैं क्योंकि आपको अपने घटक में सुविधाओं को जोड़ने की आवश्यकता है लेकिन परीक्षण से पहले npm publish नहीं चाहते हैं, मुझे आश्चर्य है कि किसी ने yalc का उपयोग करने का सुझाव नहीं दिया है

हर किसी के लिए जो इस मुद्दे को npm link के साथ चला रहे हैं क्योंकि आपको अपने घटक में सुविधाओं को जोड़ने की आवश्यकता है लेकिन परीक्षण से पहले npm publish नहीं चाहते हैं, मुझे आश्चर्य है कि किसी ने yalc का उपयोग करने का सुझाव नहीं दिया है

मैंने वास्तव में पिछले साल किया था: https://github.com/facebook/react/issues/13991#issuecomment -535150839

हम इसे लगभग एक साल से बिना किसी समस्या के इस्तेमाल कर रहे हैं।

लर्न का उपयोग करते हुए यहां एक और; इसे ठीक करने के लिए, मैंने react और react-dom निर्भरता को अपने मूल package.json में स्थानांतरित कर दिया।

मेरे पास एक ही समस्या थी और मैंने इसे जोड़कर हल किया:

 alias: {
        react: path.resolve('./node_modules/react')
      }

मेरे मुख्य ऐप के वेबपैक कॉन्फ़िगरेशन में resolve संपत्ति के लिए।

यह स्पष्ट रूप से प्रतिक्रिया की दो प्रतियों का उपयोग करने की मेरी गलती थी, लेकिन मैं मानता हूं कि यदि त्रुटि संदेश बेहतर होता तो यह बहुत अच्छा होता। मुझे लगता है कि यह शायद इसी तरह है: #2402

उन लोगों के लिए जो उपरोक्त विधि का उपयोग कर रहे हैं लेकिन फिर भी जेस्ट चलाते समय त्रुटियां प्राप्त करते हैं, इन्हें जेस्ट के कॉन्फिगरेशन में moduleNameMapper में जोड़ें (यदि यह आवश्यक नहीं है तो प्रतिक्रिया-डोम को छोड़ दें):

moduleNameMapper: {

...

  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom",

...

}

मुझे हानि हो रही है। मुझे यह मिल रहा है लेकिन मेरा ऐप किसी भी हुक का उपयोग नहीं करता है और कोई प्रतिक्रिया या प्रतिक्रिया-डोम डुप्लीकेट नहीं है। मैं next.js का उपयोग कर रहा हूँ। क्या इसका इससे कोई लेना-देना हो सकता है?

npm ls react
npm ls react-dom

@maapteh वह मेरे लिए था? मैंने उन आदेशों को चलाया और कोई डुप्लीकेट नहीं मिला। दोनों पुस्तकालय संस्करण 16.13.1 पर हैं

@dancancro मैं Next.js का भी उपयोग कर रहा हूं और इसे ठीक करने में असमर्थ हूं।

npm ls react और npm ls react-dom दोनों ही केवल एक प्रविष्टि लौटाते हैं। लेकिन मुझे यकीन नहीं है कि यह सही है। विकास के लिए स्थानीय पैकेज से लिंक करते समय मैं इस त्रुटि में भाग लेता हूं। npm ls केवल एक प्रविष्टि लौटाता है, तब भी जब मैं निर्भरता में प्रतिक्रिया को मुख्य रेपो में वापस लिंक नहीं करता हूं। लेकिन जब मैं लिंक ठीक से प्रतिक्रिया करता हूं, तब भी मुझे त्रुटि मिलती है।

@justincy मेरे पास मेरे प्रोजेक्ट में कोई पैकेज लिंक नहीं है। मैं शर्त लगा रहा हूं कि यह Next.js से संबंधित है। समस्या दूर हो जाती है यदि मैं मुख्य घटक को typeof document !== 'undefined' के अंदर रखता हूं, प्रभावी रूप से Next.js के उद्देश्य को कमजोर करता है

मैं निर्भरता में node_modules से प्रतिक्रिया और प्रतिक्रिया-डोम को हटाकर अपनी समस्या को ठीक करने में कामयाब रहा। यह आदर्श नहीं है, लेकिन कम से कम मैं काम करना जारी रख सकता हूं।

@dancancro मुझे संदेह है कि आपकी समस्या Next.js के कारण हुई है। अगर ऐसा होता, तो बहुत से अन्य लोगों को समस्या होती। मैं केवल लिंक किए गए पैकेजों के कारण इसमें भाग रहा हूं। मुझे लिंक किए गए पैकेज के बिना त्रुटि दिखाई नहीं दे रही है।

अगर मैं मुख्य घटक के सात घटकों में से पांच को हटा दूं तो समस्या दूर हो जाएगी। मैं इन घटकों के बारे में कुछ खास नहीं देख सकता। इन घटकों को typeof document !== 'undefined' s में लपेटना भी काम करता है।

हाय टीम, मैं रिएक्ट संस्करण को 16.2.0 से 16.13.1 तक अपग्रेड करने की कोशिश कर रहा हूं, रिएक्ट-डोम के लिए भी ऐसा ही किया।
अब मेरे पास एक रैपर घटक है जिसे "/ परीक्षण" पर बुलाया जा रहा है

class TestWrapper extends React.Component { render() { return ( <React.Fragment> <TestComponent /> </React.Fragment> ) } }

परीक्षण आवरण में मैंने एक हुक के साथ एक कार्यात्मक घटक आयात किया है
function TestComponent(props) { useEffect(() => { console.log("TEST COMPONENT"); }); return ( <div> Hello world! </div> ) }

लेकिन जब पृष्ठ प्रस्तुत करता है UseEffect हुक काम नहीं करता है और त्रुटि होती है यानी अमान्य हुक कॉल चेतावनी
पुनश्च. :

1. मैंने जाँच की है कि मेरे पास प्रतिक्रिया की केवल एक प्रति है और प्रतिक्रिया-डोम स्थापित है
2. प्रतिक्रिया और प्रतिक्रिया-डोम संस्करण 16.13.1 . है

मेरे पास यही है
मैं तो बस ...
@@

मैं नेक्स्टजेएस का उपयोग करता हूं, इसलिए इसे रिएक्ट आयात करने की आवश्यकता नहीं है। और मैंने कोशिश की - मदद मत करो।

अन्य सभी पेज और फंक पूरी तरह से काम कर रहे हैं

@Brotipok अगला.जेएस का कौन सा संस्करण? (इसी तरह की समस्याएं देखना, लेकिन केवल 9.4.X से 9.5 पर जाने पर)

नमस्ते!

जब मैं एनपीएम एलएस करता हूं तो मुझे एक ही त्रुटि मिलती है, प्रतिक्रिया और प्रतिक्रिया डोम के लिए केवल एक पैकेज।

प्रतिक्रिया संस्करण: 16.13.1
प्रतिक्रिया-डोम संस्करण: 16.13.1

मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं और मैंने प्रोजेक्ट को create-react-app my-app --template typescript के साथ इनिशियलाइज़ किया है।

कार्यात्मक घटक केवल तभी काम कर रहे हैं जब मैं इसके भीतर हुक का उपयोग नहीं कर रहा हूं।

पैकेज.जेसन

{
"नाम": "ब्लब्लाब्लामोवी",
"संस्करण": "0.1.0",
"निजी": सच है,
"निर्भरता": {
"@ टेस्टिंग-लाइब्रेरी/जेस्ट-डोम": "^ 4.2.4",
"@ टेस्टिंग-लाइब्रेरी/रिएक्शन": "^9.5.0",
"@ टेस्टिंग-लाइब्रेरी/यूज़र-इवेंट": "^ 7.2.1",
"@types/jest": "^24.9.1",
"@ प्रकार/नोड": "^12.12.53",
"@ प्रकार/प्रतिक्रिया": "^16.9.43",
"@ प्रकार/प्रतिक्रिया-डोम": "^16.9.8",
"@ प्रकार/प्रतिक्रिया-राउटर-डोम": "^5.1.5",
"प्रतिक्रिया-आइकन": "^3.10.0",
"रिएक्शन-स्क्रिप्ट्स": "3.4.1",
"टाइपस्क्रिप्ट": "^ 3.7.5",
"वेबपैक-बंडल-विश्लेषक": "^ 3.8.0"
},
"स्क्रिप्ट": {
"प्रारंभ": "प्रतिक्रिया-स्क्रिप्ट प्रारंभ",
"बिल्ड": "रिएक्शन-स्क्रिप्ट बिल्ड",
"परीक्षण": "प्रतिक्रिया-स्क्रिप्ट परीक्षण",
"इजेक्ट": "रिएक्शन-स्क्रिप्ट्स इजेक्ट",
"विश्लेषण करें": "स्रोत-मानचित्र-एक्सप्लोरर 'बिल्ड/स्टेटिक/जेएस/*.जेएस'"
},
"एस्लिंटकॉन्फ़िग": {
"विस्तारित": "प्रतिक्रिया-ऐप"
},
"ब्राउज़र सूची": {
"उत्पादन": [
">0.2%",
"मरा नहीं",
"सभी op_mini नहीं"
],
"विकास": [
"पिछले 1 क्रोम संस्करण",
"पिछले 1 फ़ायरफ़ॉक्स संस्करण",
"पिछले 1 सफारी संस्करण"
]
}
}
मैं एक महत्वपूर्ण परियोजना है और यह मुझे थोड़ा पागल कर रहा है।
अगर कोई मदद कर सकता है तो बहुत अच्छा होगा।
धन्यवाद।

@Brotipok अगला.जेएस का कौन सा संस्करण? (इसी तरह की समस्याएं देखना, लेकिन केवल 9.4.X से 9.5 पर जाने पर)

यहाँ निर्भरता है
"निर्भरता": {
"अगला": "9.4.4",
"नेक्स्ट-इमेज": "^1.4.0",
"नोड-एसएएस": "^4.14.1",
"प्रतिक्रिया": "16.13.1",
"प्रतिक्रिया-दस्तावेज़-मेटा": "^3.0.0-बीटा.2",
"रिएक्शन-डोम": "16.13.1",
"प्रतिक्रिया-क्षैतिज-समयरेखा": "^1.5.3",
"प्रतिक्रिया-मेटा-टैग": "^0.7.4",
"react-onclickoutside": "^6.9.0"
},
"देव निर्भरता": {
"@ प्रकार/नोड": "^14.0.23",
"@ प्रकार/प्रतिक्रिया": "^16.9.43",
"टाइपप्रति": "^ 3.9.7"
}

मैं material-ui/core/Dialog घटकों को आयात करते समय इसी मुद्दे में भाग रहा हूं, मैंने विशेष रूप से react और react-dom दोनों के लिए प्रतिक्रिया 16.8.0 का उपयोग करने के लिए अपना package.json सेट किया है। react-dom आयात।

मैंने केवल एक आयात के साथ npm ls react और npm ls react-dom चलाया है मैंने त्रुटि पृष्ठ में वर्णित परीक्षण का भी प्रयास किया है:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

जो false लौटाता है, हालांकि मैं निर्भरता द्वारा आयात किए जा रहे "अलग" प्रतिक्रिया संस्करण को कैसे ट्रैक करूं?, ऐसा लगता है कि जब मैं सामग्री UI संवाद घटक आयात करता हूं, तो यह जैसे ही टैप होता है एक बटन जो इसे प्रतिपादन के लिए ट्रिगर करता है। मैं अन्य घटकों जैसे List और ListItems आदि का उपयोग करने में सक्षम हूं।

मैंने संकल्पों को ज़बरदस्ती करने की कोशिश की और इसने इसे ठीक भी नहीं किया।

मैं वेब पैक (वास्तव में छोटी परियोजना) का उपयोग नहीं कर रहा हूं, इसलिए निर्माण react-scripts build के साथ होता है यदि इससे कोई फर्क पड़ता है।

पुनर्लेखन: मैं बस अपने प्रश्न को समाधान संदर्भ के साथ बदल दूंगा (और शायद दस्तावेज़ों में और भी अधिक स्पष्टता के लिए अनुरोध, हमारे लिए डमी? :))

पृष्ठभूमि:
मैं एक संपत्ति में हुक के साथ एक कार्यात्मक घटक को वेबपैक-संकलित करने की कोशिश कर रहा था, जहां उस घटक को ब्राउज़र में वेनिला जेएस से बुलाया जा सकता था।

उदाहरण के लिए,

function Example() {
    const [count, setCount] = React.useState(0);

    return <button onClick={() => setCount(count + 1)}>
        You clicked {count} times
    </button>;
}
export default Example;

... जिसे मैं अपने आप में एक मॉड्यूल के रूप में निर्यात करना चाहता था, और उस संपत्ति को लोड करने के बाद, इसे सीधे HTML से उपयोग करें, जैसे:

<script defer>
            ReactDOM.render(
                ExportedCompiledExample.default(props),
                document.getElementById("my_element")
            );
</script>

मुझे यह बहुत समय पहले काम कर रहा था _ जब तक घटक में हुक नहीं था। लेकिन हुक का उपयोग करते समय मैं इस भयानक त्रुटि संदेश में भागता रहा।

टेबल-फ्लिपिंगली सरल समाधान
मैंने अधिक जटिल लाल झुंडों (एकाधिक प्रतिक्रिया/प्रतिक्रिया डीओएम संस्करण/उदाहरण, एनपीएम आयात और छिपी माध्यमिक निर्भरता, प्रतिक्रिया-हॉट-लोडर, वेबपैक सेटअप, बाहरी, विभिन्न बंडल/मॉड्यूल/लाइब्रेरी सम्मेलनों, पोस्ट-संकलन संरचना .. ।) यह कोशिश करने से पहले, जिसने काम किया:

export default () => <Example />;

(या export default props => <Example {...props} /> जहां लागू हो)।

पूर्वव्यापी 20/20 में यह समझ में आता है, मुझे लगता है।

लेकिन किसी और को इसकी आवश्यकता होने पर भ्रम के स्रोत को इंगित करने के लिए: नियम-के-हुक दस्तावेज़ कहते हैं _उन्हें फ़ंक्शन घटक के शरीर में शीर्ष स्तर पर कॉल करें_। जो मैंने सोचा था कि मैंने किया, क्योंकि मैंने वास्तव में सीधे अपनी संरचना में उदाहरण चिपकाया था।

मेरी व्याख्या यह है कि यह , उदाहरणों से...

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

... अपने आप में एक फ़ंक्शन घटक नहीं है? यह सही कॉलिंग संदर्भ में ऐसा हो जाता है (इसलिए, Example() नहीं बल्कि <Example /> )।

मुझे लगता है कि मैंने इसे डॉक्स में कहीं और याद किया होगा, लेकिन अगर ऐसा नहीं होता है: अगर थोड़ा सा उपयोग संदर्भ (या सिर्फ एक ईएस मॉड्यूल सेटअप) शामिल/उल्लेख/लिंक किया गया होता तो यह मुझे बहुत समय बचाता। :) खासकर जब से प्रत्यक्ष export default Example संस्करण बिना हुक के काम करता है।

एक कार्य समाधान @apieceofbart के लिए धन्यवाद! मेरा मुद्दा एनपीएम लिंक से संबंधित था।

यहां बताया गया है कि मैंने इसे क्रिएट रिएक्ट ऐप के साथ कैसे काम किया, जहां वेबपैक कॉन्फ़िगरेशन डिज़ाइन द्वारा छिपा हुआ है। यह आपका समाधान भी हो सकता है @florianzemma?

1. npm install -D react-app-rewired
2. अपने प्रोजेक्ट रूट में config-overrides.js नाम की एक फाइल बनाएं।

// config-overrides.js
module.exports = function override(config, env) {
  const path = require('path');

  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        react: path.resolve('./node_modules/react')
      }
    }
  };
}

1. प्रासंगिक react-scripts ... -commands को package.json में react-app-rewired ... से बदलें।

मुझे उम्मीद है यह मदद करेगा

मुझे यह त्रुटि मिली क्योंकि मैंने बंडलों को 2 बार लोड किया।
मेरे मामले में ऐसा इसलिए हुआ क्योंकि ननजक्स टेम्प्लेट जहां स्क्रिप्ट टैग प्रदान किए गए थे, 2 बार उपयोग किया गया है - लेआउट में ही, और हेड टैग सामग्री के लिए सामान्य टेम्पलेट में,

यार्न वर्कअराउंड

मैं यार्न का उपयोग कर रहा हूं, और मेरे package.json में संकल्प को मजबूर करके इसे ठीक किया है:

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

पैरेंट ऐप (लाइब्रेरी की खपत) में रिज़ॉल्यूशन जोड़ने के अलावा, मैंने निम्नलिखित कमांड के साथ लाइब्रेरी निर्भरता को अपडेट किया:

1. yarn add link:/path/to/parent-app/node_modules/react
2. yarn add link:/path/to/parent-app/node_modules/react-dom

इसके बाद मैंने yarn add link:/path/to/library . के साथ पैरेंट ऐप पर लाइब्रेरी को फिर से लिंक किया

नमस्ते
मैं यार्न कार्यक्षेत्रों के साथ एक ही समस्या का सामना कर रहा हूं।
मेरे पास इस तरह का एक लेआउट है:

कार्यक्षेत्र/
पुस्तकालय/
ऐप1/
ऐप 2/

app1 और app2 में v16.9.0, प्रतिक्रिया-डोम v16.9.0 और 'लाइब्रेरी' पर प्रतिक्रिया करने के लिए प्रत्यक्ष निर्भरता है।
'लाइब्रेरी' में v16.9.0 पर प्रतिक्रिया करने के लिए एक सहकर्मी निर्भरता है, लेकिन कहानी की किताब पर एक देव निर्भरता भी है।
समस्या कहानी की किताब से आती है, जिसकी प्रतिक्रिया v16.13.1 पर निर्भरता है।
हालांकि, जब मैं यार्न इंस्टॉल चलाता हूं, तो मैं अपने शीर्ष स्तर के नोड_मॉड्यूल में प्रतिक्रिया 16.13.1 के साथ समाप्त होता हूं और ऐप 1 और ऐप 2 के स्थानीय नोड_मॉड्यूल में 16.9.0 पर प्रतिक्रिया करता हूं।

जब मैं ऐप 1 (सीआरए के साथ बनाया गया) चलाता हूं, तो यह अपने स्थानीय प्रतिक्रिया v16.9.0 का उपयोग कर रहा है, लेकिन 'लाइब्रेरी' के घटक रिएक्ट v16.13.1 का उपयोग कर रहे हैं

ऐसा लगता है कि मुझे यार्न उत्थापन तर्क, क्रिएट-रिएक्शन-ऐप्स की वेबपैक परिभाषा या दोनों में कोई समस्या है?
किसी को भी इस परिदृश्य के लिए कामकाज का कोई विचार है?

नमस्ते
मैं यार्न कार्यक्षेत्रों के साथ एक ही समस्या का सामना कर रहा हूं।
मेरे पास इस तरह का एक लेआउट है:

कार्यक्षेत्र/
पुस्तकालय/
ऐप1/
ऐप 2/

app1 और app2 में v16.9.0, प्रतिक्रिया-डोम v16.9.0 और 'लाइब्रेरी' पर प्रतिक्रिया करने के लिए प्रत्यक्ष निर्भरता है।
'लाइब्रेरी' में v16.9.0 पर प्रतिक्रिया करने के लिए एक सहकर्मी निर्भरता है, लेकिन कहानी की किताब पर एक देव निर्भरता भी है।
समस्या कहानी की किताब से आती है, जिसकी प्रतिक्रिया v16.13.1 पर निर्भरता है।
हालांकि, जब मैं यार्न इंस्टॉल चलाता हूं, तो मैं अपने शीर्ष स्तर के नोड_मॉड्यूल में प्रतिक्रिया 16.13.1 के साथ समाप्त होता हूं और ऐप 1 और ऐप 2 के स्थानीय नोड_मॉड्यूल में 16.9.0 पर प्रतिक्रिया करता हूं।

जब मैं ऐप 1 (सीआरए के साथ बनाया गया) चलाता हूं, तो यह अपने स्थानीय प्रतिक्रिया v16.9.0 का उपयोग कर रहा है, लेकिन 'लाइब्रेरी' के घटक रिएक्ट v16.13.1 का उपयोग कर रहे हैं

ऐसा लगता है कि मुझे यार्न उत्थापन तर्क, क्रिएट-रिएक्शन-ऐप्स की वेबपैक परिभाषा या दोनों में कोई समस्या है?
किसी को भी इस परिदृश्य के लिए कामकाज का कोई विचार है?

इसके लिए मुझे एकमात्र समाधान मिला yarn run eject CRA ऐप और resolve सेक्शन के ऑर्डर को यहां से स्विच करना:

```जावास्क्रिप्ट
मॉड्यूल: ['नोड_मॉड्यूल्स', पाथ.एपनोडमॉड्यूल्स]। कॉन्कैट (
मॉड्यूल.अतिरिक्तमॉड्यूलपाथ || []
),
````

प्रति
```जावास्क्रिप्ट
मॉड्यूल: [paths.appNodeModules, 'node_modules'].concat(
मॉड्यूल.अतिरिक्तमॉड्यूलपाथ || []
),
````

यह मेरे लिए अजीब लगता है कि 'appNodeModules' सर्वोच्च प्राथमिकता नहीं है - निश्चित रूप से प्रश्न में वास्तविक ऐप को निर्भरताओं को हल करने के लिए स्थगित कर दिया जाना चाहिए?

मुझे वेबपैक और इलेक्ट्रॉन से जुड़ी सेटिंग में 'हुक' समस्या का सामना करना पड़ा। मेरी परियोजना में मॉड्यूल ए पर निर्भरता है जो स्वयं वेबपैक द्वारा बंडल की गई है (और जिसे मैंने स्वयं लिखा है)। मैंने ए से रिएक्ट को एक्सटर्नलाइज़ किया (इसे कॉमनज 2 मॉड्यूल घोषित किया)। यह लाइब्रेरी बंडल से रिएक्ट फ़ाइलों को बाहर करता है।

मेरा मुख्य कार्यक्रम, इलेक्ट्रॉन रेंडरर प्रक्रिया में चल रहा है, रिएक्ट का भी उपयोग करता है। मेरे पास वेबपैक में बंडल में रिएक्ट शामिल था (कोई विशेष कॉन्फ़िगरेशन नहीं)।

हालाँकि, इसने रनटाइम वातावरण में रिएक्ट के दो उदाहरणों के कारण 'हुक' समस्या उत्पन्न की।

यह इन तथ्यों के कारण होता है:

• मॉड्यूल ए को 'रिएक्ट' की आवश्यकता होती है और इसे इलेक्ट्रॉन के मॉड्यूल सिस्टम द्वारा हल किया जाता है। तो इलेक्ट्रॉन नोड_मॉड्यूल्स से प्रतिक्रिया लेता है;
• मुख्य कार्यक्रम बंडल से ही प्रतिक्रिया को 'लोड' करने के लिए वेबपैक रनटाइम पर निर्भर करता है।
• इलेक्ट्रॉन और वेबपैक रनटाइम दोनों का अपना मॉड्यूल कैश होता है...

मेरा समाधान मुख्य कार्यक्रम से भी प्रतिक्रिया को बाहरी बनाना था। इस तरह, मुख्य कार्यक्रम और मॉड्यूल ए दोनों को इलेक्ट्रॉन से अपनी प्रतिक्रिया मिलती है - स्मृति में एक ही उदाहरण।

मैंने कई उपनामों की कोशिश की, लेकिन यह समस्या का समाधान नहीं करता है क्योंकि उपनाम केवल वेबपैक को निर्देश देता है कि मॉड्यूल कोड कहां खोजा जाए। यह एकाधिक मॉड्यूल कैश की समस्या के संबंध में कुछ नहीं करता है!

यदि आप एक मॉड्यूल के साथ इस समस्या में भाग लेते हैं जिसे आप नियंत्रित नहीं कर सकते हैं, तो पता करें कि प्रतिक्रिया बाहरी है या नहीं। यदि यह बाहरी नहीं है, तो मुझे लगता है कि आप इस समस्या को इलेक्ट्रॉन के संदर्भ में हल नहीं कर सकते। यदि यह सिर्फ एक वैश्विक के रूप में बाहरी है, तो प्रतिक्रिया को अपनी .html फ़ाइल में डालें और अपना मुख्य कार्यक्रम भी उसी पर निर्भर करें।

आखिरकार...

//webpack.config.js

module.exports = {
  ...
  externals: {
      react: 'react',
  },
}

Vue3 में भी यही समस्या है

मैंने इस समस्या को react और react-dom के रूप में peerDependencies के रूप में अपने बाहरी पुस्तकालय के पैकेज.जेसन में डालकर हल किया, जो प्रतिक्रिया का उपयोग करता है।

  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

मुझे लगता है कि मैंने इसे डॉक्स में कहीं और याद किया होगा, लेकिन अगर ऐसा नहीं होता है: अगर थोड़ा सा उपयोग संदर्भ (या सिर्फ एक ईएस मॉड्यूल सेटअप) शामिल/उल्लेख/लिंक किया गया होता तो यह मुझे बहुत समय बचाता। :) खासकर जब से प्रत्यक्ष export default Example संस्करण बिना हुक के काम करता है।

हाय @ एस्पेन42 ,
मैं वास्तव में उम्मीद कर रहा था कि आपका समाधान हमारी मदद करेगा। जैसा आपने बताया, हमने सचमुच _everything_ की कोशिश की।

दुर्भाग्य से, आपका समाधान भी मदद नहीं करता है। मुझे आश्चर्य है कि शायद मुझे कुछ याद आया?

तो, एक पैकेज में (मैं इसे @bla/bla कहूंगा), हमारे पास index.js है जिसमें हुक के साथ एक घटक है, जैसे

function Bla = ({...props]) => {
const [bla, setBla] = useState(false);
return bla ? <div {...props} /> : 'no luck';
}

हम npx babel का उपयोग करके पैकेज को संकलित करते हैं।

हम इस पैकेज को npm link से जोड़ते हैं और फिर इसे npm link @bla/bla जैसे प्रोजेक्ट में शामिल करते हैं।
पैकेज और प्रोजेक्ट दोनों ही रिएक्ट और रिएक्ट-डोम के एक ही संस्करण का उपयोग करते हैं।

परियोजना में, हम इस तरह के पैकेज को शामिल करते हैं:

import Bla from `@bla/bla`

const RenderBla = ({...props}) => <Bla {...props} />

export default RenderBla

दुर्भाग्य से, त्रुटि अभी भी बनी हुई है।
Invalid hook call. Hooks can only be called inside of the body of a function component.

हम क्या खो सकते हैं?

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

इसने मेरे लिए इस मुद्दे को ठीक कर दिया, बहुत-बहुत धन्यवाद यार ❤️

बाहरी लिंक (शेयरपॉइंट ऑनलाइन) के माध्यम से एक्सेस किए जाने पर फ़ील्ड कस्टमाइज़र त्रुटि

कुछ फैब्रिक ui घटक के साथ एक spfx फ़ील्ड कस्टमाइज़र एक्सटेंशन, जब लिंक के माध्यम से एक्सेस किया जाता है, तो फ़ैब्रिकयूआई संस्करण के आधार पर इनमें से एक त्रुटि प्राप्त होती है:
https://reactjs.org/docs/error-decoder.html/?invariant=321 ,
https://reactjs.org/docs/error-decoder.html/?invariant=290&args []=A.%20General

जब पृष्ठ ताज़ा होता है, तो सब कुछ ठीक से काम करता है।
मैंने कोड में किसी भी रिएक्ट हुक का उपयोग नहीं किया है, केवल रिएक्ट कंपोनेंट्स।
किसी भी रेफरी का उपयोग नहीं किया है।

मुझे लगता है कि यह फैब्रिक यूआई कारण के कारण हो सकता है जब सभी कपड़े यूआई घटकों को हटा दिया जाता है, कोई त्रुटि नहीं होती है।

फैबिक यूआई, 6.189.2, 6.214.0 और 7.114.1 के विभिन्न संस्करणों की कोशिश की है और सभी फैब्रिक-यूआई संदर्भों को धाराप्रवाह यूआई के साथ बदलने की कोशिश की है, फिर भी समस्या बनी रहती है

प्रतिक्रिया संस्करणों की जाँच की, यहाँ आउटपुट है
एनपीएम एलएस प्रतिक्रिया
+-- @माइक्रोसॉफ्ट/एसपी-वेबपार्ट- वर्कबेंच @1.9.1
| +-- @माइक्रोसॉफ्ट/ऑफिस-यूआई-फैब्रिक-रिएक्ट-बंडल@ 1.9.1
| | -- [email protected] deduped | +-- @microsoft/[email protected] | | -- प्रतिक्रिया@16.8.5 प्रतिपादित
| +-- @Microsoft/sp-property-pane@ 1.9.1
| | -- [email protected] deduped | -- प्रतिक्रिया@16.8.5 प्रतिपादित
`-- प्रतिक्रिया@16.8.5

नमस्ते,
मैं भी इस कष्टप्रद त्रुटि पर ठोकर खाई। मेरे मामले में यह अंत में मेरे वेबपैक बिल्ड का मिस-कॉन्फ़िगरेशन भी था। लेकिन इस मुद्दे में सुझाई गई चीजों में से किसी ने भी मेरे लिए काम नहीं किया है। इसलिए मैं अपना अनुभव भी साझा करना चाहता हूं।

मेरे पृष्ठ में एकाधिक प्रवेश बिंदु शामिल हैं, और स्प्लिटचंकप्लगिन रनटाइम भाग बना सकता है। चूंकि हम रेल-वेबपैकर मणि का उपयोग कर रहे हैं, इसलिए इसे प्रत्येक खंड के लिए रनटाइम बनाने के लिए डिफ़ॉल्ट रूप से कॉन्फ़िगर किया गया था। लेकिन वेबपैक डिफ़ॉल्ट रूप से कुछ ऐसा ही करता है, इसमें विखंडू के अंदर रनटाइम शामिल होता है।

बेशक दस्तावेज़ीकरण इस मामले के बारे में चेतावनी देता है, लेकिन आपको इसे ढूंढना होगा। optimization.runtimeChunk को single पर सेट करने से एक अलग रनटाइम बन जाएगा। एकाधिक प्रवेश बिंदुओं से प्रतिक्रिया का उपयोग करते समय, यह आपके निर्माण को प्रतिक्रिया की कई प्रतियों को तत्काल रोक देगा।

देखें https://webpack.js.org/configuration/optimization/#optimizationruntimechunk

ज़रा सुनिए सभी,
मुझे समस्या है कि मैं एक सीडीएन से आने वाले बाहरी lib का उपयोग करना चाहता हूं और <script> टैग के साथ शामिल है, इसलिए कोड के साथ मैं बहुत कुछ नहीं कर सकता। lib प्रतिक्रिया और हुक का उपयोग करता है, इसलिए मुझे मिलता है
3. You might have more than one copy of React in the same app त्रुटि।
अफसोस की बात है कि पुस्तकालय के लिए कोई एनपीएम पैकेज नहीं है: https://github.com/Anyline/anyline-ocr-anylinejs-module
मैं सीआरए का उपयोग कर रहा हूं और परियोजना को बाहर नहीं निकाला गया है।

सैंडबॉक्स का एक छोटा सा उदाहरण बनाया।

यह उसी त्रुटि को फेंकता है क्योंकि अन्य पैकेज भी हुक का उपयोग कर रहा है लेकिन अपने स्वयं के रिएक्ट के साथ। मुझे अपना पैकेज एनपीएम को प्रकाशित करना था और फिर इसे सीधे एनपीएम से आयात करना था। वह

मैं हाल ही में इस मुद्दे पर आया हूं और मुझे आश्चर्य है कि क्यों।
मैंने इसे GitLab पर अपलोड करके और पते से इंस्टॉल करके इसे हल किया।
पैकेज और स्थानीय पैकेज में क्या अंतर है?

मैंने पाया है कि मुझे "अमान्य हुक कॉल" मिलता है। जब मैं हुक को कॉल करने वाले घटक को गतिशील रूप से लोड करता हूं।

कोड सैंडबॉक्स

परीक्षण जो "ऐप" लोड करता है वह स्थिर रूप से गुजरता है। दो परीक्षण जो इसे गतिशील रूप से लोड करते हैं (एक require का उपयोग करके, एक फ़ंक्शन के रूप में import का उपयोग करके) दोनों त्रुटि देते हैं।

मैं भी परवाह क्यों करता हूं: मैं कुछ परीक्षण लिखने की कोशिश कर रहा हूं जहां मैं कुछ चीजों को नकल करने के लिए jest.doMock का उपयोग कर रहा हूं और फिर उस मॉड्यूल को गतिशील रूप से लोड कर रहा हूं जिसे मैं दस्तावेज़ीकरण के अनुसार परीक्षण करना चाहता हूं। मैं नकली के बजाय डूमॉक का उपयोग कर रहा हूं क्योंकि मुझे अलग-अलग कार्यों में चीजों को अलग-अलग नकल करने में सक्षम होना चाहिए। आप देखेंगे कि त्रुटि बिना किसी उपहास के होती है, हालांकि।

यह उसी त्रुटि को फेंकता है क्योंकि अन्य पैकेज भी हुक का उपयोग कर रहा है लेकिन अपने स्वयं के रिएक्ट के साथ। मुझे अपना पैकेज एनपीएम को प्रकाशित करना था और फिर इसे सीधे एनपीएम से आयात करना था। वह

मैं हाल ही में इस मुद्दे पर आया हूं और मुझे आश्चर्य है कि क्यों।
मैंने इसे GitLab पर अपलोड करके और पते से इंस्टॉल करके इसे हल किया।
पैकेज और स्थानीय पैकेज में क्या अंतर है?

@catsheue आपके लिए React1 === React2 true था?
मेरे पास मेरा एनपीएम में प्रकाशित नहीं हुआ था, फिर भी मैं जानना चाहता था कि क्या इसका कारण है?

मेरा React1 === React2 = true लगता है और समाधान नहीं मिला है कि ऐसा क्यों हो रहा है जब मैं एक परियोजना में अपनी प्रतिक्रिया पुस्तकालय आयात कर रहा हूं

स्थानीय पुस्तकालय का परीक्षण करने के लिए yarn link का उपयोग करने में यही समस्या थी। मेरी गलती react और react-dom को देव निर्भरता के रूप में सूचीबद्ध नहीं कर रही थी।

तो मुझे yarn add --peer react react-dom करना चाहिए था। अंत में, क्योंकि मैंने पहले से ही एक देव निर्भरता के रूप में प्रतिक्रिया करने में गलती की है, मुझे अपने पुस्तकालय से नोड_मॉड्यूल को शुद्ध करने की आवश्यकता है। rm -rf node_modules; yarn ने मेरे लिए समस्या का समाधान किया।

मुझे भी इस मुद्दे का सामना करना पड़ा। मेरे मामले में यह स्टोरीबुक (v6.0.28) से डुप्लिकेट रिएक्ट के कारण हुआ था। मुझे विश्वास है कि आप यहां अधिक जानकारी प्राप्त कर सकते हैं।

मैंने स्टोरीबुक निर्भरता को अनइंस्टॉल कर दिया, node_modules को हटा दिया और yarn install को फिर से चलाया। यह मेरे लिए काम किया। मुझे आशा है कि यह किसी को इस पर आँसू और बर्बाद घंटे से बचने में मदद करता है।

यह कामकाज मेरे लिए भी काम करता है। मैं फायरबेस फ़ंक्शंस का उपयोग कर रहा हूं और मेरे प्रोजेक्ट रूट और /functions/ node_modules फ़ोल्डर है। अगर मैं /functions/node_modules हटाता हूं, तो मेरा ऐप ठीक चलता है। यह एक समाधान है, लेकिन यह काफी कष्टप्रद है। क्या किसी को ऐसा वर्कअराउंड मिला है जो node_modules दोनों फ़ोल्डरों को एक ही समय में मौजूद रहने की अनुमति देता है?

create-react-app के साथ बनाए गए ऐप में mdbootstrap का उपयोग करते समय भावी पीढ़ी और इस समस्या का सामना करने वाले किसी भी व्यक्ति के लिए।

बटन और कार्ड छवियों जैसे विभिन्न mdbootstrap घटकों को जोड़ते समय मैंने यह त्रुटि देखी। रिएक्ट सपोर्ट आलेख के अनुसार समस्या निवारण के लिए index.js में जोड़ा गया कंसोल आउटपुट संस्करणों की तुलना करने पर true लौटा। तो मुझे कुछ और कोशिश करनी पड़ी।

फिक्स npm dedupe . चलाने के लिए था

npm ls react

+-- [email protected]
| `-- [email protected]
`-- [email protected]

npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

इसके बाद, सभी घटकों ने ठीक काम किया। खुशी के दिन।

मैंने पाया है कि मुझे "अमान्य हुक कॉल" मिलता है। जब मैं हुक को कॉल करने वाले घटक को गतिशील रूप से लोड करता हूं।

कोड सैंडबॉक्स

परीक्षण जो "ऐप" लोड करता है वह स्थिर रूप से गुजरता है। दो परीक्षण जो इसे गतिशील रूप से लोड करते हैं (एक require का उपयोग करके, एक फ़ंक्शन के रूप में import का उपयोग करके) दोनों त्रुटि देते हैं।

मैं भी परवाह क्यों करता हूं: मैं कुछ परीक्षण लिखने की कोशिश कर रहा हूं जहां मैं कुछ चीजों को नकल करने के लिए jest.doMock का उपयोग कर रहा हूं और फिर उस मॉड्यूल को गतिशील रूप से लोड कर रहा हूं जिसे मैं दस्तावेज़ीकरण के अनुसार परीक्षण करना चाहता हूं। मैं नकली के बजाय डूमॉक का उपयोग कर रहा हूं क्योंकि मुझे अलग-अलग कार्यों में चीजों को अलग-अलग नकल करने में सक्षम होना चाहिए। आप देखेंगे कि त्रुटि बिना किसी उपहास के होती है, हालांकि।

@ miket01 बिल्कुल वही जो मैं करने की कोशिश करता हूं (लेकिन w/o मजाक कर रहा हूं)। क्या आपको कोई समाधान मिला?

ऐसा करते हुए मिले:

function HeadedSection (props) {
   if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

    const [hidden, set_hidden] = useState(props.hidden);

पहले useState पर कॉल करके ठीक किया गया:

function HeadedSection (props) {
    const [hidden, set_hidden] = useState(props.hidden);

    if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

कई महीनों तक इसे अलग रखने के बाद भी मुझे यह त्रुटि मिल रही है।

मैं अपने कार्यक्रम में शून्य हुक का उपयोग करता हूं। react की एक प्रति और react-dom की एक प्रति है और वे एक ही संस्करण हैं। कोई लिंक नहीं हैं।

सुरक्षा समस्याओं को ठीक करने के लिए हाल ही में कुछ पैकेजों को अपडेट करने का प्रयास करने से पहले इसने आंशिक रूप से काम किया था। मैं next.js का उपयोग कर रहा हूं और फिक्स कुछ उप-घटकों को {typeof window !== 'undefined' में लपेटकर शीर्ष स्तर के घटक से बाहर करना था, लेकिन अब यह भी काम नहीं करता है।

[18:50:42] (master) questions
// ♥ npm ls react
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:34] (master) questions
// ♥ npm ls react-dom
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:55] (master) questions
// ♥ npm dedupe
removed 55 packages, moved 46 packages and audited 1712 packages in 65.449s

33 packages are looking for funding
  run `npm fund` for details

found 26 vulnerabilities (15 low, 3 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

त्रुटि फेंक दी गई है क्योंकि ReactCurrentDispatcher.current === null लेकिन मुझे /node_modules/react/cjs/react.development.js में कहीं भी नहीं मिल रहा है जहां यह कुछ पर सेट है।

क्या कोई मुझे बता सकता है कि ReactCurrentDispatcher.current का मूल्य कहाँ होना चाहिए?
https://github.com/facebook/react/search?p=2&q=%22ReactCurrentDispatcher.current+%3D%22&type=code

यह एक उम्मीदवार की तरह दिखता है, लेकिन यह कोड मेरे react-development.js में समाहित नहीं है। क्या यह होना चाहिए?

    const prevPartialRenderer = currentPartialRenderer;
    setCurrentPartialRenderer(this);
    const prevDispatcher = ReactCurrentDispatcher.current;
    ReactCurrentDispatcher.current = Dispatcher;

https://github.com/facebook/react/blob/702fad4b1b48ac8f626ed3f35e8f86f5ea728084/packages/react-dom/src/server/ReactPartialRenderer.js#L859

मुझे यह त्रुटि सर्वर-साइड रेंडरिंग के साथ next.js द्वारा मिल रही है और यह कोड react-dom/server के तहत प्रतिक्रिया स्रोत में है। मैं कैसे निर्धारित कर सकता हूं कि /node_modules/react/cjs/react-development.js सही है या नहीं?

अद्यतन: यह समस्या थी। मैंने अपनी next.config.js फ़ाइल में webpack.config.externals संपादित किया था
https://github.com/vercel/next.js/issues/17592#issuecomment -712443172

जब भी मैं इसमें सामग्री UI को एकीकृत करने का प्रयास करता हूं तो मेरा ऐप एक बड़ी त्रुटि (अमान्य हुक कॉल) फेंकता है। मैं प्रतिक्रिया के लिए बिल्कुल नया हूँ इसलिए मुझे मदद की ज़रूरत है।