react 🚀 - الخطافات + مثيلات متعددة من React

للتوضيح فقط: لقد كنت تستورد خطافًا (لنقل useState ) من وحدة react مختلفة عن تلك المستخدمة لعرض المكون؟

أوافق على أن هذا محير. لست متأكدًا مما إذا كانت لدينا طريقة لمعرفة ما إذا كانت أي وحدة React أخرى يتم عرضها. AFAIK نحاول تشغيل React بمعزل قدر الإمكان بحيث يمكن لمثيلات React المتعددة أن تعمل في نفس السياق العام دون مشاكل.

وإلا يمكننا على الأرجح تحديث رسالة الخطأ وذكر هذه الحالة أيضًا إذا لم تكن محيرة للغاية.

philipp-spiess في ٢٧ أكتوبر ٢٠١٨

نعم ، لقد قارنت React1 === React2 وكان false (React1 من index.js و React2 من الملف باستخدام الخطاف). عندما يحدث هذا ، تفشل الخطافات مع ظهور رسالة الخطأ العامة أعلاه.

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

brunolemos في ٢٧ أكتوبر ٢٠١٨

👍25 😄2

نعم ، لقد حاولت ربط حزمة npm أقوم بإنشائها. إنه يلقي نفس الخطأ لأن الحزمة الأخرى تستخدم الخطافات أيضًا ولكن مع React الخاصة بها. اضطررت إلى نشر الحزمة الخاصة بي على NPM ثم استيرادها مباشرة من NPM. بهذه الطريقة ذهب الخطأ ، لكنني آمل أن يتم إصلاح ذلك لأن نشر حزمة دون اختبارها أمر سيء ، من الواضح

GabrielBB في ١ نوفمبر ٢٠١٨

👍183 🚀17 😄17 👀16 ❤15 🎉14 😕3

يعاني Lerna monorepos من هذا أيضًا عندما يتم تحديد خطاف مخصص في حزمة واحدة ويستخدمه الآخر نظرًا لأن التبعيات المرتبطة تستخدم نسختها الخاصة من التفاعلات.

لدي حل بديل (hacky) في الوقت الحالي باستخدام npm-link-shared و prestart npm برنامج نصي لاستبدال تبعية الحزمة الواحدة بـ react مع رابط رمزي للآخر ، لذا فهم يستخدمون نفس المثال.

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

mpeyper في ٢ نوفمبر ٢٠١٨

👍43 ❤7 🎉7 🚀3 👀1

واجهت نفس المشكلة وقمت بحلها بإضافة:

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

إلى resolve في تهيئة webpack لتطبيقي الرئيسي.

من الواضح أنه كان خطئي في استخدام نسختين من React لكنني أوافق على أنه سيكون من الرائع أن تكون رسالة الخطأ أفضل. أعتقد أن هذا ربما يشبه: https://github.com/facebook/react/issues/2402

apieceofbart في ٣ نوفمبر ٢٠١٨

👍333 ❤111 🎉111 🚀57 😄29 👀23

mpeyper إنه يعمل. شكرا

GabrielBB في ٥ نوفمبر ٢٠١٨

apieceofbart هذا عمل لي. شكرا على اقتراحك. 👍

jimbo في ١٨ نوفمبر ٢٠١٨

🎉5

كما أفهم ، تنشأ هذه المشكلة عند وجود نسخ متعددة من React في نفس الحزمة.

هل هذه مشكلة أيضًا إذا كانت حزمتان منفصلتان بنسخهما الخاصة من React تقومان بتشغيل تطبيقات React الخاصة بها على عناصر dom منفصلة ، كما هو موضح هنا: https://medium.jonasbandi.net/hosting-multiple-react-applications-on- نفس الوثيقة c887df1a1fcd

أعتقد أن هذا الأخير هو نمط "تكامل" شائع يستخدم على سبيل المثال في إطار عمل meta-spa أحادي (https://github.com/CanopyTax/single-spa).

jbandi في ٤ ديسمبر ٢٠١٨

👍8

أواجه هذه المشكلة أيضًا حتى مع إصدارات التفاعل نفسها تمامًا ، تطوير الخطافات ليتم نشرها بمفردها معطل عند استخدام npm-link . الحصول على نفس الرسالة غير المفيدة hooks can only be called inside the body of a function component . حل الاسم المستعار apieceofbart لي هذه المشكلة. شكرا جزيلا!

vpicone في ١٠ ديسمبر ٢٠١٨

👍6 👀2 🎉1

نفس المشكلة هنا عندما أنا npm link حزمة إلى تطبيقي الرئيسي. لم أتمكن من الحصول على عمل babel-plugin-module-resolver .
انها تقول:
Could not find module './node_module/react'
هذا أمر مزعج لأنه يمنعني من اختبار المكون الخاص بي محليًا قبل نشره.

dotlouis في ١١ ديسمبر ٢٠١٨

👍16

لقد أصلحت مشكلتي عن طريق إزالة علامة الإقحام في "react": "^16.7.0-alpha.2"
ها هو التعليق الكامل: https://github.com/facebook/react/issues/14454#issuecomment -449585005

doasync في ٢٢ ديسمبر ٢٠١٨

👎8 👍3

أنا أستخدم Yarn ، وقد أصلحت هذا عن طريق فرض الحل في package.json :

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

pelotom في ٢٢ ديسمبر ٢٠١٨

👍27 ❤9 🎉8 🚀4

نفس الشيء هنا!!

leecade في ٢٤ ديسمبر ٢٠١٨

👎8

أردت فقط ترك ملاحظة هنا لأي شخص قد يكون لديه هذه المشكلة بنفس الطريقة التي واجهت بها.

نحن نشغل React و Rails باستخدام جوهرة react-rails ونعرض المكونات مباشرةً في عروض Rails. كنت أتلقى هذا الخطأ في كل مرة يتم فيها دفع إصدار جديد من التطبيق ، لأن Turbolinks كانت تستحوذ على حزمة JS الجديدة من <head> التي حملت مثيلًا إضافيًا من React. كان الحل هو أن تقوم Turbolinks بإعادة تحميل صفحة كاملة عندما تكتشف أن الحزمة قد تغيرت: https://github.com/turbolinks/turbolinks#reloading -when-plants-change

يبدو أن هذا قد حلها بالنسبة لنا.

zbuttram في ٥ فبراير ٢٠١٩

👍4

أنا متحمس جدًا لوضع Hooks أخيرًا في الإنتاج ، ونحن جميعًا مدينون بشكر كبير لكل من جعل ذلك ممكنًا. إنها متعة كبيرة في العمل بها وجعلت الكود الخاص بي أقصر وأكثر وضوحًا.

تمامًا مثل التنبيه ، لا تزال هذه المشكلة ذات صلة في الإصدار الذي تم إصداره مع نفس رسالة الخطأ غير المفيدة "لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة."

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

شكرا مرة أخرى على كل العمل الشاق وتهنئة على الإصدار! إنها حقًا مجموعة مذهلة من الميزات.

تحرير : كان يجب أن ننظر عن كثب في العلاقات العامة المفتوحة ، فقط وجدت # 14690 يعالج هذا. شكرا @ threepointone!

taylorham في ٦ فبراير ٢٠١٩

👍6 🚀2

taylorham الرابط في الالتزام لا يشير إلى أي شيء حتى الآن. سأنتظر ذلك ، ولكن هذه مشكلة أواجهها منذ استخدام الخطافات في حزمة _ (بدءًا من npm link ) _ ومن المستحيل التعامل معها محليًا دون النشر.
بعد النظر في العديد من المشكلات ، اعتقدت أن هذه كانت مشكلة في أداة تحميل التفاعل الساخن التي كانت تجمع المكونات إلى الفئات ، ولكن حتى بعد إصدارها لإصدار مع دعم الخطاف ، فإنها لا تزال تفشل بنفس الطريقة.
لقد جربت الكثير من الاختراقات المختلفة ولكن لم يحالفني الحظ. لا أعرف لماذا لم يصب الجميع بهذه المشكلة حتى الآن 🧐

dotlouis في ٧ فبراير ٢٠١٩

👍3

dotlouis نعم ، إنها مجرد رسالة خطأ محدثة حتى الآن والمشكلة نفسها لا تزال مؤلمة.

الشيء الوحيد الذي نجح معي على الإطلاق هو جعل أي تطبيق أقوم بتطويره يعتمد على مثيل المكتبة لـ React باستخدام "react": "link:../my-library/node_modules/react" .

taylorham في ٧ فبراير ٢٠١٩

👍5 ❤2 🎉1

لم تنجح أي من القرارات المقترحة معي ، وأنا أحاول كل شيء
تحاول التثبيت على سياق تنفيذ المشروع والكثير من المكوّنات ذات الترتيب الأعلى
بدءًا من مشروع فارغ ، نفذ الحيلة
أنا مستمر في البحث عن السبب

[حسنًا] بالنسبة لي ، لم يكن التصحيح متعلقًا بـ package.json أو سبب رد الفعل المزدوج الآخرين: كان لديّ themeProvider العام أعلى تطبيقي ، قادم من السياق. يبدو أن استبداله بـ "خطاف useContext" (أثناء إعادة كتابته كمركب وظيفي) هو الحل الوحيد
ربما هناك مشكلة عندما

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

Mydde في ٨ فبراير ٢٠١٩

أقوم بتطوير مكون حيث يوجد مجلد 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"
    },
    ...
}

DylanVann في ١٠ فبراير ٢٠١٩

❤9 👍5 🎉4 🚀3

taylorhamDylanVann شكرا لكم يا رفاق المدخلات. لسوء الحظ ، ما زالت لا تعمل بالنسبة لي.
ولم أتمكن من العثور على أي وثائق حول هذا البروتوكول link: الذي استخدمته.
بشكل أساسي ، تقول أن "رد الفعل الربيع" (قسم آخر يستخدم أيضًا التفاعل كاعتمادية) لا يمكنه العثور على react-dom . هل يمكنك أن تدلني على بعض الوثائق حول "react": "link:../some/path" فضلك؟

dotlouis في ١٢ فبراير ٢٠١٩

أنا أستخدم حزمة واجهة المستخدم المرتبطة أيضًا وتمكنت من إصلاح هذه المشكلة.
تحتاج إلى تصدير رد فعل renderToString من واجهة المستخدم (حزمة مرتبطة).
لقد قمت بإنشاء وظيفة تصيير في الحزمة المرتبطة.

seeden في ١٢ فبراير ٢٠١٩

فقط من أجل سياق أفضل - https://github.com/facebook/react/issues/14257

theKashey في ١٢ فبراير ٢٠١٩

شكرا @ theKashey. gaearon يبدو أنه يعتقد أن هذا هو السلوك الطبيعي. أحصل على أنه لا يجب تحميل React مرتين ، ولكن ما هي الطريقة الموصى بها للعمل مع حزمة محلية مرتبطة بعد ذلك؟

dotlouis في ١٣ فبراير ٢٠١٩

👀5

لدي أيضًا مشكلات في ربط مساحات عمل Lerna بشكل صحيح. كانت هذه هي الحيلة التي استخدمتها للحصول على هذا العمل. تأكد من تشغيل npm install بعد ذلك.

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

jmlivingston في ١٣ فبراير ٢٠١٩

❤5 🎉4

هناك العديد من الطرق لحلها ، ولن تساعد قرارات الغزل عادةً - إنها أكثر ارتباطًا بـ "أداة البناء"

لحزمة الويب ، استخدم 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
بالنسبة إلى nodejs (غير الدعابة) ، قد تستخدم تتطلب التحكم

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

من باب الدعابة استخدم moduleNameMapper

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

theKashey في ١٤ فبراير ٢٠١٩

👍17 ❤10 🎉8 🚀3

theKashey شكرًا على رؤيتك ، هذا منطقي عندما نفكر في كيفية عمل دقة الوحدة (أسفل ، ثم أعلى الشجرة) ، ولكن من وجهة نظر المستخدم ، لا أجد هذا عمليًا للغاية. عندما أقوم باستخدام npm link حزمة ، أتوقع أن تعمل دون الحاجة إلى إعادة ربط التبعيات بشكل صريح. هذا يجعل تطوير حزمة محليًا أمرًا مؤلمًا للغاية.

dotlouis في ١٤ فبراير ٢٠١٩

هذا هو حجر الزاوية ، هذه هي الطريقة التي صمم بها node_modules للعمل ، ولهذا السبب قد يكون لديك نسختان من Button في نسختين رئيسيتين مختلفتين ، والوحدات التابعة ستعثر بسهولة على "الصحيح" نسخة من الحزمة.
هذه هي الطريقة التي يجب أن تعمل بها طوال الوقت.

العناصر الداخلية Node.js واضحة تمامًا - حاول فتح ملف مع إضافة جميع البادئات المعروفة (مثل node_modules ) أو الامتدادات (مثل js ، ts ، json ) ؛ إذا لم يتم العثور على أي دليل انتقل إلى أعلى. الطريقة الوحيدة "لإصلاحها" - استبدال نظام دقة وحدة nodejs.

yarn pnp سيفعل ذلك ، وقد يحل المشكلة. yarn workspaces ، والذي قد يؤدي إلى مشاركة الحزم في الأعلى - سيحل المشكلة أيضًا دون الحاجة إلى أي "سحر".

npm workspaces ؟ لا يوجد حاليا.

theKashey في ١٤ فبراير ٢٠١٩

👍1

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

DylanVann في ١٤ فبراير ٢٠١٩

كان هذا واحدًا كان مخدشًا. لقد جربت إعداد webpack solution.alias ولكنه لم يكن يعمل ، وجربت العديد من الإعدادات أيضًا ولكن لم أتمكن أبدًا من تشغيله لسوء الحظ ، ولكن إليكم كيف تمكنت أخيرًا من تشغيله:

هذا هو هيكل المجلد الخاص بي:

اضطررت إلى تعديل 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 ، هذه هي الحيلة.

نأمل أن يساعد هذا شخصًا آخر ويوفر بعض الوقت.

rmolinamir في ١٥ فبراير ٢٠١٩

👍2

إذن أي حل لهذه المشكلة؟ لقد جربت أكبر عدد ممكن من التوصيات هنا ولم يحالفني الحظ. أنا أستخدم تطبيق create-react-app ونسخة مطبوعة. استخدام React / React-dom 16.8.3. هذا مشروع جديد أنشأته منذ يومين سهل جدًا. أنا أستخدم useSpring () و animated.div. شكرا

guru-florida في ٢٥ فبراير ٢٠١٩

👍9

@ guru-florida هل تستخدم جهاز التوجيه بأي فرصة؟

أنا أستخدم نفس الحزمة التي تستخدمها (تطبع & إنشاء تطبيق-تفاعل) ومشكلتي مع السمة render . تغييره إلى component أدي الحيلة.

قبل:

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

بعد:

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

أتمنى أن يساعد ..!

mikeyyyyyy في ٢٧ فبراير ٢٠١٩

👍2 👀1 ❤1 😕1 🎉1

mikeyyyyyy لا ، لا تستخدم جهاز توجيه React في هذا. شكرًا للنصيحة على الرغم من أنني كنت في المشروع الأخير الذي جربته باستخدام الربيع وكان لدي نفس المشكلة.

guru-florida في ٢٧ فبراير ٢٠١٩

واجهت هذه المشكلة مع رابط npm (في تطبيق لا يتجزأ) ، يبدو أن npm link .../whatever/node_modules/react لا يحل المشكلة ، ويعمل بشكل جيد مع المكونات غير ذات الخطاف

tj في ٥ مارس ٢٠١٩

tj أعتقد أن لديك مشكلة مع SSR. الحل السريع هو تصدير وظائف التفاعل أو التفاعل الكامل من الحزمة المرتبطة واستيرادها في حزمة الخادم

seeden في ٥ مارس ٢٠١٩

seeden ahh أنا لا أستخدم SSR ، فقط SPA w / Parcel. لديّ ui pkg داخليًا لأشراضي الخاصة وتطبيق أعمل عليه ، وكلاهما لهما نفس الإصدار react ، يبدو غريبًا أن هناك نسخة مكررة ولكن ربما يكون هذا مصدر قلق خاص بالطرود

tj في ٥ مارس ٢٠١٩

tj أوه ، فهمت. ثم نتمنى لك التوفيق في هذه القضية الغريبة للغاية. قضيت أسبوع مع هذا

seeden في ٥ مارس ٢٠١٩

إذن أي حل لهذه المشكلة؟

لا توجد مشكلة هنا في حد ذاتها. كما هو موضح في هذه الصفحة ، يحتاج React إلى أن تكون مكالمات useState() على نفس الكائن react ككائن react كما يظهر من داخل react-dom . إذا لم يكن هذا ما يحدث لك ، فهذا يعني أنك تقوم بتجميع نسختين من React على الصفحة - وهو أمر سيء بحد ذاته كما أنه يكسر بعض الميزات الأخرى قبل الخطافات. لذا سترغب في إصلاحه على أي حال. تحتوي هذه الصفحة على طرق شائعة للتشخيص لإصلاحها.

نترك هذه المناقشة مفتوحة لمشاركة حلول بديلة معينة عندما يواجه الأشخاص هذه المشكلة. لكنها ليست مشكلة في حد ذاتها يمكن "حلها" بواسطة أي شخص غيرك.

gaearon في ٥ مارس ٢٠١٩

❤2

واجهت هذه المشكلة مع رابط npm (في تطبيق لا يتجزأ) ، رابط npm ... / أيا كان / node_modules / رد فعل لا يبدو أنه يحلها ، يعمل بشكل جيد مع المكونات غير الخطافية على الرغم من

هل تمانع في إنشاء حالة نموذجية صغيرة؟

gaearon في ٥ مارس ٢٠١٩

gaearon سيفعل ، يجب أن يكون لديه وقت للحفر أكثر قليلاً الأسبوع المقبل

tj في ٥ مارس ٢٠١٩

❤1

لحسن الحظ ، قام require-control بإصلاح مشكلتنا مع السياق الثابت لـ yarn link + SSR + العناصر المصممة 4. شكرا @ theKashey 👍

damassi في ٧ مارس ٢٠١٩

👍1

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

import React from 'react'

وفي غيرها:

import React from 'React'

في بعض أنظمة الملفات (يونكس ، أو إس إكس) يتسبب هذا في إنشاء Webpack لنسختين من React.

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

يأتي الاختبار على وثائق التفاعل جيدًا أيضًا لأنه من الواضح أنه يستخدم الأحرف الصغيرة فقط.

يبدو هذا وكأنه قد يستحق الذكر في المستندات؟

adamscybot في ٨ مارس ٢٠١٩

❤1 👍1

بالنسبة لي ، كان سبب تكرار React هو Webpack DllPlugin. بالنسبة إلى مكتبة الارتباط الديناميكي للمورد الخاص بي ، لم أقم بتضمين react و react-dom إلى قائمة الإدخالات الخاصة بي ، ومع ذلك ، كان لدي مكتبات أخرى تتطلب react أو react-dom لذا احتوت DLL الخاصة بي على react و react-dom (يمكن أن يكشف الفحص السريع لملف json البيان عن ذلك). لذلك ، عندما كنت أقوم بتشغيل الكود ، واستوردت React إلى التطبيق ، كان يتم تحميله من node_modules ، ولكن في كود البائعين ، كان React مطلوبًا من ملف DLL الخاص بهم.

بشكل عام : كن حذرًا مع ملفات DLL وتأكد من أن الوحدات المضمنة لا تتضمن تبعيات إضافية لا تحتاجها وإلا فسوف تضاعف استيرادها.

mike1808 في ٨ مارس ٢٠١٩

تمكنت من إصلاح هذا عن طريق تحديث react-hot-loader إلى 4.6.0

OliverRadini في ١٢ مارس ٢٠١٩

👍3 🎉1

هذه هي الحيلة للأشياء npm link في الطرد:

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

لست متأكدًا مما إذا كان هذا هو ما سيحاول استخدامه لبناء إنتاج ، يبدو نوعًا من الاختراق ولكنه يعمل من أجل التطوير على الأقل

tj في ١٢ مارس ٢٠١٩

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

يسمح لنا بنقل مشروعنا إلى المستوى التالي ، باستخدام الخطافات في app-as-a-lib الخاص بنا.

هذا هو الملف webpack.config.js الناتج

chulanovskyi في ١٢ مارس ٢٠١٩

👍1

npm ls react

عائدات

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

لي

console.log(window.React1 === window.React2) إرجاع صحيح
في هذه المرحلة ، أعتقد أن إصلاح القطاع الأمني هو سبب المشكلة

تحديث. لقد كان السبب بالفعل هو سلوك SSR لـ React-apollo (https://github.com/apollographql/react-apollo/issues/2541)
الترقية إلى 2.3.1 إصلاحه

damiangreen في ١٢ مارس ٢٠١٩

مرحبًا يا شباب ، يواجه فريقنا هذه المشكلة واستغرق الأمر بضعة أيام لحلها.

حلول العمل بالنسبة لنا

الحل أ: حدد موضع الحزمة للبحث عنه ، كما هو مذكور أعلاه

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

الحل ب: استخدم webpack solution.modules لتحديد أولويات مجلد node_modules الصحيح للبحث عن الوحدات

خلفية الحالة ولماذا يحدث ذلك

أول شيء أولاً ، إنه ليس خطأ رد الفعل ، بل إنه ليس خطأ lerna ، ولكن قد يحتاج رد فعل ، حزمة الويب ، و npm-link إلى تحمل بعض المسؤوليات.

متطلبات الحالة:

-غير monorepo:

لديها حزم مرتبطه
قامت الحزمة المرتبطة برمز بتصدير مكون باستخدام الخطافات
إنشاء صفحات رد فعل العميل
- إذا كنت تعمل على monorepo
حزم مترابطة
حصلت الحزم على إصدارات مختلفة من التبعيات (حتى اختلاف إصدار التصحيح) ، لذلك حتى مساحة العمل ستحل عند تثبيت تفاعلين
استوردت حزمة المدخل حزمة مرموقة تستخدم الخطافات

مثال

هيكل

- 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 مع حزمة الويب أو ربما أي شيء آخر ، فستحتوي على مثيلين للتفاعل.

الكود في ProductA ، سيبحث عن ProductA/node_modules/react .

لكن ComponentWithHooks الذي تم استيراده سيبحث عن mono repo root/node_modules/react .

لماذا ا؟ تذكر قواعد البحث عن npm؟ إذا لم تتمكن من العثور على الوحدة النمطية في مجلد node_modules الخاص بها ، فسوف تبحث عن node_modules الخاصة بالوالدين ...

لذا فقد طبقت أدوات مثل webpack هذه القاعدة بشكل افتراضي تمامًا.
لا حرج في أن يصبح حل الريبو الأحادي شائعًا.
ولن تلاحظ الحزمة العادية هذا لأن معظمها لا يتطلب مثيلًا واحدًا مثل رد الفعل والإعادة.

JennieJi في ١٤ مارس ٢٠١٩

👍3

أواجه نفس المشكلة باستخدام استنساخ أساسي للغاية باستخدام مثال مساحات عمل الغزل - https://github.com/mwarger/yarn-workspace-hooks-repro

لدي component-library مكتوب بخط مطبوع ومجمع مع طرد. example-demo هو ما سيعرض هذا component-library وهو تطبيق CRA تم إنشاؤه حديثًا. يتم رفع جميع الحزم الشائعة باستخدام خيوط ، لذلك من الناحية النظرية ، يجب أن يكون هناك إصدار واحد فقط من التفاعل متاح. ومع ذلك ، فإن المكالمة React.useEffect التي أجريها في index.tsx تسبب الخطأ الذي يقودني إلى مشكلة GitHub هذه.

كل شيء يعمل حتى يتم إضافة خطاف. لإعادة إنتاج الخطأ ، قم بإلغاء التعليق من 7 إلى 9 في component-library/src/index.tsx

آمل أن أفعل شيئًا سخيفًا قد أغفلته. يرجى تقديم المشورة فيما يتعلق بأي خطوات قد أستخدمها لمحاولة علاج ذلك. شكرا لك!

تحرير المتابعة: إخراج البرنامج النصي لتصحيح الأخطاء المقترح أدناه يطبع 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);

mwarger في ١٤ مارس ٢٠١٩

👍5 👀1 😕1

استغرقت عدة ساعات ، لذا قد يكون من المفيد تدوين ملاحظة هنا.

في حالتي ، وضعت سطرًا <script defer src="./dist/bundle.js" /> في رأس قالب HTML ، والذي يعمل كالمعتاد عند عدم استخدام خطافات React. جميع الحلول لا تعمل ويعيد الشيك window.React1 == window.React2 true في هذه الحالة.

نظرًا لأن حزمة الويب ستضخ علامة البرنامج النصي بعد ذلك ، فلا يجب أن يحتوي القالب على علامة البرنامج النصي من تلقاء نفسه. قم بإزالة علامة البرنامج النصي من القالب ، واجعل React وظيفية مع الخطافات (يقصد التورية) مرة أخرى.

taiansu في ١٥ مارس ٢٠١٩

👍3 🎉1

في حالتي ، لدي تطبيق React والذي كان مرتبطًا بتبعية كنت أعمل عليها. سيؤدي هذا إلى الحيلة حتى أتمكن من إصلاح بعض التبعيات التي تحتاج إلى نقل react و react-dom إلى إدارات التطوير والنظراء.

من التطبيق: cd node_modules/react && npm link
من التطبيق: cd node_modules/react-dom && npm link react
من الحزمة المرتبطة: npm link react

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

ajcrews في ١٥ مارس ٢٠١٩

👍10 🎉7

ما زلت أواجه هذه المشكلة ، على الرغم من تجربة كل ما سبق. تهيئة 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. حسب OP

baking-code في ١٧ مارس ٢٠١٩

في حالتي ، لدي تطبيق React والذي كان مرتبطًا بتبعية كنت أعمل عليها. سيؤدي هذا إلى الحيلة حتى أتمكن من إصلاح بعض التبعيات التي تحتاج إلى نقل react و react-dom إلى إدارات التطوير والنظراء.
من التطبيق: cd node_modules/react && npm link
من التطبيق: cd node_modules/react-dom && npm link react
من الحزمة المرتبطة: npm link react
لماذا تعمل؟ تشير صفحة التحذير من الخطأ إلى أنه "لكي تعمل الخطافات ، يحتاج استيراد التفاعل من كود التطبيق الخاص بك إلى حل نفس الوحدة النمطية مثل استيراد التفاعل من داخل حزمة رد فعل دوم".

شكرا! هذا يعمل بشكل جيد بالنسبة لي. (حتى عند استخدام الوضع المختلط للرابط والرمز npm)

Saebyuckbaan في ٢٠ مارس ٢٠١٩

👍1

لقد جربت كل ما هو مقترح أعلاه وما زلت أواجه الخطأ.

بقليل من المساعدة من 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 ، نظرًا لأننا نستخدم الغزل ، أضفنا قرارات react-test-renderer إلى package.json الخاص بنا. هذا يفرض على كل مراجع react-test-renderer استخدام "16.8.4".

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

كان هذا محبطًا للغاية ، أتمنى أن يساعد هذا شخصًا آخر. بفضل chulanovskyi و @ theKashey لاقتراحاتهم أيضًا.

Paddy-Hamilton في ٢١ مارس ٢٠١٩

👍5

سيؤدي هذا إلى الحيلة حتى أتمكن من إصلاح بعض التبعيات التي تحتاج إلى تحريك رد فعل ورد فعل دوم إلى dev و peer deps.

ajcrews (ربما فاتني شيء ما ولكن) أنا npm link مكتبة داخلية بها react في peerDependencies و devDependencies وما زلت بحاجة إلى إصلاح بغض النظر عن حل الخطأ. بحث جميل!

ricokahler في ٢٣ مارس ٢٠١٩

كنت على وشك أن أنشر ولكن وجدت حلا

لدي مكتبة مكونات ، مع مثال على تطبيق CRA بالداخل من أجل التطوير

في حزمة تطبيق CRA.

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

tim-soft في ٢٣ مارس ٢٠١٩

كان هذا محبطًا للغاية ، أتمنى أن يساعد هذا شخصًا آخر. بفضل chulanovskyi و @ theKashey لاقتراحاتهم أيضًا.

@ Paddy-Hamilton تحقق دائمًا من ملف القفل بعد التثبيت. لقد واجهت نفس المشكلة حيث كان 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"

سيحذرك A 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:

الآن لديك نسخة واحدة من react-test-renderer بدون أي مخادع للاسم المستعار resolutions أو webpack .

لأية مشاكل متعلقة بالحزم المرتبطة و create-react-app اتبع facebook / create-response-app # 6207

eps1lon في ٢٣ مارس ٢٠١٩

👍3

هناك العديد من الطرق لحلها ، ولن تساعد قرارات الغزل عادةً - إنها أكثر ارتباطًا بـ "أداة البناء"
لحزمة الويب ، استخدم 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
بالنسبة إلى nodejs (غير الدعابة) ، قد تستخدم تتطلب التحكم
import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});
من باب الدعابة استخدم moduleNameMapper
"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

هذا فعلها من اجلي

ryudice في ٢٧ مارس ٢٠١٩

تضمين التغريدة
شكرا لك! يعمل ببراعة بالنسبة لي!

nakhodkin في ٢٨ مارس ٢٠١٩

لقد صنعت حالة اختبار صغيرة مع الحد الأدنى من الإعداد باستخدام رد فعل 16.8.6 ، حزمة الويب الإلكترونية و RHL. والجدير بالذكر ، عندما يحدث هذا الخطأ ، يبدأ المتصفح بأكمله (في هذا الإعداد ، الإلكترون) في استخدام مجموعة كاملة من وقت وحدة المعالجة المركزية)

https://github.com/PerfectionCSGO/reeee

لقد كنت أصفق رأسي بشأن هذه المشكلة لمدة 3 أيام حتى الآن. في الأصل اعتقدت أن RHL كانت هي المشكلة ولكن إزالة ذلك تمامًا من هذا المشروع لن يحل المشكلة.

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-رد فعل-لايت واستخدام مراقب ، فسوف يتسبب ذلك في نفس التأثير.

PerfectionVR في ٤ أبريل ٢٠١٩

👍2 👀1

فيما يتعلق بمشكلتي ، لقد قمت بحلها عن طريق إرفاق حزمة إلكترونية إلكترونية والذهاب مع حل إلكترون أكثر نقاءً. أظن أنها سلسلة أدوات مستخدمة في webpack أو babel غير متوافقة.

PerfectionVR في ٥ أبريل ٢٠١٩

😕1

واجهت هذه المشكلة فقط في الإنتاج. لم تساعد الحلول المقترحة هنا.
كانت حالة الاستخدام الخاصة بي عبارة عن تطبيق تابع لجهة خارجية يتم تحميله كأداة في موقع ويب آخر.
عندما تم تحميل الموقع لأول مرة مع عنصر واجهة المستخدم ، كان كل شيء يعمل بشكل جيد ، ولكن عندما ينتقل المستخدم إلى صفحة مختلفة ويعود إلى الصفحة مع الأداة ، تلقيت خطأ الخطافات.

لاحظ أن الخطأ يحدث فقط عندما لا يتسبب التنقل في إعادة تحميل الصفحة.

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

لقد أصلحته عن طريق التحقق مما إذا كان البرنامج النصي قد تم تحميله بالفعل.
أولاً قمت بتصدير مكتبتي إلى مساحة الاسم العالمية باستخدام تكوين "مكتبة" Webpack:

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);
}

قد تكون حالة استخدام محددة للغاية ولكن آمل أن يساعد هذا شخصًا آخر.

eladlevy في ٥ أبريل ٢٠١٩

لذلك لدينا تطبيق React رئيسي يستفيد من حزمة الويب.
نحاول إنشاء مكتبة React صغيرة تستخدم الخطافات ، وقد حاولنا تبديل الحزم (parcel، pure babel، webpack).
عند تجربة تنفيذ حزمة الويب الخاصة بنا ، قمنا بتمييز رد فعل و رد فعل دوم على أنهما خارجي ، لذلك لن نقوم بتضمينهما في الحزمة الخاصة بنا.
ما زلنا نحصل على نفس استثناء الخطافات عند استخدام رابط npm.

يعمل إنشاء ارتباط رمزي لتفاعل التطبيق الرئيسي ، ولكنه ليس سير عمل مطورًا رائعًا.

أواجه صعوبة في معرفة السبب الأساسي للمشكلة. ما الذي ينتج نسخة مكررة من React؟

adriene-orange في ٩ أبريل ٢٠١٩

مرحبًا @ adriene-orange ، قد تجد رسالتي https://github.com/facebook/react/issues/13991#issuecomment -472740798 لمزيد من التوضيحات.

تعدد المثيلات الناتج عن ارتباط npm يرجع إلى أن العقدة بشكل افتراضي ستبحث في وحدات node_modules للمجلد الأصلي عن الوحدة النمطية إذا لم تتمكن من العثور عليها في الحزمة الخاصة بك.

أبسط وأفضل حل نجده لهذا هو في تكوين حزمة الويب الخاصة بحزمة المدخل (أو أدوات أخرى) ، هناك شيء مثل resolve.modules لتعيين المسارات يدويًا وترتيب المسارات التي ستبحث عنها حزمة الويب للوحدات النمطية. ستجبر Exp. ، resolve: { modules: [path.resolve(PACKAGE_ROOT, 'node_modules'), 'node_modules'] } ، حزمة الويب للبحث عن وحدات في node_module الخاصة بجذر حزمة الدخول أولاً. إذا لم تتمكن من العثور على الوحدة النمطية في الجذر ، فابحث في مجلد node_modules النسبي ...

لذلك لدينا تطبيق React رئيسي يستفيد من حزمة الويب.
نحاول إنشاء مكتبة React صغيرة تستخدم الخطافات ، وقد حاولنا تبديل الحزم (parcel، pure babel، webpack).
عند تجربة تنفيذ حزمة الويب الخاصة بنا ، قمنا بتمييز رد فعل و رد فعل دوم على أنهما خارجي ، لذلك لن نقوم بتضمينهما في الحزمة الخاصة بنا.
ما زلنا نحصل على نفس استثناء الخطافات عند استخدام رابط npm.
يعمل إنشاء ارتباط رمزي لتفاعل التطبيق الرئيسي ، ولكنه ليس سير عمل مطورًا رائعًا.
أواجه صعوبة في معرفة السبب الأساسي للمشكلة. ما الذي ينتج نسخة مكررة من React؟

JennieJi في ١٠ أبريل ٢٠١٩

👍3

مرحبًا ، أتلقى هذا الخطأ

انتهاك ثابت: اتصال غير صالح في موضع الإغلاق. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. قد يحدث هذا لأحد الأسباب التالية:
1. قد يكون لديك إصدارات غير متطابقة من React والعارض (مثل React DOM)
2. ربما تكون قد انتهكت قواعد الخطافات
3. قد يكون لديك أكثر من نسخة واحدة من React في نفس التطبيق
راجع 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 في ١١ أبريل ٢٠١٩

👎1

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);
});

كما ينص الخطأ ، لا يمكن استدعاء الخطافات إلا من خطاف آخر ، أو من داخل مكون. في حالتك ، يمكنك إنشاء مكون للاختبار الخاص بك وتقديم هذا المكون الذي يستخدم الخطاف إذا كنت ترغب في ذلك.

hamlim في ١١ أبريل ٢٠١٩

المكونات وقح

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);
});

mpeyper في ١١ أبريل ٢٠١٩

كنت أرغب في التناغم هنا لأننا واجهنا مشكلات مع SSR فقط. نقوم بمسح 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/en/docs/dependency-types/#toc -peerdependencies

joeshehata في ١٢ أبريل ٢٠١٩

كما كان لها نفس المشكلة وبالنسبة لي

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

عاد أيضًا true ، جرب جميع الاقتراحات المقدمة ولكن لم ينجح شيء. أخيرًا اتضح أن:

يضيف Webpack علامة البرنامج النصي مع bundle.js إلى index.html تلقائيًا. كانت مشكلتي لأنني كنت أضيف bundle.js إلى index.html بشكل صريح ، والذي كان يعمل بشكل جيد قبل الخطافات.

jaikathuria في ١٧ أبريل ٢٠١٩

👍4

بالنسبة لي ، كانت المشكلة بعد ترقية babel 7 ، ولم تكن هناك إصدارات منفصلة مع تفاعل npm ls. إزالة
قام "رد فعل-لودر ساخن / بابل" من .babelrc بإصلاح المشكلة مؤقتًا.

ts-jait في ٣٠ أبريل ٢٠١٩

لقد جربت جميع الحلول المذكورة أعلاه ، ولكن لا يزال الخطأ موجودًا.
في النهاية ، اكتشفت أن سبب ذلك هو الحزمة why-did-you-update ، وهناك مشكلة متعلقة بها. مجرد دليل لأي شخص يستخدم حزمة مماثلة تعدل React.

desmondgong في ٣٠ أبريل ٢٠١٩

❤1

لقد تمكنت من إصلاح هذا في سيناريو 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
  ]
}

يتيح تكوين metro للمجمع معرفة مكان كل شيء.

sartaj في ٣٠ أبريل ٢٠١٩

👍5

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

لقد قمت بالتبديل من مثال التطبيق (الطريقة الأصلية لاختبار المكون) إلى Storybook . عند استخدام كتاب القصة في المشروع ، لن يتم تحميل React مرتين لأنه سيستخدم نفس العنصر الذي يستخدمه المكون. أثناء استخدام رابط npm ، واجهت مشكلات مع الخطافات وتحميل React مرتين ، كما أنني لم أتمكن من تشغيل أي من الحلول المذكورة أعلاه. لذا فإن Storybook قد حل مشكلتي ، ولدي الآن طريقة لاختبار المكون الخاص بي من خلال سيناريوهات متعددة وفي نفس الوقت إنشاء بعض الوثائق التفاعلية له.

Danilo-Zekovic في ٢ مايو ٢٠١٩

من خلال مشاركة تجربتي في هذا الأمر ، قمت بحلها لمشروعنا باستخدام عناصر خارجية من webpack لمكتبة المكونات لاستبعاد react و react-dom من الإصدار.

لقد بدأنا للتو مع React. في حالتي ، بدأنا بـ Lerna monorepo مع حزمة مكتبة مكونات Neutrino وحزمة عميل Neutrino webapp. يستهلك تطبيق الويب منتج الإنشاء لمكتبة المكونات المرتبطة. بعد بعض التجارب والحصول على true لنفس مثيل React ، بحثت عن طريقة لاستبعاد react و react-dom من إنشاء مكتبة المكونات على الإطلاق.

يبدو أنه حل نمط تصميم شائع لمكتبات مكونات حزمة الويب ، لذا قمت بإضافته في مكتبة المكونات إلى تكوين حزمة الويب:

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

لم أكن بحاجة إلى وضع علامة نصية عامة في حزمة تطبيقات الويب مقابل react و react-dom . أظن أن Webpack يقوم بتوفيرها لمكتبة المكونات في تنفيذها require بنفس الطريقة التي توفرها لتطبيق الويب.

elpddev في ٩ مايو ٢٠١٩

❤6 🎉6

سبب آخر لهذا الخطأ هو الخطأ في تكوين Route الخاص بـ React Router ،

هذا يفشل :

<Route render={MyHookedComponent}/>

ولكن هذا نجح :

<Route component={MyHookedComponent}/>

على سبيل المثال. تحتاج إلى استخدام component وليس render . من السهل ارتكاب هذا الخطأ نظرًا لأن render يعمل بشكل جيد مع المكونات المستندة إلى الفصل.

samuelcolvin في ١١ مايو ٢٠١٩

🚀1 👎1

كنت أعمل على biolerplate وأريد نشره على npm ، وتطويره بمساعدة رابط npm ، كان يعمل بشكل صحيح ولكن بعد فترة بدأت بإعطاء أخطاء Invalid Hook call warning .
حاولت استخدام رابط npm ../myapp/node_modules/react لكنه لا يحل مشكلتي ،
وبالمقارنة مع React1 === React2 فهذا صحيح وكذلك npm ls react تم أيضًا ، فإنه يظهر حزمة واحدة فقط.

وأنا لا أستخدم حزمة الويب أيضًا ، فأنا أقوم فقط بإضافة بعض الطبقات خارج تطبيق create-response- حتى لا أجبر تطبيقي على استخدام وحدة تفاعل مثبتة محليًا.
عالقة معها منذ 3 أيام.

hnagarkoti في ١٣ مايو ٢٠١٩

👍5

مثل hnagarkoti .

RohovDmytro في ١٥ مايو ٢٠١٩

لقد واجهت هذا التحذير أثناء عرض جانب الخادم (SSR) لأنني كنت أستخدم إصدارًا قديمًا من react-apollo لذا أردت فقط ترك هذا الرابط هنا لمساعدة الروح المسكين التالية التي تواجه هذه المشكلة:

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

باختصار ، getDataFromTree لا يدعم خطافات التفاعل حتى الإصدار [email protected] .

richardscarrott في ١٨ مايو ٢٠١٩

❤2 🎉1 👍1

واجهت نفس المشكلة وقمت بحلها بإضافة:
 alias: {
        react: path.resolve('./node_modules/react')
      }
إلى resolve في تهيئة webpack لتطبيقي الرئيسي.
من الواضح أنه كان خطئي في استخدام نسختين من React لكنني أوافق على أنه سيكون من الرائع أن تكون رسالة الخطأ أفضل. أعتقد أن هذا ربما يشبه: # 2402

هل هناك أي اقتراحات للقيام بذلك باستخدام تطبيق create-response-app؟

dwjohnston في ٢٨ مايو ٢٠١٩

^ حسنًا ، الحل الذي ذهبت إليه لحل هذا من أجل إنشاء تطبيق رد فعل هو استخدام رد فعل - إعادة توصيل التطبيق وتخصيص cra.

ها هو 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

dwjohnston في ٢٨ مايو ٢٠١٩

👍7 ❤1 🎉1

لدينا في فريقنا مكون تنقل عالمي يعمل عبر عشرات التطبيقات ، كل هذه التطبيقات تأتي من رد فعل 15.0.0 لتفاعل 16.8.0 ، من أجل تمكين التنقل المطبق أعلاه ، يتعين علينا تجميعه بأحدث رد فعل

في هذه الحالة ، يعد وجود حالات متعددة من رد الفعل مطلبًا أساسيًا بالنسبة لنا ، أود أن أعرف ما إذا كان رد فعل الفريق الرسمي على استعداد لحل هذه المشكلة في المستقبل؟

otakustay في ٢٨ مايو ٢٠١٩

dwjohnston كان الحل البديل الخاص بي مقابل create-react-app هو إنشاء webpack config من أجل التطوير. يستخدم create-react-app داخليًا webpack و webpack-dev-server ومحمل babel لذا فإن إنشاء حزمة webpack فقط من أجل التطوير لم يكن سيئًا للغاية لأن التبعيات موجودة بالفعل ضمنيًا ولكن لا يزال هناك قدر كبير من النفقات العامة للحصول عليها العمل بشكل صحيح.

لدي مشكلة في create-react-app : https://github.com/facebook/create-react-app/issues/6953 لإضافة دعم webpack alias أو ما شابه.

👋 إذا كان أي شخص يستخدم أيضًا create-react-app ويعاني من نقطة الألم هذه ، فهل يمكنك إعطاء هذه المشكلة إبهامًا؟

ricokahler في ٢٨ مايو ٢٠١٩

👍10

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

هل هناك أي موارد تعرفها وتناقش هذه المشكلة بشكل أكبر؟

dwjohnston في ٢٩ مايو ٢٠١٩

👍1

إذا كنت في قاربي ، فقد أضفت حزمة مكون تفاعل من دليل محلي ، والآن تقوم ببنائها وتثبيتها تلقائيًا ، جنبًا إلى جنب مع نسختها الخاصة من node_modules (لأنها تستخدم رابط npm للقيام بذلك) ، مما يمنحك نسخ التطبيق 2 أو رد الآن.

لقد عملت حوله عن طريق حذف node_modules // node_modules قبل تشغيل التطبيق. للقيام بذلك تلقائيًا:

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

JeremyGrieshop في ٣٠ مايو ٢٠١٩

🎉1 👍1

لقد واجهت هذا أيضًا عند إجراء SSR.
إذا كنت تستخدم Lerna للاختبار المحلي لمكتبة React الخاصة بك ، فيمكنك إضافة "رد فعل / رد فعل دوم / رد فعل جهاز توجيه" مثل peerDependencies في مكتبتك ، ولكن لا يجب عليك إضافتها على أنها devDependencies. (هذا يجعلها مكررة)
يمكنك استخدام node --preserve-symlinks حتى يتمكن من البحث عن الريبو الأصل الذي يقوم بتثبيت peerDependencies.
على سبيل الدعابة ، تحتاج إلى إضافة مسار الريبو الأصل إلى خيار "jest.moduleDirectories" حتى يتمكن Jest من حلها

antonybudianto في ١٢ يونيو ٢٠١٩

apieceofbart إنه يعمل بالنسبة لي ، تشك!

wind4gis في ١٧ يونيو ٢٠١٩

واجهت هذا الخطأ عند تحميل مكونات React الخارجية ، على سبيل المثال مع وحدات JS النمطية. إنها خارج المشروع تمامًا ، محملة بخاصية الاستيراد الديناميكي () (حسناً jsonp لمزيد من الدعم). للتغلب على هذه المشكلة ، نقوم بتمرير / حقن React كخاصية لكل وحدة. يعمل هذا ، ولكن بعد ذلك تعتمد كل وحدة على تطبيق React الذي يحتوي على. نحن نحاول إزالة التبعيات.

mikeaustin في ٢٢ يونيو ٢٠١٩

👍2

كما ذكر آخرون ، فإن هذه الخاصية تلغي React باعتبارها قابلة للاستخدام لأي نوع من الواجهات الأمامية المصغرة. تكمن المشكلة في وجود هذا التأثير الجانبي لإنشاء حالة عامة في وقت تشغيل JS عند استيراد React لاستخدامها كمكتبة.

أتفهم أنه بالنسبة لحالات الاستخدام البسيطة ، فإن وجود هذا التأثير الجانبي يعني أن React "أسهل في الاستخدام". ولكن عندما تتكون صفحة الويب من نصوص متعددة من خطوات الحزمة المتعددة ، يجب أن يكون أحدهم قادرًا على إعداد React (قم بهذا التأثير الجانبي بشكل صريح) ويمكن للآخرين استدعاء وظائف المكتبة.

psharbau-cmu في ٢٦ يونيو ٢٠١٩

ما زلت أواجه مشكلة في رد فعل التمهيد: # https://github.com/react-bootstrap/react-bootstrap/issues/3965

timgerhard في ٢٨ يونيو ٢٠١٩

بالنسبة لأي شخص آخر عالق في محاولة إنشاء lib لـ React ، جرب https://github.com/whitecolor/yalc ، فهو يعمل بشكل أفضل من الروابط الرمزية.

corysimmons في ٢٨ يونيو ٢٠١٩

👍2

mpeyper يعمل بشكل جيد. شكرا

ediopia في ٢٩ يونيو ٢٠١٩

🎉1

apieceofbart هذا عمل لي. شكرا على اقتراحك. 👍

pankaz في ٢٩ يونيو ٢٠١٩

بالنسبة لي ، حدثت هذه المشكلة عندما انتقلت إلى دليل مشروعي في PowerShell ولم أحمل اسم دليل في المسار بأحرف كبيرة. لقد أنشأت المشروع في المستخدمين / ... / ... بدلاً من المستخدمين / ... / ...
تم حل المشكلة عندما أصلحت أخطاء الرسملة وأعدت إنشاء المشروع.

Annie-Johnson في ٢ يوليو ٢٠١٩

بالنسبة لي ، القيام بما يلي:

    "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))

: x:

حيث withTranslation هو المكوّن الإضافي من رد فعل i18next و Radium هو المكوّن الإضافي من Radium.

وتصديرها هكذا:

export default withTranslation()(Radium(MyComponent))

: heavy_check_mark:
تم إصلاح كل شيء.

لاحظ أن رد فعل i18next كان في الإصدار 10 الذي يستخدم خطافات React

Skylsmoi في ٥ يوليو ٢٠١٩

mikeaustin نواجه نفس المشكلة. هل لديك أي مثال على "تمرير / حقن React كخاصية لكل وحدة نمطية"؟

cpuy في ٩ يوليو ٢٠١٩

ما زلت تواجه هذه المشكلة ، جرب جميع الخطوات:

مساحات عمل الغزل (عبر ليرنا)
فحص ما إذا كان هناك رد فعل واحد ، نعم

بعض الأشياء التي يمكن أن يكون لها تأثير:

باستخدام حزمة الويب مع LibraryTarget
باستخدام الكتابة المطبوعة

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

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

حزمة الجذر

{
  ...
  "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"
  }
}

robmoorman في ١٠ يوليو ٢٠١٩

👍1

JeremyGrieshop لدي نفس المشكلة والتي عملت معي ، شكرًا.

أضف "premart" في package.json الخاص بك على النحو التالي:

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

sureshsevarthi في ١٠ يوليو ٢٠١٩

واجهت هذه المشكلة ولم تكن بسبب إصدارات متعددة من رد فعل / رد فعل دوم
في الأدوات المخصصة التي أستخدمها ، تم مسح ذاكرة التخزين المؤقت المطلوبة (لغرض خارج هذه المناقشة) ، على سبيل المثال:

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

لذا لمعلوماتك للأشخاص الموجودين هناك ، إذا كنت تفعل شيئًا كهذا - فسيؤثر على خطافات React ، لذا تجنبها إذا استطعت

jooj123 في ١١ يوليو ٢٠١٩

واجهت نفس المشكلة وقمت بحلها بإضافة:
 alias: {
        react: path.resolve('./node_modules/react')
      }
إلى resolve في تهيئة webpack لتطبيقي الرئيسي.
من الواضح أنه كان خطئي في استخدام نسختين من React لكنني أوافق على أنه سيكون من الرائع أن تكون رسالة الخطأ أفضل. أعتقد أن هذا ربما يشبه: # 2402

بالنسبة لأي شخص يستخدم Parcel ، إذا كان dist مكان ملفاتك المجمعة ، فيجب عليك إضافة:

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

إلى package.json الخاص بك وبعد ذلك لا يزال بإمكانك link (npm أو الغزل) المكتبة للتطوير / الاختبار المحلي.

icyJoseph في ١٢ يوليو ٢٠١٩

👍1

mikeaustin نواجه نفس المشكلة. هل لديك أي مثال على "تمرير / حقن React كخاصية لكل وحدة نمطية"؟

يمكنك استخدام سياق React لتمرير "React" نفسها ، وإنشاء HoC لحقن الخاصية في كل مكون. يمكنك تمرير أي شيء في api مثل api.React ، لكنه يحصل على بعض الصعوبة في التفاف HoCs حول هذه المكونات (لأنها متوفرة الآن فقط داخل أحد المكونات ، وليست متاحة للتصدير.

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

mikeaustin في ١٣ يوليو ٢٠١٩

أقضي ساعتين في هذا ، إذا لم يكن تغيير الكود المصدري لتغيير رسالة الخطأ وإضافة المزيد من المعلومات إليه أمرًا سهلاً وتحتاج إلى مزيد من الوقت ، على الأقل أضف هذه الملاحظة إلى المستند ،

_p.s: رد فعل يحتوي على وثائق رائعة ، لكنني أعتقد أن هذه الصفحة تحتاج إلى مراجعة ._

dehghani-mehdi في ١٣ يوليو ٢٠١٩

تضمين التغريدة

تمكنت من إصلاح هذا عن طريق تحديث react-hot-loader إلى ^4.6.0

معان ، هذا أصلحها.
gaearontheKashey ما رأيك في إضافة هذا إلى https://reactjs.org/warnings/invalid-hook-call-warning.html حتى لا يضيع الناس وقتهم بسبب إصدار أقدم من react-hot-loader ؟

catamphetamine في ٢٢ يوليو ٢٠١٩

اعتقدت أنه تم توثيقه جيدًا عبر اثنتي عشرة مشكلة بالفعل.

theKashey في ٢٢ يوليو ٢٠١٩

مرحبًا ، أنا أستخدم React في كل من التطبيق والمكتبة . أستخدم المكتبة داخل التطبيق. تمكنت من إصلاح مشكلتي مثيلي التفاعل باستخدام:

في تكوين حزمة الويب للتطبيق :

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

في مكتبة webpack config

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

pierreferry في ٢٢ يوليو ٢٠١٩

🚀1 🎉1

لذا أواجه مشكلة في استدعاء الخطافات من ملف غير مترجم (* .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 و transpile"؟

chrisgeo في ٢٣ يوليو ٢٠١٩

لا شيء يبدو أنه يعمل بالنسبة لي ، فأنا أستخدم مزيجًا من التحفيز والتفاعل ، ولدي تطبيق هجين ، وبدأت في استخدام الخطافات وفشلت بمجرد أن بدأت في إضافة turbolinks :(

تحرير: في الوقت الحالي ، قمت بحل مشكلتي عن طريق إضافة data-turbolinks-track="reload" data-turbolinks-eval="false" إلى علامات البرنامج النصي التي استخدمتها بحيث يجب أن تفعل ذلك في الوقت الحالي

sicksid في ٢٣ يوليو ٢٠١٩

لدي نفس السؤال ، بعد 4 ساعات ، لقد وجدت أن جينكينز يستخدم ملفات التحويل المفقودة .babelrc إلى الخادم 。。。

GoToBoy في ٢٦ يوليو ٢٠١٩

لماذا هذا يخلق الخطأ؟

$ 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>

ServiceVisitMaintaint.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 };

larrym في ٢٦ يوليو ٢٠١٩

يرجى التحقق من إصدار رد الفعل الخاص بك.

icyJoseph في ٢٦ يوليو ٢٠١٩

$ npm ls رد فعل dom
[email protected] / mnt / g / development / javascript / pow-ignmain
└── رد فعل- [email protected]

larrym في ٢٦ يوليو ٢٠١٩

لقد واجهت هذا عندما أقوم بتصدير اتصال (mapStateToProps) (MyComponent) من المكتبة وباستخدام تلك المكتبة في تطبيق CRA الخاص بي.

ashokkumarsand في ٢٩ يوليو ٢٠١٩

لا ، كان هذا خطأي السيئ. الروتين الذي يسمى هذا استخدم رد فعل جهاز التوجيه دوم واستخدم خاصية العرض بدلاً من المكون.

larrym في ٢٩ يوليو ٢٠١٩

هل واجه أي منكم نفس المشكلة ولكن مع غاتسبي؟

أحصل على النتيجة التالية بعد أن أتفاعل مع npm ls:

و "npm ls reaction-dom"

في البداية ، اعتقدت أنني قد قمت بتثبيت تفاعل عالمي بطريق الخطأ ، بعد إلغاء التثبيت على مستوى العالم ، لم يتغير شيء. بعد ذلك ، حاولت إنشاء مشروع جديد تمامًا في دليل مختلف ، "gatsby new random-name" وأضفت ميزة صغيرة (أضف التعليقات ، متابعًا إلى https://www.youtube.com/watch؟ .be) إلى gatsby-starter-default لاختبار ما إذا كان الخطأ سيعيد إنتاج نفسه. حسنًا ، مما يثير استيائي ، لقد فعلت!

سيتم استقبال أي نصيحة أو كل النصائح بشكل جيد من قبل عامة الناس المحبطين.

xianrusso في ٣١ يوليو ٢٠١٩

👀2

ما زلت أواجه هذه المشكلة في القصص القصيرة. هل هذا الناتج من npm ls صحيح أم لا؟

zibra في ٢ أغسطس ٢٠١٩

في حالتي ، كان سبب المشكلة هو الوحدة النمطية why-did-you-update .

zibra في ٢ أغسطس ٢٠١٩

👍1

المستخدم إما مساحة العمل و lerna monorepo ورفع الحزمة. من شأنها أن تحل المشكلة.

ashokkumarsand في ٢ أغسطس ٢٠١٩

نواجه نفس المشكلة مع SSR. يبدو أنه يعمل من خلال تعيين externals: [“react”] في تكوين webpack الخاص بنا ثم تحميل react/umd/react.development.js يدويًا. هذا هو الألم ، ولكن أود أن أجد طريقة أبسط.

ianks في ٧ أغسطس ٢٠١٩

حسنًا ، أتمنى أن يساعد هذا شخصًا ما. كنا نحمل webpack runtime.js عدة مرات عن طريق الخطأ مما تسبب في وجود نسخ متعددة من React. تأكد من تحميل runtimeChunk (runtime.js) مرة واحدة فقط.

ianks في ٨ أغسطس ٢٠١٩

إذا كانت لديك مشكلة في اختبارات Jest مثلي ، فهذا ما يبدو أنه يصلح لي.
أضف هذا في jest.config.js

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

francisprovost في ١٣ أغسطس ٢٠١٩

👍10 ❤1

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

nandorojo في ١٣ أغسطس ٢٠١٩

لقد وجدت سببًا آخر للمشكلة والحل لها.

بيئتي هي electron و webpack لكن هذا قد يساعد أيضًا الأشخاص غير الإلكترونيين. قضيت أيامًا مؤلمة في محاولة لحل سبب ظهور رسالة الخطأ هذه بعد الترقية إلى React 16.9 (و React DOM 16.9).

في حالتي ، يبدو أن لديّ تفاعلين في التطبيق ، لكنني لم أتمكن من العثور على مكتبتين فعليتين في وحدات node_modules ، ولا حتى باستخدام npm ls react . حتى أنني استخدمت webpack-bundle-analyzer لإلقاء نظرة على ما بداخل الحزمة.

في النهاية ، اكتشفت أنه ليس لدي تفاعلين فعليًا في المشروع ، ولكن تمت الإشارة / تحميل React و React DOM مرتين في ملف HTML . يمكن التحقق من ذلك بسهولة عن طريق إضافة مثل console.log("React load") إلى index.js من مكتبة React.

تم ربط المصدر الحقيقي بـ electron-webpack . لم يتم تمييز التفاعل والتفاعل-dom على أنه خارجي ، لذلك تم تحميله في الحزمة وكذلك لاحقًا من وحدات node_modules بسبب طلب استخدامها في بعض الوحدات النمطية الأخرى.

كان الحل بسيطًا مثل إضافة هذه السطور إلى webpack.renderer.config.js :

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

travenec في ١٦ أغسطس ٢٠١٩

👍17 🎉10

حسنًا ، إذا كان أي شخص هنا يستخدم parcel.js ، لسبب غريب ، تمكنت من التخلص من الاستيراد التالي: import React from 'React'; وبمجرد أن بدأت في استخدام خطافات التفاعل ، تلقيت خطأ الانتهاك الثابت ولم أدرك أنه كان لأنني كنت أستورد بشكل غير صحيح باستخدام from 'React' بدلاً من from 'react' . عذرًا.

jamesguan في ١٨ أغسطس ٢٠١٩

هل واجه أي منكم نفس المشكلة ولكن مع غاتسبي؟
أحصل على النتيجة التالية بعد أن أتفاعل مع npm ls:
و "npm ls reaction-dom"
في البداية ، اعتقدت أنني قد قمت بتثبيت تفاعل عالمي بطريق الخطأ ، بعد إلغاء التثبيت على مستوى العالم ، لم يتغير شيء. بعد ذلك ، حاولت إنشاء مشروع جديد تمامًا في دليل مختلف ، "gatsby new random-name" وأضفت ميزة صغيرة (أضف التعليقات ، متابعًا إلى https://www.youtube.com/watch؟ .be) إلى gatsby-starter-default لاختبار ما إذا كان الخطأ سيعيد إنتاج نفسه. حسنًا ، مما يثير استيائي ، لقد فعلت!
سيتم استقبال أي نصيحة أو كل النصائح بشكل جيد من قبل عامة الناس المحبطين.

نعم لقد واجهت نفس المشكلة مثلك. لقد اتبعت النصيحة هنا ... ،

// 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 كان يجب أن يضاعف التبعية ، انظر هنا ...

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

على الرغم من أنه من الواضح أن عملية التفريغ لم تنجح.

ماذا حاولت؟

Sandbagger في ١٨ أغسطس ٢٠١٩

أتلقى هذا الخطأ عند محاولة الإنشاء باستخدام NextJS. تستخدم بعض المكونات واجهة المستخدم المادية وتزول المشكلة إذا قمت بإزالتها. أنا لا أستخدم المكونات المصممة. حاولت حذف node_modules وما إلى ذلك دون حظ. لقد حاولت إضافة أسماء مستعارة وحلقات react في ملف next.config.js و package.json بدون حظ. أنا أستخدم رد فعل 16.8.6 ، رد فعل دوم 16.8.6 ، و 9.0.4 التالي. يقول npm ls أن هناك واحدًا فقط من كلٍّ منهما. أنا لا أستخدم أي روابط npm.

المستودع: https://github.com/dancancro/questions/tree/invalid-hook-call

Codesandbox موجود هنا: https://codesandbox.io/s/github/dancancro/questions/tree/invalid-hook-call/؟fontsize=14

Stackoverflow: https://stackoverflow.com/questions/57647040/nextjs-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-fun

الخطأ موجود هنا: https://gist.github.com/dancro/2dfafb053aaaedfade406fd4f67eb68a
... تقديم -> RenderToString -> ReactDOMServerRenderer.read -> ReactDOMServerRenderer.render -> Object.WithStyles [as render] ...

الخطاف المخالف هو استدعاء useStyles() على السطر 17428 من الملف التالي في دالة withStyles . ابحث عن "var class = useStyles (props)". تكمن المشكلة في الكود الذي تم إنشاؤه nextjs. الكود الذي كتبته لا يستخدم withStyles أو أي خطافات أو أي وظائف تبدأ بـ "use *"

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

تحديث: أدت إزالة هذا من next.config.js إلى حل المشكلة:

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

dancancro في ٢٦ أغسطس ٢٠١٩

اكتشفت حلاً بديلاً عن طريق حذف react و react-dom من مجلد node_modules بالحزمة المرتبطة.

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

هذا هو الحل:

الحزمة أ: حزمة كود مكتبتك ، كانت npm link 'd
الحزمة ب: حزمة كود التطبيق الخاص بك. يحتوي على ارتباط رمزي في مجلد node_modules للحزمة أ

حزمة البناء أ. تنتج Mine أصولها إلى dist/ ، بما في ذلك node_modules
في المجلد (أ) الموزع node_modules ، احذف react و react-dom
؟؟؟
ربح!

لاحظ أنني قمت بتثبيت نفس الإصدار من React في كلا الحزمتين. سيكون عليك إعادة تشغيل أي عمليات قيد التشغيل.

dmart914 في ٢٨ أغسطس ٢٠١٩

👍5 🎉2 🚀1 😄1

إزالة الأعمال غير المتوافقة مع why-did-you-update بالنسبة لي. (https://github.com/maicki/why-did-you-update/issues/52)

bertho-zero في ٢٨ أغسطس ٢٠١٩

غير متوافق لماذا قمت بالتحديث

@ bertho-zero يمكن استخدام أدوات devtools الجديدة أو استخدام الخطاف الخاص بي useWhyDidYouUpdate

brunolemos في ٢٨ أغسطس ٢٠١٩

👍1

brunolemos إنه رائع ولكنه أكثر تقييدًا لأنه يجب عليك وضعه على كل مكون.

bertho-zero في ٢٨ أغسطس ٢٠١٩

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

AndrewCraswell في ٣ سبتمبر ٢٠١٩

👀1 👍1

لا يعمل الحل المتعلق بإزالة الوحدة النمطية react للحزمة المرتبطة إذا كانت هذه الحزمة تحتوي على اختبارات تتطلب react (على سبيل المثال ، @testing-library/react أو @testing-library/react-hooks ) ، لذلك يبدو أننا ما زلنا بحاجة إلى طريقة أفضل للتعامل مع هذا الأمر.

mcmillion في ١٠ سبتمبر ٢٠١٩

يتكون طلبي من جزأين. تطبيق الويب الرئيسي والوحدة النمطية التي يتم تحميلها ديناميكيًا في تطبيق الويب. يستخدم كل من تطبيق الويب والوحدة React 16.9.0.
يتم تحميل الوحدة في تطبيق الويب باستخدام React.lazy () و dynamic import ().
عندما يتم تحميل الوحدة النمطية يتم إلقاء الخطأ "استدعاء ربط غير صالح".

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

إضافة اسم مستعار في webpack.config للوحدة النمطية والذي يشير إلى رد فعل التطبيق الرئيسي كما هو مقترح من قبل apieceofbart.
الاسم المستعار: {
رد فعل: path.resolve ("../../ node_modules / رد فعل")
}
حاولت توجيه تبعيات التفاعل في package.json للوحدة النمطية إلى التطبيق الرئيسي.
"التبعيات": {
"رد فعل دوم": " ملف: ../ مشترك / node_modules / رد فعل دوم "،
"رد فعل": " ملف: ../ مشترك / node_modules / رد فعل "
}

أعتقد أن رد فعل يجب أن يدعم تشغيل نسخ متعددة عندما يتعلق الأمر بالوحدات التي يتم تحميلها ديناميكيًا.

rajithaw في ١١ سبتمبر ٢٠١٩

بناءً على بعض الردود أعلاه ، إليك ما نجح معي:

تمت إضافة ما يلي إلى 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'
  }
}

تم تحرير package.json

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

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

تم تعديله 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>
...

بعد ذلك ، تمكنت من تشغيل الخطافات في مكتبتي باستخدام React المحملة من CDN ، بينما استمر Jest في تحميل نسخة التفاعل من node_modules (مثبتة من devDependencies).

امل ان يساعد

hodgef في ١١ سبتمبر ٢٠١٩

👍4 👀1

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

حاول استخدام مكون عالي المستوى في هذه الحالة

استيراد رد من "رد فعل" ؛
استيراد PropTypes من "أنواع العناصر" ؛
استيراد {withStyles} من "@ material-ui / styles" ؛
زر استيراد من "@ material-ui / core / Button" ؛

أنماط const = موضوع => ({
جذر: {
الخلفية: "تدرج خطي (45 درجة ، # FE6B8B 30٪ ، # FF8E53 90٪)" ،
الحد: 0 ،
راديوس: 3 ،
boxShadow: "0 3px 5px 2px rgba (255، 105، 135، .3)" ،
اللون الابيض'،
ارتفاع: 48 ،
المساحة المتروكة: "0 30 بكسل" ،
} ،
}) ؛

تعمل الفئة HigherOrderComponent على توسيع React.Component {

يقدم - يجعل(){
const {class} = this.props؛
إرجاع (
مكون عالي الرتبة
) ؛
}
}

HigherOrderComponent.propTypes = {
الفصول الدراسية: PropTypes.object.isRequired ،
} ؛

تصدير افتراضي مع أنماط (أنماط) (HigherOrderComponent) ؛

abdulmoizshaikh في ٢٠ سبتمبر ٢٠١٩

أنا أستخدم Yarn ، وقد أصلحت هذا عن طريق فرض الحل في package.json :
  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

هل أضفت في حزمة الوالدين أو الطفل؟

iwarner في ٢١ سبتمبر ٢٠١٩

بناءً على بعض الردود أعلاه ، إليك ما نجح معي:
تمت إضافة ما يلي إلى 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'
  }
}
تم تحرير package.json
"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}
"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}
تم تعديله 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>
...
بعد ذلك ، تمكنت من تشغيل الخطافات في مكتبتي باستخدام React المحملة من CDN ، بينما استمر Jest في تحميل نسخة التفاعل من node_modules (مثبتة من devDependencies).
امل ان يساعد

لا إهانة ، ولكن من المزعج أن مثل هذه الحلول يجب اتباعها. لقد كنت أحاول حل هذا الخطأ خلال اليومين الماضيين دون الاعتماد على مثل هذه الاختراقات.

أنا أعمل على مكتبة قابلة لإعادة الاستخدام تحتوي على مكونات باستخدام الخطافات. أحتاج إلى اختبارها في مشاريع فعلية قبل نشرها. الحل الوحيد لذلك هو استخدام yarn|npm link . أقوم بتجميع المكتبة باستخدام التجميع ، ويمكنني التحقق من أن الحزمة لا تحتوي على نسخة من رد الفعل. عندما أقوم بتجميع (حزمة الويب) التطبيق الذي يستخدم المكتبة ، يظهر الخطأ / المشكلة. يحدث هذا للتطبيقات العارية create-react-app و next.js للتطبيقات أيضًا. كلا الإطارين يستخدمان حزمة الويب في الخلفية.

هل وجد أي شخص حلاً مستدامًا حتى الآن؟

kelvinlouis في ٢٤ سبتمبر ٢٠١٩

👀2

بالتخلي عن npm|yarn link تمامًا ، تمكنت من حل المشكلة. بدلاً من ذلك ، أستخدم هذه المكتبة الجميلة ، والتي لا تعرف بنية مشروعك. كما يتيح لك أيضًا الاستمرار في استخدام حزمة الويب كمجمع ، لذلك لا يتعين عليك إعلان _react_ و _react-dom_ على أنهما external أو alias . لسوء الحظ ، فإنه يقدم بعض الدلائل الجديدة ويقفل الملفات للمشروع ، ولكن مهلا ، إنه يعمل ... محليًا وحتى داخل حاويات عامل الإرساء لدينا.

kelvinlouis في ٢٥ سبتمبر ٢٠١٩

👀2

ربما سيكون هذا في القائمة مفيدًا بعض الشيء:

وصلة

woles في ٢٦ سبتمبر ٢٠١٩

👍1

GabrielBB شكرا ، إنه عمل بالنسبة لي

behnammodi في ٢٦ سبتمبر ٢٠١٩

@ dmart914 شكرا! الحل الوحيد الذي يناسبني حتى الآن :)

maciekgrzybek في ٢٩ سبتمبر ٢٠١٩

تتلقى حاليًا تحذير React Invalid Hook Call عند استخدام إعداد بسيط ومباشر.

مكون الوظيفة هذا:

يستخدم نفس الإصدار لـ React و ReactDOM.
يتبع قواعد الخطافات.
لديه نسخة واحدة فقط من React.

__ التبعيات__
رد @ 16.10.1
رد فعل[email protected]
[email protected]
[email protected]

وتشغيل webpack test.js -o main.js للبناء.

أتوقع أن هذا الملف:

رندر الصندوق.
- أوقف المصحح مؤقتًا قبل استدعاء React.useState .
- أنشئ قيمة منطقية test وقم بتحديث رد الاتصال updateTest .
- يلقي خطأ React.
- عند التقديم ، قم بإجراء عمليات رد النداء React.useEffect .
- يلقي خطأ React.

هل أفعل شيئًا خاطئًا أم أن هناك شيئًا آخر يحدث؟

// 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();

ckmahoney في ٢ أكتوبر ٢٠١٩

لقد نسيت إنشاء عنصر بالفعل. أنت تستدعي Item() بشكل متزامن قبل أن تصل إلى المكالمة ReactDOM.render . تحتاج إلى تمرير el(Item) .

Jessidhia في ٢ أكتوبر ٢٠١٩

👍1

صحيح! شكرا لك على المعلومات.

ckmahoney في ٢ أكتوبر ٢٠١٩

أنا في وضع مماثل لبعض المعلقين الآخرين. أنا أستخدم حزمة الويب لتحويل بعض مكونات التفاعل (بعضها يستخدم الخطافات) ووضع الشفرة المنقولة في مجلد lib . لقد أضفت رد فعل إلى الحقل externals لتكوين حزمة الويب حتى لا يتم تجميعها مع كود المكون. أرغب في استخدام هذه المكونات في مشروعين منفصلين - فهذه المكونات مشتركة بينهما ولذا نود تطويرها في مكان واحد وجعل التحديثات تنعكس في كلا التطبيقين.

إذا تمت إضافة التبعية باستخدام common-components: file:../../common-components/lib في package.json ، فسيتم تحميل المكونات بشكل مثالي ، ولكن تشغيل حزمة الويب لا يؤدي إلى تحديث المكونات على الفور - بدلاً من ذلك ، يجب أن أقوم بتشغيل yarn upgrade common-components ثم إعادة تشغيل خادم dev.

إذا تمت إضافة التبعية باستخدام common-components: link:../../common-components/lib ، فستؤدي إعادة تشغيل webpack إلى تحديث الملفات في node_modules للتطبيق الرئيسي (نظرًا لأنه يستخدم ارتباطًا رمزيًا الآن) ، ولكني أتلقى الخطأ أعلاه المتمثل في مثيلات متعددة من تتفاعل. أفترض أنه يستخدم الآن الإصدار التفاعلي الموجود في المجلد common-components/node_modules .

هل هناك طريقة لاستخدام الروابط الرمزية (مثل common-components: link:../../common-components/lib ) ، مع التأكد أيضًا من استخدام المكونات المرتبطة للتفاعل الموجود في مجلد node_modules للتطبيق الرئيسي؟ نظرًا لأنني أخطط لاستخدام هذه المكونات في كلا التطبيقين ، لا يمكنني ربط حزمة التفاعل من أحدهما بمكتبة المكونات الشائعة وأود تجنب ربط تفاعلات التطبيقات الرئيسية مع تلك المستخدمة في حزمة المكونات المشتركة. لقد رأيت بعض التعليقات التي تشير إلى حقل webpack resolve الذي يبدو واعدًا ولكني غير قادر على تشغيله. أي مساعدة سيكون موضع تقدير كبير!

تحرير: لأي شخص مهتم بحالة الاستخدام الخاصة بنا ، انتهى بنا الأمر بتغيير خطوة الإنشاء لنسخ الملفات ببساطة إلى المشروعين المطلوبين فيهما ، وتجنب النقل تمامًا.

ZM123 في ٢ أكتوبر ٢٠١٩

قد يكون أحد الحلول السريعة هو عدم نشر الحزمة ، ولكن فقط دفعها إلى github واستيرادها إلى مشروعك باستخدام yarn add <git-url> .

eskawl في ١٦ أكتوبر ٢٠١٩

قد يكون أحد الحلول السريعة هو عدم نشر الحزمة ، ولكن فقط دفعها إلى github واستيرادها إلى مشروعك باستخدام yarn add <git-url> .

السبب الذي يجعل الكثير منا يستخدم المسارات النسبية للحزمة npm link و npm هو تطوير واختبار الكود دون الحاجة إلى نشر التغييرات على NPM أو GitHub قبل أن نعرف أنه سيعمل.

JeremyGrieshop في ١٦ أكتوبر ٢٠١٩

لقد واجهنا هذه المشكلة المتعلقة بـ https://github.com/facebook/react/issues/13972#issuecomment -447599035 حيث أعتقد أن هذا يمكن أن يكون بسبب خادم Webpack'd Node. كانت حالة الاستخدام الخاصة بنا عبارة عن اختبار تكامل يتم تشغيله داخل Jest والذي تم تشغيله 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 في النسخة المترجمة من هذا الملف:

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

أين
_react من ESM import React from 'react' في هذا الملف
_react2 من CJS var _react = _interopRequireDefault(require("react")); من داخل node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js

أعتقد أن هذا تسبب في عدم تساوي الإشارة إلى React في المكانين (ملف عرض الخادم ، وداخل حزمة @apollo/react-ssr ) وبالتالي تسبب في طرح الخطأ.

وجدنا أن هذا ربما كان ناتجًا عن الاستخدام الآلي لـ webpack() من داخل الاختبار ، وقمنا بإعادة تشكيل هذه الاختبارات لتكون اختبارات شاملة. الدرس هو أنه إذا كانت المشكلة تحدث فقط في كود الاختبار ، فقد تكون لديك اختبارات معقدة للغاية.

bwhitty في ١٧ أكتوبر ٢٠١٩

❤1

تمكنت من حلها مع الغزل:

cd إلى myApp/node_modules/react و yarn link

ثم في مكتبتك ، قم بتشغيل yarn link react

تستخدم مكتبتك الآن نفس إصدار التفاعل تمامًا مثل تطبيقك الرئيسي

حاولت ضبط رد الفعل على أنه تبعية الأقران في lib الخاص بي ولكن بعد ذلك لن يبني lib

danydhondt في ٢١ أكتوبر ٢٠١٩

👍5 😄3 👎3 🎉2

كيف يمكن إصلاح ذلك باستخدام create-react-app بدون إخراج أو التبديل إلى yarn ؟

renanvalentin في ٢١ أكتوبر ٢٠١٩

يمكنك فقط استخدام نفس الأسلوب بالضبط باستخدام رابط npm. لا حاجة للقذف.

danydhondt في ٢٢ أكتوبر ٢٠١٩

لا يعد ربط react أفضل فكرة عند العمل في مشاريع متعددة بإصدارات مختلفة.

woles في ٢٣ أكتوبر ٢٠١٩

👍2

woles أنت على حق تمامًا ولكن في حالتي ، هذا يحل مشكلة "الخطافات" الخاصة بي. آمل أن يتوصل المطورون في رد الفعل إلى حل أفضل

danydhondt في ٢٣ أكتوبر ٢٠١٩

👍1

أهلا،
لقد أصلحت هذا الخطأ بعد ساعات من إدراك أنني استخدمت المكون عن طريق الخطأ داخل جهاز التوجيه المتفاعل.

كان تطبيقي يعمل ولكن في مكون واحد لم أتمكن من إضافة useState على الإطلاق. السبب هو أنني استخدمت المكون داخل طريقة عرض أجهزة التوجيه التفاعلية بدون وظيفة الترتيب الأعلى مثل هذا:
<Route exact path="/path" render={ ComponentCausingTheErrorMesage }/>
التبديل إلى
<Route exact path="/path" component={ ComponentNowWorkingAgain }/>
أصلحه لي

aricma في ٢٣ أكتوبر ٢٠١٩

كنت أستخدم npm link بين تطبيق ووحدة كنت أعمل عليها بنشاط ، واضطررت إلى إصلاحها عن طريق ربط التطبيق react و react-dom بالوحدة النمطية ، ثم الربط الوحدة النمطية للتطبيق:

في التطبيق:

cd node_modules/react && npm link
نفس الشيء مقابل react-dom

في الوحدة:

npm link react && npm link react-dom
npm link

في التطبيق:

npm link [module-name]

أمل أن هذا يساعد شخصاما

kristojorg في ٧ نوفمبر ٢٠١٩

👍6 ❤2 🎉2

كان لدينا خطافات تعمل من جانب العميل ولكننا كنا نواجه هذا الخطأ في SSR. قام زميلي بحل هذا الأمر من خلال ما يلي في تهيئة حزمة الويب من جانب الخادم:

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

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

sandinmyjoints في ٧ نوفمبر ٢٠١٩

تمكنت من حلها مع الغزل:
cd إلى myApp/node_modules/react و yarn link
ثم في مكتبتك ، قم بتشغيل yarn link react
تستخدم مكتبتك الآن نفس إصدار التفاعل تمامًا مثل تطبيقك الرئيسي
حاولت ضبط رد الفعل على أنه تبعية الأقران في lib الخاص بي ولكن بعد ذلك لن يبني lib

هذا يعمل بشكل جميل فقط

viniciusrangelfp في ٨ نوفمبر ٢٠١٩

واجهت للتو هذه المشكلة ، عند استخدام حزمة الويب الإلكترونية ، تفاعل مع واجهة المستخدم المادية في نفس الوقت. عندما أحاول استخدام أي شيء من واجهة المستخدم المادية - أتلقى هذا الخطأ (على سبيل المثال ، حاول استخدام

ZVER3D في ١٢ نوفمبر ٢٠١٩

مرحبًا ZVER3D ، حاول قراءة تعليقي السابق. أتمنى أن يساعد!

travenec في ١٢ نوفمبر ٢٠١٩

👍1

كنت أستخدم 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]`
أمل أن هذا يساعد شخصاما

عزيزتي موسى ، لقد ساعدني هذا كثيرًا. لم تفكر حتى في أن المشكلة هي نسخ مختلفة من رد الفعل !! أقوم بإنشاء مكون محليًا لنشره على NPM ولكن لدي مشروع منفصل لاختباره محليًا ، باستخدام رابط npm. من الواضح (الآن) كلاهما يستخدم إصدارات مختلفة من التفاعل. D'oh!

bpk68 في ١٢ نوفمبر ٢٠١٩

مرحبًا ZVER3D ، حاول قراءة تعليقي السابق. أتمنى أن يساعد!

شكرا لتشير لي في الاتجاه الصحيح. كان الحل الآخر هو إضافة مكتبة ui ، التي تستخدمها في "whiteListedModules". ستكون المشكلة الوحيدة هي أنه سيتعين عليك القيام بذلك لجميع الوحدات التي تتطلب الرد على التجميع.
لذلك ، في package.json كتبت هذا:

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

ZVER3D في ١٣ نوفمبر ٢٠١٩

👍1

أقوم بتطوير تطبيق React باستخدام نهج monorepo. لدي تطبيق رئيسي ( brush ) ومكون مكتبة تفاعل ( react-gbajs ).

لذلك عندما أحاول عرض مكون react-gbajs الخاص بي ، لدي هذا الخطأ حول مثيلات متعددة من React. إذا قمت بنسخ الرمز نفسه ولصقه على brush ، فليس لدي أي مشكلة.
لقد اتبعت العديد من الأساليب لإصلاحها ، لكنني لم أحلها (تغيير البناء على Webpack ، مساحة عمل Yarn ، رابط npm ...)

حاولت تصحيح الأخطاء للتحقق مما إذا كان لدي بالفعل نسختان من نظام التشغيل React (باستخدام console.log(window.React1 === window.React2) من مستند React) ، ولكن تم تقييمه على أنه true !
(الحل البديل السيئ للغاية الذي أستخدمه الآن هو تمرير الخطافات كدعم: <GBAEmulator useEffect={useEffect} /> ... لكنني لا أريد حقًا دمجها)

أي شخص لديه بعض الأفكار لإصلاحها؟

مشروعي مفتوح المصدر وأضيف مكوّن مكتبة التفاعل الجديد هذا في هذا الفرع: https://github.com/macabeus/klo-gba.js/blob/ac18f4d42b122c333622f502947135c2de217ce2/react-gbajs/src/index.js#L251 -ل 274

macabeus في ١٧ نوفمبر ٢٠١٩

👍1

أهلا بكم،

لدي تطبيق (myApp) يستخدم مكتبة مخصصة (myDepPackage) كتبعية. كلاهما يستخدم webpack كأداة بناء وبالطبع كنت أواجه نفس الخطأ. لم يعمل أي من الحلول المذكورة أعلاه بالنسبة لي. ما فعله ، هو إجبار حزمة الويب على عدم تضمين رد الفعل في الحزمة النهائية للمكتبة المخصصة (myDepPackage). سطر التكوين الوحيد الذي اضطررت لإضافته إلى تهيئة webpack (من myDepPackage) هو أدناه:

externals: {
  react: "react",
},

يمكنك معرفة المزيد حول خيار "العناصر الخارجية" هنا: https://webpack.js.org/configuration/externals/#externals

tsevdos في ١٨ نوفمبر ٢٠١٩

👍21 ❤14 🚀7 👀6 🎉2

tsevdos Veeeery شكرا لك !!! ❤️
لقد حل مشكلتي التي قلتها في التعليق السابق.

macabeus في ١٨ نوفمبر ٢٠١٩

👍1

بالنسبة لنا ، كانت المشكلة أن لدينا تطبيق React قابل للتضمين يتم تحميله في الصفحة من رمز قصير في WordPress ويتم تثبيته على div بمعرف عشوائي. في بعض الصفحات ، لدينا العديد من التطبيقات المضمنة وكانت تعمل بشكل جيد حتى بدأنا في استخدام الخطافات.

ستشتكي فقط من الصفحات التي تحتوي على العديد من التطبيقات المضمنة ، لذلك كان الحل هو تحديث الرمز المختصر لـ WP لتحميل البرنامج النصي بالبناء مرة واحدة فقط.

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

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

florantara في ١٩ نوفمبر ٢٠١٩

👍2

ما نجح بالنسبة لي هو مزيج من اقتراحين من سلسلة المحادثات هذه.

تكوين حزمة الويب للتطبيق الرئيسي ( اقتراح apieceofbart )

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

تهيئة حزمة ويب التبعية ( اقتراح tsevdos )

  externals:
    react: 'react'
  }

kevireilly في ٢٢ نوفمبر ٢٠١٩

👍3 🚀1

كنت أواجه هذه المشكلة مع 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 بدا هكذا.

<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>

آمل أن يساعد شخصًا ما يبحث عن حل!

leejh3224 في ٢٣ نوفمبر ٢٠١٩

❤1 🎉1 👍1

اعلم أن المكتبات المعتمدة على React قد تتسبب أيضًا في حدوث هذه المشكلات. في حالتي ، كنت أستخدم إصدارات مختلفة من @emotion/core و @emotion/styled .

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

awdyson في ٢٣ نوفمبر ٢٠١٩

أهلا،

أحد الحلول الممكنة بدون إخراج هو مزج حل تكوين الاسم المستعار webpack مع مكتبات التخصيص- cra والتفاعل-التطبيقات التي تم إعادة توصيلها. بهذه الطريقة ، يمكنك تجاوز فقط تكوين حزمة الويب الضرورية لحل المشكلة ، عن طريق إنشاء ملف 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')),
  }),
);

jecastro2 في ٢٥ نوفمبر ٢٠١٩

👍3

واجهت هذه المشكلة على موقع Gatsby ، وقمت بتشغيل تثبيت npm وتحديثه إلى أحدث إصدار من Gatsby وقام بإصلاحه جميعًا

OliverHuntsman في ٣٠ نوفمبر ٢٠١٩

إذا كنت تواجه مشكلة في إجراء اختبار الدعابة تشغيل yarn or npm test (كما كنت) وكنت تستخدم react-test-renderer ، فتأكد من أن react-test-renderer يطابق الإصدار نفسه من react انت تستخدم.

مثال:

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

قم بتشغيل yarn add [email protected]

evanlesmez في ٢ ديسمبر ٢٠١٩

لدي lib وتحققت من جميع إصدارات react و react-dom في كل من lib والمشاريع الرئيسية. هم بالضبط نفس الشيء لكنهم لم يعملوا.
ومع ذلك ، حل apieceofbart يعمل بالنسبة لي.

arminyahya في ٧ ديسمبر ٢٠١٩

❤1 🎉1

apieceofbart ، لقد وفرت يومي <3

netojose في ٨ ديسمبر ٢٠١٩

❤1

ما نجح بالنسبة لي هو مزيج من اقتراحين من سلسلة المحادثات هذه.
تكوين حزمة الويب للتطبيق الرئيسي ( اقتراح apieceofbart )
  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }
تهيئة حزمة ويب التبعية ( اقتراح tsevdos )
  externals:
    react: 'react'
  }

نفس الشيء هنا. أحتاج إلى إجراء هذين الإصلاحين لإنجاحه. تفسيري هو أن التكوين الثاني يخبر التبعية لاستخدام رد فعل خارجي بالاسم "رد فعل" ، ويشير التكوين الأول الاسم "رد فعل" إلى مجلد "node_modules / رد فعل" في المستودع الرئيسي. لذلك ، كلاهما ضروري لجعل جسر التفاعل يعمل.

ومع ذلك ، يبدو أن واحدًا منهم يكفي لبعض الناس ، وهو ما لا أفهمه حقًا.

ghost في ١٢ ديسمبر ٢٠١٩

👍4

ما نجح بالنسبة لي هو مزيج من اقتراحين من سلسلة المحادثات هذه.
تكوين حزمة الويب للتطبيق الرئيسي ( اقتراح apieceofbart )
  resolve: {
    alias: {
      react: resolve('./node_modules/react')
    }
  }
تهيئة حزمة ويب التبعية ( اقتراح tsevdos )
  externals:
    react: 'react'
  }
نفس الشيء هنا. أحتاج إلى إجراء هذين الإصلاحين لإنجاحه. تفسيري هو أن التكوين الثاني يخبر التبعية لاستخدام رد فعل خارجي بالاسم "رد فعل" ، ويشير التكوين الأول الاسم "رد فعل" إلى مجلد "node_modules / رد فعل" في المستودع الرئيسي. لذلك ، كلاهما ضروري لجعل جسر التفاعل يعمل.
ومع ذلك ، يبدو أن واحدًا منهم يكفي لبعض الناس ، وهو ما لا أفهمه حقًا.

العنصر الثاني مهم!
إذا تم التجاهل ، في عملية الإنشاء ، فسيتم تصدير التفاعل معًا ، لأنه تبعية داخلية

netojose في ١٢ ديسمبر ٢٠١٩

👍3

الحب الكبيرapieceofbart !!!! كنت على وشك ركل مكتبي عبر الحائط

coderdix في ١٤ ديسمبر ٢٠١٩

❤1

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

أيه أفكار؟

ugg0t في ١٥ ديسمبر ٢٠١٩

هل هناك حل لاستخدام خطاطيف التفاعل مع رابط npm ، ولا يتطلب إخراجًا من CRA؟

tschellenbach في ١٧ ديسمبر ٢٠١٩

👍2

تضمين التغريدة
يمكنك استخدام craco للكتابة فوق تكوين CRA بدون إخراج.
https://github.com/gsoft-inc/craco

arminyahya في ١٧ ديسمبر ٢٠١٩

بفضل tsevdos ، قمت بحل مشكلتي وقمت بعمل برنامج تعليمي حول كيفية إنشاء حزمة React: https://youtu.be/esyS87NfBOw

guandjoy في ١٧ ديسمبر ٢٠١٩

👍1

كنت أتلقى هذه المشكلة ولم يتم تطبيق حل webpack لأنني أستخدم أداة تجميع الطرود بدلاً من ذلك. تمكنت من إصلاحه من خلال تحديد اسم مستعار في package.json من تطبيقي الرئيسي الذي يشبه هذا

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

ewan-m في ١٩ ديسمبر ٢٠١٩

👍7 🎉3 🚀1 ❤1 😄1

مواجهة مشكلات بمحاولة استخدام مكونات React الخاصة بي (مكتوبة بخطافات) في تطبيق إلكتروني في نفس المشروع باستخدام حزمة مختلفة من json. تبدو بنية الملف كما يلي:

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

يتضمن كلا package.json رد فعل و رد فعل دوم في package.json لكنهما من نفس الإصدارات ولا أرى أنهما يظهران عمليتي تثبيت متفاعلين عندما أقوم بـ npm ls react . أيه أفكار؟

تحرير: نجح حل @ ewan-m!

davidsth في ١٩ ديسمبر ٢٠١٩

🎉1

لذلك واجهت حالة غريبة ، على ما أعتقد. تحتوي مكتبة الطرف الثالث للأسف على مكونات وظيفية ومكونات قائمة على الفصل. مكوناتي في قاعدة الكود الخاصة بي وظيفية. يعمل المكون المستند إلى الفصل من المكتبة كتخطيط يجعل المكون الخاص بي كطفل. أعتقد أن هذا هو ما يتسبب في ظهور "خطأ: اتصال ربط غير صالح". كيف يمكنني التغلب على ذلك لاستخدام الخطافات ، هل أحتاج إلى تحويل مكوني إلى مكون فئة؟

iantbutler01 في ٢٣ ديسمبر ٢٠١٩

GrandathePanda لمزج الطبقات والمكونات الوظيفية لا يجب أن تهم. إذا كان الفصل يستدعي وظيفة وظيفية ، والتي تستدعي الخطاف ، فلا توجد مشكلة هناك. الشيء الوحيد الذي لا يمكنك فعله هو استدعاء الخطاف مباشرة من الفصل.

JeremyGrieshop في ٢٣ ديسمبر ٢٠١٩

حسنًا ، JeremyGrieshop ، فلا يزال لدي بعض التحقيقات التي يجب القيام بها ، إذا قدمت دون استخدام مكون الطرف الثالث ، فسيكون ذلك جيدًا ، لذلك هناك بعض التعارض بين تلك المكتبة والرمز الخاص بي في ذلك الوقت. إذا كان عليّ أن أخمن أنهم يستخدمون إصدار رد فعل مختلف ربما في الحزمة الخاصة بهم.

iantbutler01 في ٢٣ ديسمبر ٢٠١٩

حسنًا ، JeremyGrieshop ، فلا يزال لدي بعض التحقيقات التي يجب القيام بها ، إذا قدمت دون استخدام مكون الطرف الثالث ، فسيكون ذلك جيدًا ، لذلك هناك بعض التعارض بين تلك المكتبة والرمز الخاص بي في ذلك الوقت. إذا كان عليّ أن أخمن أنهم يستخدمون إصدار رد فعل مختلف ربما في الحزمة الخاصة بهم.

حسنًا ، تحقق من npm ls react react-dom من تطبيقك لمعرفة ما إذا كانت هناك إصدارات متعددة. من الممكن أن يكون لمكتبة الطرف الثالث تبعية بإصدار معين.

JeremyGrieshop في ٢٣ ديسمبر ٢٠١٩

JeremyGrieshop لذلك يبدو أن تطبيقي يستخدم 16.12.0 للتفاعل و dom والطرف الثالث (واجهة مستخدم البحث المرنة) يستخدم 16.8.0 للتفاعل و dom. إذا كنت على صواب ، فالمشكلة هي أنه نظرًا لأن مكتبة الجهة الخارجية 16.8.0 الخاصة بي تعرض المكون الذي تم إنشاؤه باستخدام 16.12.0 ، فهل سيؤدي ذلك إلى حدوث المشكلة؟ وهي أيضًا عبارة عن lerna monorepo والتي من المحتمل أن تزيد من تعقيد هذا الأمر بعد قراءة جميع التعليقات المذكورة أعلاه. نشأت المشكلة من خطاف useStyles الذي تم إنشاؤه في materialui ، فهم يزودون بخاصية withStyles للتوافق مع الإصدارات السابقة وأعتقد في هذه الأثناء أنني سأذهب إلى هذا الطريق. تبدو جميع التغييرات التي تم إجراؤها على webpack و / أو حزمة json المذكورة أعلاه حقًا وكأنها عصابة قابلة للكسر أكثر من مجرد الذهاب مع مخصص كلاسيكي في هذه الأثناء بينما تكتشف الخطافات كيفية النضج في مواجهة العديد من مراوغات التنفيذ المختلفة.

iantbutler01 في ٢٣ ديسمبر ٢٠١٩

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

يمكن وضع الأمر أعلاه في "الإنشاء المسبق" و "الإعداد المسبق" ضمن جزء "البرامج النصية" من الحزمة. json (وهو ما أفعله حاليًا). الجانب السلبي لـ (3) ، على ما أعتقد ، هو إذا تستخدم أي شيء تم إيقاف العمل به بين 16.8 و 16.12.

JeremyGrieshop في ٢٣ ديسمبر ٢٠١٩

أهلا بكم،
لدي تطبيق (myApp) يستخدم مكتبة مخصصة (myDepPackage) كتبعية. كلاهما يستخدم webpack كأداة بناء وبالطبع كنت أواجه نفس الخطأ. لم يعمل أي من الحلول المذكورة أعلاه بالنسبة لي. ما فعله ، هو إجبار حزمة الويب على عدم تضمين رد الفعل في الحزمة النهائية للمكتبة المخصصة (myDepPackage). سطر التكوين الوحيد الذي اضطررت لإضافته إلى تهيئة webpack (من myDepPackage) هو أدناه:
externals: {
  react: "react",
},
يمكنك معرفة المزيد حول خيار "العناصر الخارجية" هنا: https://webpack.js.org/configuration/externals/#externals

tsevdos أحبك. لقد وضعت حدًا لبعض الأيام من المتاعب الشديدة. شكرا لك.

Totone في ٢٦ ديسمبر ٢٠١٩

👍4 🎉1

مرحبا جميعا،

أحاول استخدام رابط في أحد المكونات ، سيتم تصدير هذا المكون من gatsby-browser.js .

ما هو السلوك الحالي؟

سأتعامل مع هذا الخطأ:

رفض غير معالج (خطأ): استدعاء ربط غير صالح. لا يمكن استدعاء الخطافات إلا داخل جسم مكون الوظيفة. قد يحدث هذا لأحد الأسباب التالية:
قد يكون لديك إصدارات غير متطابقة من React والعارض (مثل React DOM)
ربما تكون قد انتهكت قواعد الخطافات
قد يكون لديك أكثر من نسخة واحدة من React في نفس التطبيق
راجع 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

davifantasia في ١٠ يناير ٢٠٢٠

@ leejh3224 شكرا جزيلا يا صاح! بعد ساعات من البحث وجدت هذه الإجابة ، لقد حلت مشكلتي.
فقط غيرت تهيئة HtmlWebpackPlugin من
inject: true to inject: 'head' واختفت أخطاء التفاعل المصغرة.

ccarnivore في ١٤ يناير ٢٠٢٠

لقد قمت بإنشاء سؤال stackoverflow مع تجربتي في محاولة جعل هذا يعمل. هل من الممكن ، لأولئك الذين تمكنوا من جعل هذا يعمل ، إلقاء نظرة عليه وتقديم بعض النصائح؟

Meberem في ٢١ يناير ٢٠٢٠

أنا أنقل تطبيق jquery إلى React. لديّ أداة لفضح مكونات React داخل jQuery تسمى asJqueryPlugin . ها هو الملف:

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.$)
}

يحتوي التطبيق على العديد من نقاط الدخول في Webpack ، ويستخدم حوالي 3-4 مكونات هذه التقنية الآن. عندما يتم تجميع المكونات في حزم مختلفة لنقاط الإدخال ، أعتقد أن هذا هو الوقت الذي تحدث فيه المشكلة.

لذلك إذا كان لدي نقطتا إدخال في Webpack:

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>

... حصلت على هذا الخطاف الخطأ.

لست متأكدًا مما إذا كان هذا يساعد المحادثة أم لا ، ولكن على الأقل يُظهر حالة استخدام لكيفية قيام مطور عاقل (بشكل مشكوك فيه) بوضع نفسه في موقف به حالات رد فعل متعددة.

timkindberg في ٢٩ يناير ٢٠٢٠

ساعدني ذلك - https://github.com/facebook/react/issues/13991#issuecomment -554928373
ولكن كان علي أيضًا إزالة react و react-dom من التبعيات ونقلها إلى تبعيات النظير وإلغاء تثبيت وحدات العقدة وإعادة تثبيتها.

maciekgrzybek في ٣٠ يناير ٢٠٢٠

👍1

أهلا،
قرأت المحادثة والعديد من المنشورات على الويب وما زلت عالقًا مع الخطأ عدة مرات من رد الفعل.
أدفع هذا الريبو لإعادة إنتاج الخطأ: https://github.com/jeromelegrand/dooliz-lib
أتمنى أن يساعدني أحد.
شكرا.

jeromelegrand في ٣١ يناير ٢٠٢٠

أنا أواجه هذه المشكلة ولا أذهب إلى أي مكان بالحلول أعلاه.
باختصار: أنا متأكد من أن لديّ إصدار رد فعل واحد فقط قيد التشغيل ، وأحصل على الخطأ باستخدام رد فعل التمهيد ، والذي ربما لا يستخدم الخطافات بشكل خاطئ ، لأنه لا يوجد أي شخص آخر لديه مشكلات.

يحدث هذا الخطأ على الواجهة الخلفية لـ node.js بالنسبة لي.

__ماذا راجعته حول إصدارات التفاعل__

لدي إعداد خيط مع مساحات عمل ، 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);
    }
}

أنا أقوم بتشغيله قبل أن أقوم بتمزيق شيء من رد فعل bootstrap ، والذي يسبب لي خطأ الخطاف غير الصالح ، ويسجل:

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

والذي يبدو أنه يؤكد أنه تم تحميل إصدار رد فعل واحد فقط.

أخيرًا أضفت هذا إلى node_modules / رد فعل dom / index.js

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

وهذا إلى node_modules / رد فعل جهاز التوجيه dom / cjs / Form.js

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

الذي يطبع SAME

أي فكرة ماذا يمكن أن يكون هذا؟
سأقوم أيضًا بنشر هذا على ريبو ريبو-بوتستراب.

flyon في ١١ فبراير ٢٠٢٠

لذلك أنا متأكد من أن وجود حالتين من React ليس هو المشكلة هنا. أعتقد أن المشكلة هي عندما يكون هناك رد فعل اثنين _roots_. هل تتصل بـ ReactDOM.render() عدة مرات في أجزاء مختلفة من الصفحة؟ إذا كان الأمر كذلك ، أعتقد أن هذا يمكن أن يسبب المشكلة. أعتقد أن الخطافات "تنتمي" إلى "جذر" معين وتتعطل عندما يكون هناك العديد منها وتشترك الحزمتان في بعض التعليمات البرمجية المشتركة. أنا أخمن هنا ...

timkindberg في ١١ فبراير ٢٠٢٠

👍1

... أعتقد أن المشكلة هي عندما يكون هناك رد فعل اثنين _roots_. هل تتصل بـ ReactDOM.render() عدة مرات في أجزاء مختلفة من الصفحة؟

شكرًا لك timkindberg ، لقد ساعدني هذا في حلها نهائيًا. أدركت أنني أستخدم أداة رد فعل الشجرة للقيام بعملية تصيير أولية وجلب البيانات المطلوبة قبل إجراء التصيير النهائي باستخدام ReactDOMServer.renderToString

أدت إزالة استخدام هذه الحزمة بسرعة إلى إزالة الخطأ ، ولدي الآن نفس الشيء الذي أعمل به مع رد فعل-ssr-prepass ، والذي يوصى به الآن في صفحة رد الفعل-شجرة-ووكر التمهيدي

لذلك كان بالفعل مكالمتين ReactDOM.render ! في الوقت الحالي ، يعمل هذا الإعداد مع رد فعل-ssr-prepass بالنسبة لي ، وعندما يهبط التشويق في رد فعل دوم / خادم يمكنني التبديل إلى ذلك

flyon في ١٢ فبراير ٢٠٢٠

أنا أستخدم react-compare-image https://github.com/junkboy0315/react-compare-image في مشروع Gutenberg الخاص بي ولكن لدي هذه المشكلة الغريبة على الرغم من أن كل شيء يعمل كلما قمت بإزالة مكون ReactCompareImage من وظيفة الحفظ. تعمل وظيفة التحرير بشكل مثالي ولكن الحفظ لا يعمل.

لقد قمت بالاطلاع على https://reactjs.org/warnings/invalid-hook-call-warning.html ولا أعتقد ، لدي أي من هذه المشكلات.

هنا هو ملف وظيفة الحفظ الكامل:

`` استيراد المفتش من "./inspector" ؛
استيراد {جزء} من "رد فعل" ؛
استيراد ReactCompareImage من "رد فعل مقارنة صورة" ؛

/ **

تبعيات ووردبريس
* /
const {__} = wp.i18n ؛

حفظ const = ({className ، السمات}) => {

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>
);

} ؛

تصدير حفظ افتراضي ؛
""
Screenshot 2020-02-19 at 4 11 52 PM

azizultex في ١٩ فبراير ٢٠٢٠

أنا أيضا أواجه هذه المشكلة. لدي ملخص منشور على SO: https://stackoverflow.com/questions/60331304/next-js-with-typescript-invalid-hook-call-hooks-can-only-be-called-inside-of-t

لدي أيضًا مثال بسيط قابل للتكرار: https://github.com/coler-j/shopify_playground

cjancsar في ٢١ فبراير ٢٠٢٠

تطبيق My Main هو تطبيق create-react (لم يتم إخراجه) كان يستورد مكتبة مشتركة تستخدم React أيضًا. تمكنت من حل هذا من خلال:

استخدام Rollup لحزم المكتبة بدلاً من webpack
لسبب ما لم أعمل بعد ، لم يؤد استخدام العوامل الخارجية إلى إزالة React من حزمة المكتبة.

Rollup-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 واستخدامه لتعديل حزمة الويب للتطبيق الرئيسي
craco.config.js

const path = require('path')

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

بفضل arminyahya لتوجيهي إلى craco.

blacksandsolutions في ٢١ فبراير ٢٠٢٠

👍2

أحاول استخدام الخطافات أثناء تحميل رد فعل من cdn. يعطي هذا المثال (هذا هو صفحة html بأكملها) الخطأ Hooks can only be called inside of the body of a function component عند استدعاء Example() . لقد أزلت كل شيء ، حتى ReactDOM ، لذلك من الصعب أن أتخيل أنه يمكنني الحصول على نسخ متعددة من React. هل هذا مستحيل؟

<!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 في ٢٦ فبراير ٢٠٢٠

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>

timkindberg في ٢٦ فبراير ٢٠٢٠

شكرا لك! لم يكن هذا في الواقع عدم وجود جذر رد فعل - لقد قمت بإزالة ذلك أثناء تبسيط الخطأ قدر الإمكان - ولكن هناك شيء غبي بنفس القدر: بدلاً من <Example /> ، كنت أكتب Example() . ليس الشيء نفسه على الإطلاق. شكرا لك مرة أخرى.

samkamin في ٢٦ فبراير ٢٠٢٠

لا شيء يبدو أنه يعمل بالنسبة لي. أقوم بإنشاء مكون للمشاركة والاستخدام في مشاريع أخرى ، ولكن عند الاختبار محليًا من مشروع آخر لا يعمل. أنا أستخدم الخطافات ذات التفاعل 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',
    }),
  ]}

أي اقتراحات؟ اختبرت كل اقتراحات المناقشات القديمة.
شكرا! :ابتسامة:

Jeconias في ٢٧ فبراير ٢٠٢٠

لقد أعلنت 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>
        );
    }
};
...

لكني أحصل على:

Screenshot 2020-02-27 at 22 27 01

انا استخدم:

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

ماذا دهاك؟

strawberry-code في ٢٧ فبراير ٢٠٢٠

أنت تستدعي المكون Settings كدالة وليس كمكون دالة.

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

لا يُسمح بالخطافات داخل الدوال العادية ، فقط في مكونات الوظيفة والطريقة التي تسميها تخدع رد الفعل على التفكير في أن المكون الخاص بك هو في الواقع وظيفة عادية.

emeraldsanto في ٢٨ فبراير ٢٠٢٠

❤1

ربما يؤدي هذا إلى تجنيب شخص ما الصداع ، إذا كنت تستخدم رد فعل جهاز التوجيه دوم إذا قمت بتمرير المكون الخاص بك في عرض مثل هذا (ليس بالطريقة الصحيحة) فسوف يمنحك Invalid Hook Call Warning
<Route path="/:cuid/:title" render={PostArticle} />

استغرقت نصف ساعة لأعرف أين أخطأت

RodPaDev في ١١ مارس ٢٠٢٠

👍1

قد يساعد هذا شخصًا ما - إذا كنت تواجه هذا الخطأ بعد استخدام جهاز التوجيه التفاعلي دوم ، فتحقق من كيفية تحديد مساراتك. على سبيل المثال ، يجب أن يكون <Route path={'/upgrade/:plan'} exact children={<Upgrade />} /> بينما كنت أفعل <Route path={'/upgrade/:plan'} exact children={Upgrade} />

amoghs في ١٣ مارس ٢٠٢٠

هذا أمر محرج بشكل خاص إذا كنت تستخدم الحبر أو الباستيل لإنشاء CLI (انظر https://github.com/vadimdemedes/pastel/issues/2). لا يمكنني جعله peerDep لأنني لا أستطيع أن أطلب من كل مستخدم تثبيت React ولا يمكنني إجبارهم على استخدام إصدار / نطاق معين من React أيضًا.

adam-lynch في ١٤ مارس ٢٠٢٠

يستخدم فريقي Yarn وكان يحصل على الخطأ Invalid hook call فقط في الاختبارات ، وليس في التطبيق. كانت المشكلة أن react-test-renderer كان يتحول إلى إصدار أقل من إصدار react و react-dom ، لذلك أضفنا resolutions في package.json :

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

cbryan-risklens في ١٧ مارس ٢٠٢٠

❤3

بالنسبة للأشخاص الذين يستخدمون Gatsby في ملف فرعي ، فهذا حل ممكن.

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

luukdv في ٢٢ مارس ٢٠٢٠

لدي نفس المشكلة عند تنفيذ الأمر npm link هناك مشكلة

ثم استخدمت الحل الرسمي المقدم من خلال رد الفعل لحل هذه المشكلة

يمكن أن تظهر هذه المشكلة أيضًا عند استخدام رابط npm أو ما يعادله. في هذه الحالة ، قد "يرى" المجمع الخاص بك تفاعلين - أحدهما في مجلد التطبيق والآخر في مجلد مكتبتك. بافتراض أن myapp و mylib هما مجلدان شقيقان ، فإن أحد الحلول الممكنة هو تشغيل رابط npm ../myapp/node_modules/react من mylib. هذا يجب أن يجعل المكتبة تستخدم نسخة React الخاصة بالتطبيق.

إذا احتاج أ إلى تقديم ب ، أ ، ب فأخوة

الخطوة 1 (في ب)
- npm link ./../A/node_modules/react
- npm link
الخطوة 2 (في أ)
npm link B

إنه يعمل بالنسبة لي

IFmiss في ٢٥ مارس ٢٠٢٠

❤5 🎉5 👍5 🚀3

حتى مع هذه الإجابات ، لست متأكدًا من سبب تلقيي الخطأ. لدي مكتبة التبعية الخاصة بي مرتبطة بتطبيقي الرئيسي وبعد أن تلقيت الخطأ ، اتبعت مستندات رد الفعل وربطت نسخة مكتبة التبعية الخاصة بي من رد فعل تطبيقي (تشغيل npm link <>/webapp/node_modules/react . (حتى فعلت ذلك مع رد فعل- dom). عندما قمت بتسجيل الدخول لاختبار ما إذا كان React1 و React2 متماثلان ، فقد قام بتسجيل true لذلك لم أكن أستخدم إصدارات مكررة من React ، كنت أستخدم نفس إصدارات React ، وكنت أستخدم مكونات دالة . لذلك على الرغم من أن تسجيل الاختبار يشير إلى أنه ليس لدي نسخة مكررة من React إلا أنني ما زلت أتلقى خطأ ربط.

لكن تجربة هذا الحل كما هو مذكور أعلاه أصلح هذا الخطأ المعين:

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

لذلك أنا في حيرة.

orpheus في ٢٥ مارس ٢٠٢٠

لذلك أنا في حيرة.

orpheus هل تقدم أكثر من جذر واحد متفاعل في نفس الصفحة؟ الملقب هل لديك أكثر من مكالمة واحدة ReactDOM.render في نفس الصفحة؟

timkindberg في ٢٥ مارس ٢٠٢٠

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

تضمين التغريدة

انا لست. لدي 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 هو مكون React الذي أقوم باستيراده من الوحدة النمطية lib المرتبطة الخاصة بي والتي تستخدم خطافًا يتسبب في فشل التطبيق. إنه يخلق الحالة والسياق ويجعلها أطفالًا.

orpheus في ٢٥ مارس ٢٠٢٠

مرحبًا ، أنا أستخدم الإلكترون مع خطافات التفاعل. إذا قمت بكتابة الخطاف الخاص بي ، فسيكون ذلك ناجحًا. ولكنه يحدث خطأ عندما أستخدم خطافات من حزمة أخرى في node_module ، مثل 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

Zaynex في ١ أبريل ٢٠٢٠

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

$ 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

حاليًا ، أنا أستخدم طريقة الاسم المستعار webpack ، لكنني أيضًا جربت طريقة npm link ، ولم يعمل أي منهما.

onlyanegg في ٢ أبريل ٢٠٢٠

لقد جئت عبر هذه القضية أيضا. أنا أستخدم ExpressJS + Pug لتقديم العروض ، ثم قمت بكتابة عارض (مشابه لـ ReactRails) يتيح لك عرض المكونات من جانب الخادم والعميل.

حاولت استخراج هذا إلى حزمة منفصلة حيث كانت تتسبب في الفوضى ، وواجهت هذه المشكلة.

لإصلاحه ، اضطررت إلى الإضافة تحت المفتاح resolve :

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

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

تحرير: لقد تحدثت في وقت مبكر جدا. إنه يعمل بشكل جيد الآن مع تصيير React ، لكن ليس مع الهيدرات.

Gibbo3771 في ٦ أبريل ٢٠٢٠

👀1

مرحبًا ، أنا أستخدم الإلكترون مع خطافات التفاعل. إذا قمت بكتابة الخطاف الخاص بي ، فسيكون ذلك ناجحًا. ولكنه يحدث خطأ عندما أستخدم خطافات من حزمة أخرى في node_module ، مثل 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

أهلا. كان لي نفس القضية. أنا أستخدم حزم الويب الإلكترونية التي تحدد جميع الوحدات على أنها عناصر خارجية لـ webpack. مع بعض الاستثناءات المشفرة - مثل رد فعل ورد فعل دوم.
بالنسبة لي ، كان هذا يعني أن رد الفعل الذي تم تحميله من الكود الخاص بي كان مختلفًا عن رد الفعل الذي تم تحميله من هذه الوحدة.
يبدو أن إضافة هذه الوحدات إلى القائمة البيضاء تساعد (لست متأكدًا مما إذا لم يكسر أي شيء آخر بعد :)

huhle في ٨ أبريل ٢٠٢٠

🎉2 👍2

huhle شكرا ، إنه يعمل! ربما يجب علينا الغوص في حزم الويب الإلكترونية.

Zaynex في ٩ أبريل ٢٠٢٠

لقد تمكنت للتو من الحصول على هذا العمل بنفسي. أعتقد أنه أحد أفضل الحلول عندما يتعلق الأمر بمساحات عمل Lerna and Yarn ، وربما يمكن استخدام بعض القطع لحل آخر.

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

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

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

حظ سعيد!

counterbeing في ١٥ أبريل ٢٠٢٠

👍3

أحاول استخدام رد الفعل الزنبركي للحصول على تأثير التلاشي البسيط. لا يبدو ان شيء يعمل.
`استيراد React ، {useState ، useEffect} من 'رد فعل' ؛
استيراد {animated، useTransition} من 'رد فعل الربيع'؛

const TextContent = (props) => {

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

}

تصدير محتوى النص الافتراضي ؛
Capture

حاولت التحقق مما إذا كانت لدي حالات متعددة من React. أخبرني Npm ls-ing أن لدي نسخة واحدة فقط من رد الفعل ورد الفعل ، وكلاهما عند 16.13.1.

Prat2103 في ٢٠ أبريل ٢٠٢٠

مرحبًا ، أنا أستخدم الإلكترون مع خطافات التفاعل. إذا قمت بكتابة الخطاف الخاص بي ، فسيكون ذلك ناجحًا. ولكنه يحدث خطأ عندما أستخدم خطافات من حزمة أخرى في node_module ، مثل 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
أهلا. كان لي نفس القضية. أنا أستخدم حزم الويب الإلكترونية التي تحدد جميع الوحدات على أنها عناصر خارجية لـ webpack. مع بعض الاستثناءات المشفرة - مثل رد فعل ورد فعل دوم.
بالنسبة لي ، كان هذا يعني أن رد الفعل الذي تم تحميله من الكود الخاص بي كان مختلفًا عن رد الفعل الذي تم تحميله من هذه الوحدة.
يبدو أن إضافة هذه الوحدات إلى القائمة البيضاء تساعد (لست متأكدًا مما إذا لم يكسر أي شيء آخر بعد :)

متألق! شكرا لك

JuanIrache في ٢٣ أبريل ٢٠٢٠

أحاول استخدام رد الفعل الزنبركي للحصول على تأثير التلاشي البسيط. لا يبدو ان شيء يعمل.
`استيراد React ، {useState ، useEffect} من 'رد فعل' ؛
استيراد {animated، useTransition} من 'رد فعل الربيع'؛
const TextContent = (props) => {
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>
)
}
تصدير محتوى النص الافتراضي ؛
حاولت التحقق مما إذا كانت لدي حالات متعددة من React. أخبرني Npm ls-ing أن لدي نسخة واحدة فقط من رد الفعل ورد الفعل ، وكلاهما عند 16.13.1.

نفس الشيء هنا. رد فعل و رد فعل دوم في 16.13.1 بالنسبة لي ، ومحاولة استخدام رد الفعل الربيع يجلب نفس الخطأ.

OctonianCat في ٢٣ أبريل ٢٠٢٠

👍5

من موضوع آخر في styled-components ، علمت أنه إذا كنت تستخدم حزمة محلية خاصة بك من خلال file: URI في package.json ، فأنت بحاجة إلى rm -rf node_modules/local-package-name/node_modules قبل تشغيل تطبيقك ، لأنه على ما يبدو ، يتم نسخ الحزم المحلية دون التحقق node_modules للاعتماديات الزائدة عن الحاجة.

jorisw في ٢٣ أبريل ٢٠٢٠

👍1

من موضوع آخر في styled-components ، علمت أنه إذا كنت تستخدم حزمة محلية خاصة بك من خلال file: URI في package.json ، فأنت بحاجة إلى rm -rf node_modules/local-package-name/node_modules قبل تشغيل تطبيقك ، لأنه على ما يبدو ، يتم نسخ الحزم المحلية دون التحقق node_modules للاعتماديات الزائدة عن الحاجة.

نعم ، هذه هي نفس المشكلة لما يقرب من اثنتي عشرة حالة استخدام في هذا الموضوع فقط. أضفت هدفًا "preebuild" و "prebuild" للقيام بـ rm -rf (باستخدام rimraf). استخدم مستخدم آخر في هذا الموضوع npm-link-shared في ما قبل التشغيل للحصول على الوحدات النمطية لمشاركة نفس مثيل التفاعل. الكثير منا منا مستخدمي monorepo يواجهون هذا.

JeremyGrieshop في ٢٣ أبريل ٢٠٢٠

مرحبًا ، أنا أستخدم الإلكترون مع خطافات التفاعل. إذا قمت بكتابة الخطاف الخاص بي ، فسيكون ذلك ناجحًا. ولكنه يحدث خطأ عندما أستخدم خطافات من حزمة أخرى في node_module ، مثل 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
أهلا. كان لي نفس القضية. أنا أستخدم حزم الويب الإلكترونية التي تحدد جميع الوحدات على أنها عناصر خارجية لـ webpack. مع بعض الاستثناءات المشفرة - مثل رد فعل ورد فعل دوم.
بالنسبة لي ، كان هذا يعني أن رد الفعل الذي تم تحميله من الكود الخاص بي كان مختلفًا عن رد الفعل الذي تم تحميله من هذه الوحدة.
يبدو أن إضافة هذه الوحدات إلى القائمة البيضاء تساعد (لست متأكدًا مما إذا لم يكسر أي شيء آخر بعد :)

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

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

انظر https://github.com/electron-userland/electron-webpack/issues/349

victormier في ٢٥ أبريل ٢٠٢٠

❤2 🎉2 👍2

كانت مشكلتي أنني كتبت

import React from 'React'

بدلا من:

import React from 'react'

في بعض الأحيان تكون هذه الأشياء الغبية.

alflennik في ٣ مايو ٢٠٢٠

😄2

لقد قمت بحلها عن طريق إضافة ما يلي إلى تكوين webpack الخاص بي:

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

اعتقدت في البداية أنها كانت مشكلة في رابط npm ، وفعلت كل ما تم اقتراحه ، وحتى تحولت إلى الغزل. في النهاية برزت أن شيئًا آخر كان يحدث عند النشر على npm أعطى الخطأ نفسه عند الاستيراد في مشروع آخر.

essential-randomness في ٦ مايو ٢٠٢٠

هل قام أحد هنا بحل هذا مؤخرًا باستخدام lerna monorepo؟ لقد جربت بعض الاقتراحات دون أن يحالفني الحظ.

tettoffensive في ١٦ مايو ٢٠٢٠

👍5

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

استيراد رد من "رد فعل" ؛
استيراد الشعار من "./logo.svg" ؛
استيراد CssBaseline من "@ material-ui / core / CssBaseline" ؛

تصدير تطبيق الوظيفة الافتراضية () {
إرجاع (

        //<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>

) ؛
}

tsg-l في ٢١ مايو ٢٠٢٠

للاختبار المحلي:
في مكتبة node_modules ، احذف مجلد رد فعل ورد الفعل
في الحزمة الرئيسية ، قم بتشغيل "تثبيت الغزل" أو "تثبيت npm" مرة أخرى.

هذا يمنع تحميل النسخة الثانية من التفاعل في الحزمة الرئيسية. من الواضح أنه ليس إصلاحًا دائمًا ولكنه يعمل للاختبار المحلي.

warrenday في ٣ يونيو ٢٠٢٠

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

كانت المشكلة التي واجهناها في هذه الحالة بسبب رد الفعل الذي يتم استيراده في المواصفات ، وكذلك يتم استيراده في مكون في شجرة المكونات التي كانت تستخدم Material UI's withStyles ، والتي يتم تنفيذها باستخدام الخطافات في واجهة المستخدم المادية.

يبدو أن التفاعل يدير الحالة داخليًا في متغير ReactCurrentDispatcher.current ، وينتهي الأمر بالتعيين في حالة واحدة من التفاعلات ، ولكن يتم استخدامه في مثيل آخر من رد الفعل - عندما يكون فارغًا ، فإنه يرمي Invalid hook call ... رسالة.

كنا بالفعل نستخدم Craco لإلغاء تهيئة حزمة الويب الخاصة بتطبيق Create React في وقت الإنشاء:

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

ومع ذلك ، يتم استخدام تجاوز حزمة الويب هذا فقط في وقت الإنشاء - عند إجراء الاختبارات ، لم يتم إنشاء الكود ، ولكن تم إنشاء مثيل له من المصدر - لذلك كان الحل لدينا هو الاستفادة من CracoAlias في 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',
        },
      },
    },
  ],

jasondarwin في ٤ يونيو ٢٠٢٠

👍7 ❤2

لقد استخدمت @craco/craco كحل ، بدون إخراج ، باتباع مثال apieceofbart . كانت الخطوات بالنسبة لي هي التالية باستخدام npm link لاختبار الوحدة المحلية:

قم بتثبيت craco على التطبيق التجريبي الخاص بي عن طريق تشغيل npm i @craco/craco --save
أنشئ ملف التكوين craco.config.js للجذر حيث يعيش package.json في التطبيق التجريبي.
تغيير البرامج النصية start و build و test باستبدال react-scripts بـ craco في تطبيقي التجريبي.

// 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 لديه نفس الفكرة.

tlehtimaki في ٤ يونيو ٢٠٢٠

👍1

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

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

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

أمل أن هذا يساعد شخصاما!

Jstuff36 في ٤ يونيو ٢٠٢٠

👍1

بالنسبة لي ، كان يستخدم الإصدار 4.0.0 من أداة تحميل التفاعل الساخن الإصدار 4.0.0 ، ويبدو أن التحديث إلى الإصدار 4.8 من برنامج رد الفعل الساخن

eliahuhorwitz في ٨ يونيو ٢٠٢٠

أتلقى الرسالة Invalid hook call فقط عند إجراء اختباراتي على خطاف مخصص أقوم بإنشائه للعمل مع النوافذ المشروطة.

لإثبات السلوك ، قمت بإنشاء مثال في ما يلي:
(https://github.com/BradCandell/invalid-hook-example)

إصدار واحد فقط من react و react-dom

هل أفتقد شيئًا واضحًا بشكل رهيب؟ عندما انتهكت القاعدة في الماضي ، سيفشل npm start . لكن هذا فشل فقط في اختباراتي.

أنا أقدر المساعدة!
-براد

BradCandell في ٩ يونيو ٢٠٢٠

لقد قمت بحلها عن طريق إضافة ما يلي إلى تكوين webpack الخاص بي:
 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },
اعتقدت في البداية أنها كانت مشكلة في رابط npm ، وفعلت كل ما تم اقتراحه ، وحتى تحولت إلى الغزل. في النهاية برزت أن شيئًا آخر كان يحدث عند النشر على npm أعطى الخطأ نفسه عند الاستيراد في مشروع آخر.

هذه ثابتة بالنسبة لي. كنت أستورد رد فعل توستيفي وكنت أتلقى مكالمة ربط غير صالحة. مررت بكل عنصر في خطأ وحدة التحكم:

قد يكون لديك إصدارات غير متطابقة من React و React DOM.

ربما تكون قد انتهكت قواعد الخطافات.

قد يكون لديك أكثر من نسخة واحدة من React في نفس التطبيق.

انتهى الأمر بكونه الإصدار الثالث. تابعت هذا:
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

RaoufOsman في ١٠ يونيو ٢٠٢٠

👍1

لم يعمل أي من الحلول المذكورة أعلاه بالنسبة لي ، حتى أدركت أنني كنت أقوم بتجميع نسخة أخرى من رد الفعل مع المكتبة التي كنت أستوردها.
لقد قمت بتحويل وتجميع الكود المصدري لمكتبتي ، لذا فإن التحقق من الإصدارات المختلفة من React المدرجة في المستندات كان يعيد true بدلاً من false .
لقد أدى وضع علامة react على أنه تبعية خارجية وتركه خارج حزمة مكتبتي إلى الحيلة.

Gamaranto في ١٠ يونيو ٢٠٢٠

👍1

لم تكن حالتي حالة أحادية ، لكنها كانت حالة مشابهة إلى حد ما. نحن نعمل على تطوير إطار عمل جديد لواجهة المستخدم ، وبدلاً من استخدام رابط npm أو lerna ، نستخدم فقط الأسماء المستعارة لحزمة الويب لطلب الملفات الموجودة في مجلد شقيق. إنه يعمل بشكل جيد ، لكنك ستواجه هذه المشكلة. لحسن الحظ ، حل حل apieceofbart لنا المشكلة.

danielo515 في ١٨ يونيو ٢٠٢٠

السطر 130: 21: يُطلق على React Hook "useStyles" في الوظيفة "PharmacyDashboard" التي ليست مكونًا لوظيفة React أو وظيفة React Hook مخصصة لخطافات التفاعل / قواعد الخطافات
السطر 133: 45: يتم استدعاء React Hook "React.useState" في الوظيفة "pharmacyDashboard" وهي ليست مكونًا لوظيفة React أو دالة React Hook مخصصة لخطافات التفاعل / قواعد الخطافات

هذا هو الخطأ ..... هل يمكن لأي شخص مساعدتي في حل هذا

vyshnaviryali في ١٩ يونيو ٢٠٢٠

vyshnaviryali ، من الأفضل أن تستدعي وظيفتك usePharmacyDashboard

danielo515 في ١٩ يونيو ٢٠٢٠

./src/components/HomeFiles/AppFooter.js
السطر 1: 1: تعريف القاعدة "المواد-ui / no-hardcoded-labels" لم يتم العثور على المواد-ui / no-hardcoded-labels "
هل يمكن لأي شخص مساعدتي في حل هذه المشكلة

vyshnaviryali في ١٩ يونيو ٢٠٢٠

بالنسبة إلى كل من يقوم بتشغيل هذه المشكلة مع npm link لأنك تحتاج إلى إضافة ميزات إلى مكونك (مكوناتك) ولكنك لا ترغب في npm publish قبل الاختبار ، فأنا مندهش من عدم اقتراح أي شخص باستخدام yalc (https://www.npmjs.com/package/yalc)

promethyttrium في ٦ يوليو ٢٠٢٠

❤2 👍2 👀1

بالنسبة إلى كل من يقوم بتشغيل هذه المشكلة مع npm link لأنك تحتاج إلى إضافة ميزات إلى مكونك (مكوناتك) ولكنك لا ترغب في npm publish قبل الاختبار ، فأنا مندهش من عدم اقتراح أي شخص باستخدام yalc (https://www.npmjs.com/package/yalc)

لقد فعلت ذلك بالفعل العام الماضي: https://github.com/facebook/react/issues/13991#issuecomment -535150839

لقد استخدمناه منذ ما يقرب من عام الآن دون أي مشاكل.

kelvinlouis في ٦ يوليو ٢٠٢٠

👍1

واحد آخر هنا باستخدام lerna ؛ لإصلاح ذلك ، قمت بنقل التبعيات react و react-dom إلى الجذر الخاص بي package.json .

TranquilMarmot في ١٢ يوليو ٢٠٢٠

واجهت نفس المشكلة وقمت بحلها بإضافة:
 alias: {
        react: path.resolve('./node_modules/react')
      }
إلى resolve في تهيئة webpack لتطبيقي الرئيسي.
من الواضح أنه كان خطئي في استخدام نسختين من React لكنني أوافق على أنه سيكون من الرائع أن تكون رسالة الخطأ أفضل. أعتقد أن هذا ربما يشبه: # 2402

بالنسبة لأولئك الذين يستخدمون الطريقة أعلاه ولكن لا يزالون يحصلون على الأخطاء عند تشغيل الدعابة ، أضف هذه إلى moduleNameMapper في تهيئة jest (احذف رد فعل دوم إذا لم يكن ضروريًا):

moduleNameMapper: {

...

  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom",

...

}

nopol10 في ١٣ يوليو ٢٠٢٠

❤8 👍6 🎉3

أنا في حيرة. أحصل على هذا ولكن تطبيقي لا يستخدم أي خطافات ولا توجد نسخ مكررة أو تفاعلية. أنا أستخدم next.js. يمكن أن يكون لديك شيء لتفعله حيال ذلك؟

dancancro في ٢١ يوليو ٢٠٢٠

👍1

npm ls react
npm ls react-dom

maapteh في ٢١ يوليو ٢٠٢٠

maapteh هل هذا بالنسبة لي؟ لقد قمت بتشغيل هذه الأوامر ولم أجد أي نسخ مكررة. كلا المكتبتين في الإصدار 16.13.1

dancancro في ٢١ يوليو ٢٠٢٠

dancro أنا أستخدم Next.js أيضًا ولست قادرًا على إصلاح هذا.

يقوم كل npm ls react و npm ls react-dom بإرجاع إدخال واحد فقط. لكني لست متأكدًا من صحة ذلك. واجهت هذا الخطأ عند الربط بحزمة محلية من أجل التنمية. يُرجع npm ls إدخالًا واحدًا فقط حتى عندما لا أقوم بربط رد الفعل في التبعية بالرجوع إلى الريبو الرئيسي. ولكن حتى عندما أتفاعل مع الارتباط بشكل صحيح ، ما زلت أتلقى الخطأ.

justincy في ٢١ يوليو ٢٠٢٠

justincy ليس لدي أي روابط حزمة في مشروعي. أراهن أنه مرتبط بـ Next.js. تختفي المشكلة إذا وضعت المكون الرئيسي داخل typeof document !== 'undefined' ، مما يقوض بشكل فعال الغرض من Next.js

dancancro في ٢١ يوليو ٢٠٢٠

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

@ dancancro أنا متشكك في أن سبب مشكلتك هو Next.js. إذا كان الأمر كذلك ، فسيواجه الكثير من الأشخاص الآخرين المشكلة. أنا أواجهها فقط بسبب الحزم المرتبطة. لا أرى الخطأ بدون الحزم المرتبطة.

justincy في ٢١ يوليو ٢٠٢٠

تختفي المشكلة إذا قمت بإزالة خمسة من المكونات السبعة في المكون الرئيسي. لا أرى أي شيء مميز حول هذه المكونات. التفاف هذه المكونات في typeof document !== 'undefined' s يعمل أيضًا.

dancancro في ٢١ يوليو ٢٠٢٠

مرحبًا يا فريق ، أحاول ترقية إصدار React من 16.2.0 إلى 16.13.1 ، كما فعلت الشيء نفسه بالنسبة لـ response-dom.
لدي الآن مكون غلاف يتم استدعاؤه في "/ test"

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 لا يعمل ويحدث خطأ ، مثل تحذير استدعاء ربط غير صالح
ملاحظة. :

لقد تحققت من أن لدي نسخة واحدة فقط من رد فعل و رد فعل دوم مثبتة
إصدار React and reaction-dom هو 16.13.1

singhneha14 في ٢٢ يوليو ٢٠٢٠

هذا ما لدي
أنا فقط ...
@ @
ReactError
أستخدم nextJS لذلك لا يحتاج إلى استيراد React. وقد جربته - لا تساعد.

Brotipok في ٢٩ يوليو ٢٠٢٠

تعمل جميع الصفحات والوظائف الأخرى بشكل مثالي

Brotipok في ٢٩ يوليو ٢٠٢٠

Brotipok ما هو إصدار next.js؟ (مشاهدة مشاكل متشابهة ، ولكن فقط عند الانتقال إلى 9.5 من 9.4.X)

bitfrost في ٣٠ يوليو ٢٠٢٠

أهلا!

لقد واجهت نفس الخطأ ، حزمة واحدة فقط للتفاعل والتفاعل dom عندما أفعل npm ls.

إصدار رد الفعل: 16.13.1
إصدار React-dom: 16.13.1

أنا أستخدم الكتابة المطبوعة وقمت بتهيئة المشروع باستخدام تطبيق إنشاء التطبيق الخاص بي - نص قالب مطبوع.

المكون الوظيفي يعمل فقط إذا لم أستخدم الخطافات بداخله.

Package.json

{
"الاسم": "blablamovie"،
"الإصدار": "0.1.0"،
"خاص": صحيح ،
"التبعيات": {
"@ testing-library / jest-dom": "^ 4.2.4"،
"@ testing-library / رد فعل": "^ 9.5.0"،
"@ testing-library / user-event": "^ 7.2.1"،
"@ types / jest": "^ 24.9.1"،
"@ types / node": "^ 12.12.53"،
"@ أنواع / رد فعل": "^ 16.9.43"،
"@ types / reaction-dom": "^ 16.9.8"،
"@ types / reaction-router-dom": "^ 5.1.5"،
"رموز التفاعل": "^ 3.10.0"،
"نصوص تفاعلية": "3.4.1"،
"typecript": "^ 3.7.5"،
"محلل حزمة حزمة الويب": "^ 3.8.0"
} ،
"نصوص": {
"بدء": "بدء البرامج النصية للتفاعل"،
"بناء": "بناء البرامج النصية التفاعلية" ،
"اختبار": "اختبار البرامج النصية للتفاعل"،
"إخراج": "إخراج البرامج النصية التفاعلية" ،
"تحليل": "source-map-explorer 'build / static / js / *. js'"
} ،
"eslintConfig": {
"يمتد": "رد فعل التطبيق"
} ،
"قائمة المتصفحات": {
"إنتاج": [
"> 0.2٪" ،
"ليس ميت"،
"not op_mini all"
] ،
"تطوير": [
"آخر إصدار كروم واحد"،
"آخر إصدار واحد من Firefox" ،
"آخر إصدار من رحلات السفاري"
]
}
}
أنا لست مشروعًا مهمًا وهذا يجعلني مجنونًا بعض الشيء.
إذا كان شخص ما يمكن أن يساعد فسيكون ذلك رائعا.
شكرا.

florianzemma في ٣١ يوليو ٢٠٢٠

Brotipok ما هو إصدار next.js؟ (مشاهدة مشاكل متشابهة ، ولكن فقط عند الانتقال إلى 9.5 من 9.4.X)

ها هي التبعيات
"التبعيات": {
"التالي": "9.4.4"،
"الصور التالية": "^ 1.4.0"،
"node-sass": "^ 4.14.1"،
"رد فعل": "16.13.1"،
"تفاعل-مستند-ميتا": "^ 3.0.0-بيتا.2"،
"رد فعل دوم": "16.13.1"،
"تفاعل-أفقي-التسلسل الزمني": "^ 1.5.3"،
"تفاعل-العلامات الوصفية": "^ 0.7.4"،
"رد فعل onclickoutside": "^ 6.9.0"
} ،
"devDependencies": {
"@ types / node": "^ 14.0.23"،
"@ أنواع / رد فعل": "^ 16.9.43"،
"typecript": "^ 3.9.7"
}

Brotipok في ١ أغسطس ٢٠٢٠

أواجه هذه المشكلة نفسها عند استيراد مكونات material-ui/core/Dialog ، لقد قمت بتعيين package.json الخاص بي لاستخدام رد فعل 16.8.0 على وجه التحديد لكل من react و 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 ، ولكن كيف يمكنني تعقب إصدار التفاعل "المختلف" الذي يتم استيراده بواسطة تبعية ؟، يبدو أنه يحدث فقط عندما أقوم باستيراد مكون حوار واجهة المستخدم المادية ، ويحدث بمجرد النقر زر يقوم بتشغيله للعرض. يمكنني استخدام مكونات أخرى مثل List و ListItems ، إلخ.

حاولت فرض قرارات ولم يتم إصلاحها أيضًا.

أنا لا أستخدم حزمة الويب (مشروع صغير حقًا) ، لذا فإن الإنشاء يحدث react-scripts build إذا كان ذلك يحدث فرقًا.

triztian في ٥ أغسطس ٢٠٢٠

👍1

إعادة الكتابة: سأقوم فقط باستبدال سؤالي بمرجع حل (وربما طلب لمزيد من الوضوح في المستندات ، بالنسبة لنا الدمى؟ :))

خلفية:
كنت أحاول تجميع حزمة الويب مكونًا وظيفيًا باستخدام خطافات في أحد الأصول حيث يمكن استدعاء هذا المكون من Vanilla JS في المتصفح.

علي سبيل المثال،

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>

لقد حصلت على هذا العمل منذ فترة طويلة _ طالما أن المكون لا يحتوي على خطافات_. ولكن عند استخدام الخطافات ، ظللت أجري في رسالة الخطأ هذه.

الحل البسيط للطاولة
لقد اتبعت _ الكثير _ من عمليات الرنجة الحمراء الأكثر تعقيدًا (إصدارات / مثيلات / تفاعلات / رد فعل متعددة ، وواردات npm والاعتمادات الثانوية المخفية ، ومحمل رد الفعل الساخن ، وإعداد حزمة الويب ، والعناصر الخارجية ، واتفاقيات الحزمة / الوحدة / المكتبة المختلفة ، وهيكل ما بعد التجميع .. .) قبل تجربة هذا ، والتي نجحت:

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 /> ).

أعتقد أنني ربما فاتني ذلك في مكان آخر في المستندات ، ولكن في حالة عدم وجوده: كان سيوفر لي الكثير من الوقت إذا تم تضمين / ذكر / ربط جزء من سياق الاستخدام (أو مجرد إعداد وحدة ES). :) خاصة وأن إصدار export default Example المباشر يعمل بدون خطافات.

espen42 في ٥ أغسطس ٢٠٢٠

👍6

شكرا لحل العملapieceofbart! كانت مشكلتي متعلقة بوصلة npm.

إليك كيفية العمل مع تطبيق Create React ، حيث يتم إخفاء Webpack config حسب التصميم. قد يكون الحل الخاص بك أيضاflorianzemma؟

npm install -D react-app-rewired
قم بإنشاء ملف يسمى 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')
      }
    }
  };
}

استبدل أوامر react-scripts ... ذات الصلة في package.json بـ react-app-rewired ... .

اتمني ان يكون مفيدا

lapponiandevil في ١٣ أغسطس ٢٠٢٠

🎉5 👍5

حصلت على هذا الخطأ لأنني قمت بتحميل الحزم مرتين.
في حالتي ، حدث ذلك لأن قالب nunjucks حيث تم عرض علامات البرنامج النصي قد تم استخدامه مرتين - في التخطيط نفسه ، وفي قالب عام لمحتوى علامة الرأس ،

kote-isaev في ٢٠ أغسطس ٢٠٢٠

حل الغزل

أنا أستخدم Yarn ، وقد أصلحت هذا عن طريق فرض الحل في package.json :
  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

إلى جانب إضافة الدقة في التطبيق الأصل (المكتبة المستهلكة) ، قمت بتحديث تبعيات المكتبة بالأوامر التالية:

yarn add link:/path/to/parent-app/node_modules/react
yarn add link:/path/to/parent-app/node_modules/react-dom

بعد ذلك ، أعدت ربط المكتبة في التطبيق الأصلي بـ yarn add link:/path/to/library

luciomartinez في ٢١ أغسطس ٢٠٢٠

👍1

أهلا
أواجه نفس المشكلة مع مساحات عمل الغزل.
لدي تخطيط مثل هذا:

مساحة العمل /
├── مكتبة /
├── التطبيق 1 /
├── التطبيق 2 /

app1 و app2 لهما تبعيات مباشرة للتفاعل مع الإصدار 16.9.0 ، و response-dom v16.9.0 و "المكتبة".
تعتمد "المكتبة" على الأقران لتتفاعل مع الإصدار 16.9.0 ولكنها أيضًا تعتمد على المطورين في القصص القصيرة.
يبدو أن المشكلة تأتي من القصص القصيرة التي تعتمد على رد الفعل v16.13.1.
ومع ذلك ، عندما أقوم بتشغيل تثبيت الغزل ، انتهى بي الأمر مع رد فعل 16.13.1 في وحدات node_modules ذات المستوى الأعلى وأتفاعل 16.9.0 في node_modules المحلية من app1 و app2.

عندما أقوم بتشغيل التطبيق 1 (الذي تم إنشاؤه باستخدام CRA) ، فإنه يستخدم تفاعله المحلي v16.9.0 ، لكن المكونات من "المكتبة" تستخدم React v16.13.1

يبدو لي أن هذا يمثل مشكلة في منطق رفع الغزل أو تعريف حزمة الويب الخاصة بإنشاء تطبيقات تفاعلية أو كليهما؟
أي شخص لديه أي فكرة عن حل بديل لهذا السيناريو؟

JamesRamm في ٢٥ أغسطس ٢٠٢٠

أهلا
أواجه نفس المشكلة مع مساحات عمل الغزل.
لدي تخطيط مثل هذا:
مساحة العمل /
├── مكتبة /
├── التطبيق 1 /
├── التطبيق 2 /
app1 و app2 لهما تبعيات مباشرة للتفاعل مع الإصدار 16.9.0 ، و response-dom v16.9.0 و "المكتبة".
تعتمد "المكتبة" على الأقران لتتفاعل مع الإصدار 16.9.0 ولكنها أيضًا تعتمد على المطورين في القصص القصيرة.
يبدو أن المشكلة تأتي من القصص القصيرة التي تعتمد على رد الفعل v16.13.1.
ومع ذلك ، عندما أقوم بتشغيل تثبيت الغزل ، انتهى بي الأمر مع رد فعل 16.13.1 في وحدات node_modules ذات المستوى الأعلى وأتفاعل 16.9.0 في node_modules المحلية من app1 و app2.
عندما أقوم بتشغيل التطبيق 1 (الذي تم إنشاؤه باستخدام CRA) ، فإنه يستخدم تفاعله المحلي v16.9.0 ، لكن المكونات من "المكتبة" تستخدم React v16.13.1
يبدو لي أن هذا يمثل مشكلة في منطق رفع الغزل أو تعريف حزمة الويب الخاصة بإنشاء تطبيقات تفاعلية أو كليهما؟
أي شخص لديه أي فكرة عن حل بديل لهذا السيناريو؟

الحل الوحيد الذي وجدته لهذا هو yarn run eject تطبيق CRA وتبديل ترتيب قسم resolve من:

`` جافا سكريبت
الوحدات النمطية: ['node_modules'، paths.appNodeModules] .concat (
modules.additionalModulePaths || []
) ،
""

ل
`` جافا سكريبت
الوحدات النمطية: [paths.appNodeModules، 'node_modules']. concat (
modules.additionalModulePaths || []
) ،
""

يبدو غريباً بالنسبة لي أن "appNodeModules" ليس أولوية قصوى - بالتأكيد يجب تأجيل التطبيق الفعلي المعني عندما يتعلق الأمر بحل التبعيات؟

JamesRamm في ٢٥ أغسطس ٢٠٢٠

واجهت مشكلة "الخطافات" في إعداد يتضمن Webpack و Electron. يعتمد مشروعي على الوحدة "أ" المجمعة نفسها بواسطة Webpack (والتي قمت بتأليفها بنفسي). لقد أخرجت React من A (معلنة أنها وحدة commonjs2). هذا يستثني ملفات React من حزمة المكتبة.

برنامجي الرئيسي ، الذي يعمل في عملية Electron Renderer ، يستخدم React أيضًا. كان لدي Webpack يتضمن React في الحزمة (بدون تكوين خاص).

ومع ذلك ، نتج عن هذا مشكلة "الخطافات" بسبب وجود مثيلين من React في بيئة وقت التشغيل.

هذا بسبب هذه الحقائق:

الوحدة A "تتطلب" React ويتم حل ذلك عن طريق نظام الوحدة النمطية للإلكترون. لذلك يأخذ الإلكترون React من node_modules ؛
يعتمد البرنامج الرئيسي على وقت تشغيل Webpack "لتحميل" React من الحزمة نفسها.
كل من Electron و Webpack runtime لهما ذاكرة تخزين مؤقت للوحدة النمطية الخاصة بهما ...

كان الحل هو إخراج React من البرنامج الرئيسي أيضًا. بهذه الطريقة ، يحصل كل من البرنامج الرئيسي والوحدة A على React من Electron - مثيل واحد في الذاكرة.

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

إذا واجهت هذه المشكلة مع وحدة لا يمكنك التحكم فيها ، اكتشف ما إذا كان يتم تخريج React وكيف يتم ذلك. إذا لم يتم تخريجها ، أعتقد أنه لا يمكنك حل هذه المشكلة في سياق الإلكترون. إذا تم تخريجها فقط على أنها عالمية ، فضع React في ملف html الخاص بك واجعل برنامجك الرئيسي يعتمد على ذلك أيضًا.

joopringelberg في ٢٨ أغسطس ٢٠٢٠

👍2

أخيرا...

//webpack.config.js

module.exports = {
  ...
  externals: {
      react: 'react',
  },
}

Naterra في ٤ سبتمبر ٢٠٢٠

👍2

Vue3 لديه نفس المشكلة

frei-x في ٩ سبتمبر ٢٠٢٠

👀5

لقد قمت بحل هذه المشكلة بوضع react و react-dom كـ peerDependencies في الحزمة الخاصة بي. json من مكتبتي الخارجية ، التي تستخدم React.

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

Sergioamjr في ١٥ سبتمبر ٢٠٢٠

👎5 👍1

أعتقد أنني ربما فاتني ذلك في مكان آخر في المستندات ، ولكن في حالة عدم وجوده: كان سيوفر لي الكثير من الوقت إذا تم تضمين / ذكر / ربط جزء من سياق الاستخدام (أو مجرد إعداد وحدة ES). :) خاصة وأن إصدار export default Example المباشر يعمل بدون خطافات.

مرحبًا @ espen42 ،
كنت آمل حقًا أن يساعدنا الحل الخاص بك. لقد حاولنا حرفياً _ كل شيء _ ، تمامًا كما ذكرت.

لسوء الحظ ، لا يبدو أن الحل الخاص بك يساعد أيضًا. أتساءل ربما فاتني شيء ما؟

لذلك ، في الحزمة (سأسميها @ 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 .
تستخدم كل من الحزمة والمشروع نفس الإصدار من React و response-dom.

في المشروع ، نقوم بتضمين الحزمة مثل هذا:

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.

ما الذي يمكن أن نفتقده؟

afkatja في ١٥ سبتمبر ٢٠٢٠

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

هذا واحد أصلح المشكلة بالنسبة لي ، شكرًا جزيلاً لك يا رجل ❤️

brenoprata10 في ١٨ سبتمبر ٢٠٢٠

خطأ في تخصيص الحقل عند الوصول إليه عبر رابط خارجي (Sharepoint Online)

امتداد مخصص لمجال spfx مع عدد قليل من مكونات واجهة المستخدم النسيجية ، عند الوصول إليه عبر رابط ، الحصول على أحد هذه الأخطاء اعتمادًا على إصدار fabricUI:
https://reactjs.org/docs/error-decoder.html/؟invariant=321 ،
https://reactjs.org/docs/error-decoder.html/؟invariant=290&args [] = A.٪ 20General

عندما يتم تحديث الصفحة ، كل شيء يعمل بشكل صحيح.
لم أستخدم أي خطافات React في الكود ، فقط مكونات React.
لم تستخدم أي حكام أيضًا.

أعتقد أنه قد يكون بسبب سبب واجهة Fabric ui عند إزالة جميع مكونات واجهة المستخدم النسيجية ، لا يحدث أي خطأ.

لقد جربت إصدارات مختلفة من fabic ui و 6.189.2 و 6.214.0 و 7.114.1 وحاولت أيضًا استبدال جميع مراجع واجهة المستخدم النسيجية بواجهة مستخدم بطلاقة ، ولا تزال المشكلة قائمة

aj2rck في ١٨ سبتمبر ٢٠٢٠

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

تتضمن صفحتي نقاط دخول متعددة ، ويمكن لـ SplitChunkPlugin إنشاء أجزاء وقت تشغيل. نظرًا لأننا نستخدم جوهرة rails-webpacker ، فقد تم تكوينه افتراضيًا لإنشاء وقت تشغيل لكل جزء. لكن webpack يفعل شيئًا مشابهًا افتراضيًا ، فهو يتضمن وقت التشغيل داخل الأجزاء.

بالطبع الوثائق تحذر من هذه القضية ، لكن عليك أن تجدها. سيؤدي تعيين optimization.runtimeChunk إلى single إلى إنشاء وقت تشغيل منفصل. سيؤدي هذا إلى منع البناء الخاص بك من إنشاء نسخ متعددة من التفاعل ، عند استخدام رد فعل من نقاط دخول متعددة.

راجع https://webpack.js.org/configuration/optimization/#optimizationruntimechunk

dino115 في ٢٥ سبتمبر ٢٠٢٠

👍1

مرحبا جميعا،
لدي مشكلة أنني أريد استخدام lib خارجي يأتي من CDN ومضمن مع علامة <script> ، لذلك لا يمكنني فعل الكثير مع الكود نفسه. يستخدم lib التفاعل والخطافات ، لذلك أحصل على ملف
خطأ 3. You might have more than one copy of React in the same app .
للأسف لا توجد حزمة NPM للمكتبة: https://github.com/Anyline/anyline-ocr-anylinejs-module
أنا باستخدام CRA ولا يتم إخراج المشروع.

إنشاء مثال صغير Sandbox .

TomlDev في ٨ أكتوبر ٢٠٢٠

إنه يلقي نفس الخطأ لأن الحزمة الأخرى تستخدم الخطافات أيضًا ولكن مع React الخاصة بها. اضطررت إلى نشر الحزمة الخاصة بي على NPM ثم استيرادها مباشرة من NPM. الذي - التي

لقد جئت إلى هذه القضية مؤخرًا وأتساءل لماذا.
لقد قمت بحلها عن طريق تحميلها على GitLab وتثبيتها حسب العنوان.
ما الفرق بين الباقة والحزمة المحلية؟

catsheue في ٢١ أكتوبر ٢٠٢٠

لقد اكتشفت أنني تلقيت "مكالمة ربط غير صالحة". عندما أقوم بتحميل المكون الذي يستدعي الخطاف ديناميكيًا.

كود Sandbox

ينجح الاختبار الذي يقوم بتحميل "التطبيق" بشكل ثابت. الاختباران اللذان يقومان بتحميله ديناميكيًا (أحدهما يستخدم require ، والآخر يستخدم import كدالة) كلاهما يعطي الخطأ.

لماذا أهتم حتى: أحاول كتابة بعض الاختبارات حيث أستخدم jest.doMock للسخرية من بعض الأشياء ثم تحميل الوحدة التي أرغب في اختبارها ديناميكيًا ، وفقًا للوثائق . أنا أستخدم doMock بدلاً من Mock لأنني بحاجة إلى أن أكون قادرًا على السخرية من الأشياء بشكل مختلف في وظائف مختلفة. ستلاحظ أن الخطأ يحدث دون أي سخرية.

miket01 في ٢١ أكتوبر ٢٠٢٠

👍2

إنه يلقي نفس الخطأ لأن الحزمة الأخرى تستخدم الخطافات أيضًا ولكن مع React الخاصة بها. اضطررت إلى نشر الحزمة الخاصة بي على NPM ثم استيرادها مباشرة من NPM. الذي - التي
لقد جئت إلى هذه القضية مؤخرًا وأتساءل لماذا.
لقد قمت بحلها عن طريق تحميلها على GitLab وتثبيتها حسب العنوان.
ما الفرق بين الباقة والحزمة المحلية؟

catsheue كان React1 === React2 true بالنسبة لك؟
لم أقم بنشر كتابتي في npm ولكني أردت معرفة ما إذا كان هذا هو السبب

يبدو أن لي React1 === React2 = true ولم أجد حلًا لسبب حدوث ذلك عند استيراد مكتبة تفاعلاتي إلى مشروع

jyoon006 في ٢٨ أكتوبر ٢٠٢٠

واجهت نفس المشكلة باستخدام yarn link لاختبار مكتبة محلية. كان خطئي هو إدراج react و react-dom على أنها تبعيات مطوّرة وليست نظيرة.

لذلك كان يجب أن أفعل yarn add --peer react react-dom . أخيرًا ، نظرًا لأنني ارتكبت خطأ بالفعل في تنفيذ React كاعتمادية مطورة ، فقد احتجت إلى حذف node_modules من مكتبتي. أصلح لي rm -rf node_modules; yarn المشكلة.

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

🎉1

أنا أيضا واجهت هذه المشكلة. في حالتي ، كان السبب في ذلك هو رد فعل مكرر من Storybook (v6.0.28). أعتقد أنه يمكنك العثور على مزيد من المعلومات هنا .

قمت بإلغاء تثبيت تبعيات Storybook ، وحذفت node_modules وأعدت تشغيل yarn install مرة أخرى. هذا عمل لي. آمل أن يساعد شخصًا ما على تجنب البكاء وساعات ضائعة على هذا.

giorgosera في ١٣ نوفمبر ٢٠٢٠

هذا الحل يعمل بالنسبة لي أيضًا. أنا أستخدم وظائف Firebase ولدي مجلد node_modules في كل من جذر مشروعي وضمن الدليل /functions/ . إذا قمت بحذف /functions/node_modules ، فإن تطبيقي يعمل بشكل جيد. هذا حل بديل ، لكنه مزعج إلى حد ما. هل وجد أي شخص حلاً يسمح بوجود كلا المجلدين node_modules في نفس الوقت؟

schlosser في ١٣ نوفمبر ٢٠٢٠

للأجيال القادمة وأي شخص قد يواجه هذه المشكلة عند استخدام mdbootstrap في تطبيق تم إنشاؤه باستخدام create-react-app .

لقد رأيت هذا الخطأ عند إضافة مكونات mdbootstrap المختلفة مثل الأزرار وصور البطاقة. تمت إضافة إخراج وحدة التحكم إلى index.js لاستكشاف الأخطاء وإصلاحها وفقًا لمقالة دعم React ، حيث تم إرجاع true عند مقارنة الإصدارات. لذلك كان علي أن أجرب شيئًا آخر.

كان الإصلاح هو تشغيل npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]
`-- [email protected]

npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

بعد ذلك ، عملت جميع المكونات بشكل جيد. ايام سعيدة.

pnm563 في ١٧ نوفمبر ٢٠٢٠

لقد اكتشفت أنني تلقيت "مكالمة ربط غير صالحة". عندما أقوم بتحميل المكون الذي يستدعي الخطاف ديناميكيًا.
كود Sandbox
ينجح الاختبار الذي يقوم بتحميل "التطبيق" بشكل ثابت. الاختباران اللذان يقومان بتحميله ديناميكيًا (أحدهما يستخدم require ، والآخر يستخدم import كدالة) كلاهما يعطي الخطأ.
لماذا أهتم حتى: أحاول كتابة بعض الاختبارات حيث أستخدم jest.doMock للسخرية من بعض الأشياء ثم تحميل الوحدة التي أرغب في اختبارها ديناميكيًا ، وفقًا للوثائق . أنا أستخدم doMock بدلاً من Mock لأنني بحاجة إلى أن أكون قادرًا على السخرية من الأشياء بشكل مختلف في وظائف مختلفة. ستلاحظ أن الخطأ يحدث دون أي سخرية.

@ miket01 بالضبط ما أحاول القيام به (ولكن بدون السخرية). هل وجدت أي حل؟

YannickFricke في ١٨ نوفمبر ٢٠٢٠

👍1

واجهت هذا القيام:

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;

mwri في ٢٤ نوفمبر ٢٠٢٠

ما زلت أتلقى هذا الخطأ بعد وضعه جانبًا لعدة أشهر.

أستخدم صفر خطافات في برنامجي. هناك نسخة واحدة بالضبط من 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 صحيحًا؟

تحديث: كانت هذه هي المشكلة. لقد قمت بتحرير webpack.config.externals في ملف next.config.js الخاص بي
https://github.com/vercel/next.js/issues/17592#issuecomment -712443172

dancancro في ٢٧ نوفمبر ٢٠٢٠

يلقي تطبيقي خطأً فادحًا (اتصال غير صالح) في أي وقت أحاول فيه دمج واجهة المستخدم المادية فيه. أنا جديد تمامًا على React لذا أحتاج إلى المساعدة.

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

React: الخطافات + مثيلات متعددة من React

للأشخاص القادمين من البحث: يرجى قراءة هذه الصفحة أولاً . يحتوي على أكثر الحلول الممكنة شيوعًا!

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

ال 285 كومينتر

حلول العمل بالنسبة لنا

خلفية الحالة ولماذا يحدث ذلك

متطلبات الحالة:

مثال

مثال:

حل الغزل

القضايا ذات الصلة