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

• انقل كل شيء إلى تطبيق Next.js واحد
• استخدم حزم lerna أو npm الخاصة أو حزم مماثلة

lfades شكرا على الرد. لا يتوفر أي من هذين الخيارين لنا ولا ننشره في Now أو أي شيء مشابه. استخدمنا مساحات عمل الغزل في البداية ولكن بعد ذلك قمنا بدمج bazel ولا يلعب بشكل جيد مع الطبيعة المترابطة لمساحات عمل الغزل. تعني حزم Npm أنه لا يمكننا تطوير الوحدات المشتركة بالسرعة التي نحبها. انها مجرد الكثير من النفقات العامة.

baldurh واجهت هذا مع next-i18next حيث لدينا تطبيقات NextJs المتداخلة كأمثلة. هل وجدت حلاً؟

isaachinman ليس لدينا. لم نتمكن من الترقية إلى 9.x حتى الآن لأسباب أخرى لذلك لم أبحث في الأمر. هل لدى أي شخص فكرة عن مكان تأثير الكود على ذلك؟ أحب أن أفهم المشكلة بشكل أفضل.

لم يتح لي الوقت للبحث في هذا الأمر حتى الآن ، ولكن إذا احتاج أي شخص إلى إعادة نسخ: نسخ next-i18next ، cd إلى examples/simple وقم بترقية إصدار NextJs إلى> = 9.0.6

إنه حاليًا على 9.0.3 ، لذلك هذا تقنيًا تغيير جذري في التصحيح.

ظهر خطأ مشابه مؤخرًا واضطررت إلى الرجوع إلى 9.0.5 (و React 16.8.x). لقد قمت نوعًا ما بتضييق نطاق المشكلة التي رأيتها في استخدام Next لـ MDX ، لكن ليس لدي أي تفاصيل محددة تتجاوز ذلك.

لقد بحثت في نفس المشكلة مع مشروع كبير جدًا يعتمد على Next & next-i18next.

رأيت أنه يمكن إلقاء هذا الخطأ بثلاثة أسباب:

1. إصدارات الرد والتفاعل غير المتوافقة - لا تنطبق على تطبيقي
2. تم استيراد إصدارين من رد فعل dom - لا ينطبق على تطبيقي
3. الاستخدام غير السليم لخطافات React - لا أستخدم الخطافات ولكن بعض الليبس كذلك ، ويبدو أنه يعمل مع كل واحد آخر.

الغريب أنه يحدث فقط في بناء الإنتاج.

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

يبدو أنك أطلقت اسمًا مستعارًا على react ولكن ليس react-dom . هل يمكنك تجربة ذلك؟

Timer شكرا. حاولت ولكن لم يكن لها أي تأثير

لقد تمكنت من حل هذا الآن في Repro عن طريق نقل التبعيات react و react-dom مستوى واحد لأعلى. لقد دفعت التغييرات للتو إذا أراد أي شخص تجربتها. لم أجربه في مشروعنا الفعلي ولكني آمل أن ينجح معنا. ربما يمكن أن يحل هذا مشكلة isaachinman و jaredcwhite و felixmosh أيضًا؟

Timer لقد react في مجلد مشاريعنا node_modules . في حالتنا ، كان الأمر مرتبطًا بقصص ( yarn why react ساعد كثيرًا 😄). كنا نخطط لنقل القصص القصيرة إلى مشروع منفصل على أي حال ، لذا أعتقد أن هذا الحل سيعمل في حالتنا.

أه نعم. ستؤدي حزم node_module نشرها بشكل غير صحيح إلى حدوث ذلك (مع التبعيات على react(-dom|) بدلاً من تبعية الأقران).

لقد تمكنت من حل هذا الآن في Repro عن طريق نقل التبعيات react و react-dom مستوى واحد لأعلى. لقد دفعت التغييرات للتو إذا أراد أي شخص تجربتها. لم أجربه في مشروعنا الفعلي ولكني آمل أن ينجح معنا. ربما يمكن أن يحل هذا مشكلة isaachinman و jaredcwhite و felixmosh أيضًا؟

هل يمكنك توضيح التغييرات التي قمت بها في هذا الريبو؟

أقوم بتشغيل npm ls react أو npm ls react-dom فقط حصلت على تطبيقي التالي في القائمة.

felixmosh آسف ، يبدو أن الدفع فشل بالنسبة لي بالأمس. الآن التغييرات موجودة بالتأكيد 😅 لقد قمت بنقل react و react-dom من المجلد app إلى المجلد الجذر لذا الآن تحتاج إلى عمل yarn/npm install في كلا المجلد app والمجلد الجذر قبل تشغيل app . نأمل أن يكون هذا واضحا بما فيه الكفاية.

سيتعين علينا إجراء بعض التغييرات على نظام البناء الخاص بنا لجعل هذا يعمل في الإنتاج ، لذلك لا يزال هذا الحل يمثل مشكلة بالنسبة لنا 😝

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

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

تشغيل نفس المشكلة ، ورفع مستوى react و react-dom واحد للأعلى وتشغيل الخادم من الجذر هو الحل الوحيد الذي يعمل حاليًا على 9.1.5. ربط https://github.com/facebook/react/issues/13991 و https://github.com/facebook/react/issues/15315#issuecomment -479802153 كمرجع حيث وجدت هذه الروابط قبل هذه المشكلة.

مرحبا أي تحديث في هذه المسألة؟ لدينا monorepo ونحن نواجه هذه المشكلة بالضبط.

يجتمع مع نفس المشكلة.
يعمل الإصدار 9.0.5 بشكل رائع مع الخطافات للمكونات المستوردة خارج المجلد الجذر.

بدءًا من 9.0.6 حتى 9.1.6-canary.5 لديهم نفس المشكلات.

المشكلة تحدث فقط من جانب الخادم. إذا تم تعطيل SSR (على سبيل المثال ، تحميل مكون خارجي عبر ديناميكي ) ، فإن جميع الأعمال تعمل كما هو متوقع للإصدارات> = 9.0.6.

nodkz إنها مشكلة في حل حزمة رد الفعل ، لذلك تحدث فقط في العقدة.

@ Timer انتقلت هذه المشكلة إلى المرحلة "التالية" لما يقرب من 6 إصدارات ، فهي تمنعني من التحديث إلى أحدث إصدار.

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

هل تحتاج إلى أي مساعدة في التحقيق في أي اتجاه؟
هل لديك أي شعور داخلي حيال ذلك؟
لماذا يحدث هذا فقط في بناء الإنتاج؟
ما الذي تم تغييره من 9.0.5 إلى 9.0.6 والذي قد يكون مرتبطًا بهذا؟

ثانكس 🙏🏼

أعتقد أنني وجدت المشكلة !!!
وأعتقد أنه هو مزيج من 2 أشياء:

1. استخدام رابط sym للوحدات node_modules
2. i18next / react-i18next لم تكن خارجية في حزم الخوادم !!
   
   في حالتي ، عندما تنفجر عند بناء الإنتاج ، فإنها تشتكي على خطاف i18next useTranslation ...

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

رأيت أن القادم لديه بعض الاستثناءات لليب المقبل (لماذا؟)، الجزء المضحك هو أن هذه التعابير المنطقية يمسك كل يبس أن ينتهي مع next/dist/ ، و i18next & react-i18next يفعل !!

لذلك ، إذا قمت بتغيير هذا:

res.match(/next[/\\]dist[/\\]/) 

إلى

res.match(/[/\\]next[/\\]dist[/\\]/) 

سوف تستبعد حزمة الخادم جميع libs التي ليست next وتنتهي بـ next/dist ، وقد تم حل المشكلة!

بالنسبة لي ، المشكلة الرئيسية هي الطريقة الجديدة لحل الطلبات: https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack-config.ts#L446

نظرًا لأن لدينا مكونات خارج جذر المشروع ، فإن حل الطلب سيؤدي إلى ظهور خطأ يؤدي إلى تجميع react في أجزاء الخادم. وهذا هو سبب ظهور الخطأ Invalid hook call على الخادم.

يتم توفيرbaldurh context في هذا التعبير الذي قمت بربطه بواسطة webpack ، ويختلف عن جذر الترجمة (دليل مشروعك).
إنه دائمًا دليل الملف الذي يصدر طلب.

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

أحاول استخدام حزمة مرتبطة وأواجه نفس المشكلة. للأسف لا شيء من الإصلاحات من https://github.com/facebook/react/issues/13991 يعمل 🙁

أواجه أيضًا نفس المشكلة مع مكتبة مكون مرتبطة بشكل رمزي بـ yarn link . سارت الأمور على ما يرام حتى v9.0.6-canary.4 والآن أنا في نفس الوضع مثل بعض المعلقين الآخرين ولا يمكنني الترقية إلى ما بعد هذا .. لقد أشرنا إلى التغيير إلى هذا PR https://github.com/zeit /next.js/pull/8739

تستخدم مكتبة المكونات الخاصة بي react ، react-dom ، و styled-components . التكوين لهذا على النحو التالي

• تمت إضافة الحزم كـ devDependencies وإدراجها في peerDependencies
• تمت إضافة الحزم كعوامل خارجية في تهيئة webpack الخاصة بي
• تمت إضافة الأسماء المستعارة لحل هذه الحزم في التكوين التالي الخاص بي
• نقل وحدة مكتبة المكون مع الوحدات النمطية التالية transpile

تحديث

لقد تمكنت من إصلاح هذا من خلال تضمين هذه الوحدات في العناصر الخارجية للخادم. بفضل HosseinAgha في هذا التعليق https://github.com/martpie/next-transpile-modules/issues/50#issuecomment -558318688

if (isServer) {
  config.externals = [
    'react',
    'react-dom',
    'styled-components',
    ...config.externals
  ]
}

أرى نفس المشكلات بالضبط ، ولم ينجح أي من الحل بالنسبة لي حتى الآن.

تعمل الحزمة الخاصة بي إذا قمت بنشرها وتثبيتها (واستخدمت file.alias في next.config.js).

لكن تشغيل إصدار مطور مع الحزمة المرتبطة عبر yarn link @mypackage يؤدي دائمًا إلى خطأ في ربط غير صالح.

تمكنت أيضًا من تشغيله عن طريق تعديل node_modules/dist/build/wepack-config.js والتعليق على الأسطر المضافة في https://github.com/zeit/next.js/pull/8739

ما أراه إذا قمت بتسجيل baseRes و res هو أن شرط if يتم تشغيله على النحو التالي:

• /myApp/node_modules/react/index.js! == /myApp/node_modules/myPackage/node_modules/react/index.js
• من فهمي ، يتم تشغيل هذا إذا لم يكن المسار هو نفسه حتى الملف / الإصدار متطابق بنسبة 100 ٪

تحديث:

تمكنا من حل المشكلة عن طريق تحويل الحزمة الخاصة بنا لاستخدام مساحات عمل الغزل (على الرغم من أن الريبو الخاص بنا يحتوي فقط على حزمة واحدة).
لقد نقلنا الكود الخاص بنا من ./src إلى ./package/our-package-name/src وإعداد مساحات عمل الغزل => https://classic.yarnpkg.com/en/docs/workspaces/

يعمل هذا على حل المشكلة حيث سيؤدي ذلك إلى رفع التبعيات الشائعة إلى المستوى الأعلى. / مجلد node_modules و ./package/our-package-name/node_modules سيبقى فارغًا إلى حد كبير.

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

لدي نفس المشكلة اللعينة. ¬¬ "

نحن عمومًا ننهار القسم لأنه مخالف لقواعد السلوك.

آسف ، كنت غاضبًا من هذا الخطأ. في الواقع ، أنا أحب الكثير من Next.JS. لكن لا يمكن استخدامه لأن هذه المشكلة مملة.

نواجه هذه المشكلة عند العمل مع الحزم المحلية الخارجية و next-transpile-modules .

نظرًا لأننا نريد التمسك بأحدث إصدار من Next.js ، سأحاول إرسال تصحيح إلى Next.js إذا وجدت السبب الأساسي.

أواجه نفس المشكلة ، بعد تثبيت [email protected]
تبعياتي هي رد فعل @ 16.13.0 ، رد فعل[email protected] وبالطبع العديد من libs الأخرى (لكن كل شيء كان يعمل قبل تثبيت next-i18next). إذا كان لدى شخص ما حل بديل ، فقد يكون رائعًا: +1:

شكرًا لك على نشر هذه المشكلة ، لقد واجهت أيضًا مشكلات في ربط حزمة نظام التصميم (مكتبة مكونات التفاعل) الخاصة بنا. نحن نقوم أيضًا بترجمته باستخدام https://github.com/martpie/next-transpile-modules.

الإصلاح كما هو مقترح هنا يعمل بالنسبة لنا:

• اربط مكتبتك برمزًا إلى مجلد node_modules (قمنا بذلك باستخدام الأداة المساعدة الخاصة بنا بدلاً من npm link ولكن يجب أن تكون هي نفسها بشكل أساسي)
• أضف شيئًا مثل ما يلي إلى next.config.js :

// next.config.js
const nextConfig = {
    webpack: (config, options) => {
        // modify the `config` here

        if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }
        config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

        return config;
    },
};
// more plugins etc...

الحل البديل لدينا الذي لا يتطلب أي تكوين

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

ولكن سيكون من الجيد رؤية هذا تم إصلاحه في NextJS ، لقد قضيت الكثير من الوقت في محاولة لفهم سبب نجاح الاسم المستعار webpack مع جميع مشاريع NextJS غير الخاصة بي :)

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

if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }

react هو بالفعل خارجي من جانب الخادم.

config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

هذا لن يحل المشكلة.

كما قيل من قبل ، تتعلق هذه المشكلة بتبعياتك اعتمادًا على react بينما يجب أن يكون لديهم peerDependency على react (و response-dom إذا احتاجوا إليه).

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

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

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

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

تحدث مشكلة مماثلة لي ولكن (من المحتمل) بسبب مكتبة المواد (كما هو موضح في # 10162) ، كان الإصلاح المؤقت في الوقت الحالي هو إضافة npm run clean في preserve و نصوص dev كما هو موضح هنا:
https://github.com/zeit/next.js/issues/10162#issuecomment -612501431

timneutkens أتفهم أن المشكلة الحقيقية تتعلق بكيفية إدراج تلك التبعيات في قوائمها (deps vs peer-dep) ولكن هل لديك فكرة عما يمكننا فعله في تطبيقنا لإصلاح هذا الأمر بشكل دائم؟

@ ryan-0 هل لديك أي إعداد خاص؟ هل سيتفاجأ إذا لم تتفاعل واجهة المستخدم المادية مع قائمة النظراء؟ مثل هل تستخدم إصدار رد فعل قديم جدًا أو رابط رمزي أي شيء؟

لا يوجد إعداد خاص .. لا يوجد ارتباط رمزي ويتفاعل 16.13.1 -> لدينا بعض الأقسام الأخرى التي قد تتسبب في أن تكون المشكلة عادلة ، ولكن على الأقل وفقًا لهذا المرجع ، يبدو أنه ربما يكون مرتبطًا بـ material-ui / core (التي نستخدمها أيضًا):
https://github.com/zeit/next.js/issues/10162

@ ryan-0 هل يوجد مجلد node_modules به رد فعل داخل مجلد material-ui الخاص بك؟

هل يبدأ العمل أيضًا بعد تشغيل npm dedupe؟

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

الغريب أن استخدام resolve.alias لا يبدو أنه يؤثر على الحزم خارج جذر المشروع.

هذا ملف next.config.js :

const path = require('path')

module.exports = {
  webpack: config => {
    const { alias } = config.resolve || {}
    alias.react$ = path.resolve('node_modules/react')
    alias['react-dom$'] = path.resolve('node_modules/react-dom')

    config.resolve = {
      ...config.resolve,
      alias,
    }

    return config
  }
}

أنا أستخدم yarn link مع حزمة محلية موجودة في Lerna monorepo. في node_modules لا يحتوي على نسخة من react ، ولكن الجذر monorepo لا. لا أتوقع أن يحدث هذا فرقًا طالما تم استخدام resolve.alias ، لكن هذا ليس هو الحال للأسف. بعد إزالة نسخة react من جذر monorepo ، أتلقى الآن خطأ Cannot find module 'react' بدلاً من ذلك.

هل وجد شخص ما حلا جيدا لهذا؟

لدي مكتبة مرتبطة تالية وأنا أستخدم next-transpile-modules لإضافتها إلى مشروع "المستهلك" الخاص بي. لقد أضفت الاسم المستعار react في next.config.json كما هو مذكور في مستنداتهم ولكن هذا لم يكن كافيًا. ما زلت أتلقى خطأ تبعيات مكررة لـ React.

يمكنك محاولة استخدام relative-deps بواسطةmweststrate

هل وجد شخص ما حلا جيدا لهذا؟

لدي مكتبة مرتبطة تالية وأنا أستخدم next-transpile-modules لإضافتها إلى مشروع "المستهلك" الخاص بي. لقد أضفت الاسم المستعار react في next.config.json كما هو مذكور في مستنداتهم ولكن هذا لم يكن كافيًا. ما زلت أتلقى خطأ تبعيات مكررة لـ React.

نعم ، انظر المنشور أعلاه ، تحتاج إلى إضافة جزء config.externals في العينة الخاصة بي ، ثم يبدأ الاسم المستعار في العمل مرة أخرى

johot لقد جربت الحل الذي cannot destructure property 'query' of 'Object(...)(...)' as it is null بعد تجربة الحل الخاص بك. الكائن الذي يُنظر إليه على أنه فارغ في هذه الحالة هو useRouter من next/router .

aleclarson شكرا

إذا كنت تستخدم next-transpile-modules و Yarn ، فإن الحل واضح تمامًا: https://github.com/martpie/next-transpile-modules#i -have-trouble-with-Duplicated-Depencies-or-the -غير صالح-ربط-اتصال-خطأ في رد الفعل

إذا كنت تستخدم npm ، فأنا ما زلت أبحث عن حل: ج

حسنًا ، كان الحل النهائي هو الترحيل من yarn link إلى yalc . لدي مهمة gulp التي تراقب تغييرات الملفات ونسخها إلى مجلد dist ثم دفع التغييرات إلى متجر yalc.

في "المستهلك" لدي ، قمت بتعديل tsconfig.json لحل المسارات على النحو التالي:

 "paths": {
      "~/*": ["/src/*"],
      "my-library/*": ["./node_modules/my-library/dist/*"]
    },

وفي next.config.js أضفت ما يلي:

 experimental: {
      jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
    }

لذلك يمكن بعد ذلك حل المسارات بناءً على tsconfig.json paths . مزيد من المعلومات هنا .

قصة قصيرة طويلة: أدى الجمع بين yalc + next-transpile-modules تحسين إعداد التطوير المحلي بشكل كبير. لا تبعيات مكررة وأخطاء غريبة. سلوك إضافة الوحدة مباشرة باستخدام yarn add وربط الوحدة بـ yalc متماثلان إلى حد كبير.

إذا كنت تستخدم مكتبة مرتبطة محليًا تعتمد على styled-components ، فارجع إلى هذا: https://styled-components.com/docs/faqs#linking -in-an-ssr-السيناريو

في server/index.js :

const moduleAlias = require('module-alias');
moduleAlias.addAlias('styled-components', path.join(__dirname, '../node_modules/styled-components'));

لكننا احتجنا أيضًا إلى إضافة ما يلي بـ next.config.js :

config.resolve.alias['react'] = path.resolve(__dirname, './node_modules', 'react');
config.resolve.alias['react-dom'] = path.resolve(__dirname, './node_modules', 'react-dom');
config.resolve.alias['prop-types'] = path.resolve(__dirname, './node_modules', 'prop-types');
config.resolve.alias['styled-components'] = path.resolve(__dirname, './node_modules', 'styled-components');

آمل أن يساعد.

تم اختباره مع:

التالي: 9.3.5
رد الفعل: 16.13.1
المكونات المصممة: 5.1.0

أيها الناس ، إصلاح بسيط ، قم بإزالة نسختك العالمية من رد فعل ، التالي وتفاعل دوم بالقيام بما يلي:
npm remove -g react next react-dom

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

npm remove -g react next react-dom

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

ليس الويب فقط!
رد فعل 16.9
رد الفعل الأصلي 0.62
يعمل على Android
ربما اصغر منتج في التاريخ؟

import React, { Component, useState } from 'react';
import {
  AppRegistry,
} from 'react-native';

function hooker() {
  const [count, setCount] = useState(0)
}

class ClassA extends Component {
  constructor(props) {
    super(props)
    //hooker();  //Invalid hook call Error
  }
  componentDidMount(){
    //hooker();  //Invalid hook call Error
  }
  render() {
    hooker();  //Invalid hook call Error
    return (      
      null   
    );
  }
} 
export default function App(props) {
  //hooker();  //No problem
  return (
    <ClassA/>
  );
};

AppRegistry.registerComponent('default', () => App);

لقد واجهت هذه المشكلة أيضًا ومحاربتها لاستخدام yarn بدلاً من npm (مع npm لم تنجح) وباستخدام https://github.com/vercel/next.js/ القضايا / 9022 # issuecomment -616169466

هل هناك حل لهذا على الإطلاق؟

تمسك تمامًا بالإصدار 9.4.4.

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

import { useRouter } from 'next/router'

function withPrivateRoute(WrappedComponent) {
const router = useRouter();                    //**** ERROR IS THROWN HERE *******
class WPR extends React.Component {
    componentDidMount(){
        console.log('wrappeed', WrappedComponent);
        // const { router } = this.props;
        const intendedRoute = router.pathname;
        // const isAdmin = !!cookies.get('isAdmin');
        // const isAuthenticated = !!cookies.get('username');
        const isAuthenticated = false;
        const isAdmin = false;
        if (!isAuthenticated) {
            router.push({
                pathname: '/login',
                query: { from: intendedRoute },
            });
        }
        if (
            isAuthenticated &&
            router.pathname.includes('admin') &&
            !isAdmin
        ) {
            router.push('/');
        }
    }

    render() {
        return ({ ...props }) => <WrappedComponent {...props} />;
    }
}
return WPR;
 }

  export default withPrivateRoute;

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

import { useToasts, AppearanceTypes } from 'react-toast-notifications';

export const showToast = (message: string, appearance: AppearanceTypes) => {
    const { addToast } = useToasts();
    addToast(message, {
        appearance,
    });
};

كنت أستخدم خدمة التوست وعند كل طلب إذا كان هناك خطأ showToast ينبثق ولكن الآن مع هذا الخطأ لا أعتقد أنني سأستخدم هذه الخدمة

يمكنني أن أؤكد أن هذا متعلق بالعلاقات العامة https://github.com/vercel/next.js/pull/8739 بواسطةarcanis
نحن نستخدم إعداد monorepo مع Rush و pnpm مما يلغي سبب دمج العلاقات العامة المذكورة. وهذا يعني أيضًا أن النقطة التي ذكرهاtimneutkens في https://github.com/vercel/next.js/issues/9022#issuecomment -610255555 لا تنطبق علينا ، لدينا الهيكل التالي:

website
  dependencies: next, react, react-dom, library
library
  devDependencies: react, react-dom (for tests)
  peerDependencies: react, react-dom

library.devDependencies.(react|react-dom) عبارة عن روابط رمزية تشير إلى نفس الملفات تمامًا مثل website.dependencies(react|react-dom) . ومع ذلك ، يبدو أن [email protected] المستخدم في https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/lib/resolve-request.ts#L16 لا يتبع الحالي السلوك الافتراضي Node.js بالاحتفاظ بالروابط الرمزية.

انتهى بنا الأمر بما يلي:

1. إعداد وحدات transpile- next لتحويل الشفرة إلى library
2. إعداد resolve.symlinks = true في تهيئة webpack داخل next.config.js
3. معالجة العناصر الخارجية المطلوبة من library ليتم طلبها من library/node_modules (للإصدار من جانب الخادم لحل الوحدات بشكل صحيح)
4. التعليق خارج السطر https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/build/webpack-config.ts#L601

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

لقد كنت أتلاعب بهذه الأشياء ووجدت أنه عندما أستخدم المكوّن الإضافي (HOC) فإنه يرمي بخطأ ، لكن إذا استخدمت مكونًا كغلاف ، فإنه يعمل بشكل جيد.

إذا كان شخص ما مهتمًا ، فلدي ريبو حيث يمكنك إعادة إنتاج هذا: next-element-hooks-error

اختبار HOC - يلقي خطأ

components/withPrivateRoute.js -> مكون الطلب الأعلى

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
const withPrivateRoute = WrappedComponent => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return ({ ...props }) => !loading && <WrappedComponent test={test} {...props}/>;
};

export default withPrivateRoute;

pages/hoc.js -> لا تعمل (الصفحة التي تستخدم HOC)

import React from 'react';
import withPrivateRoute from '../components/withPrivateRoute';

const HocTest = () => <p>Authorization HOC Test!</p>;

export default withPrivateRoute(HocTest);

اختبار مكون الغلاف

components/AuthLayout.js -> مكون (غلاف)

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const AuthLayout = ({ children }) => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return !loading && (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
};

export default AuthLayout;

pages/wrapper.js -> الصفحة باستخدام مكون الغلاف ، تعمل

import React from 'react';
import AuthLayout from '../components/AuthLayout';

const WrapperTest = () => (
    <AuthLayout>
        <p>Authorization Wrapper Test!</p>
    </AuthLayout>
);

export default WrapperTest;

يا Timer هل هناك تقدم في هذا؟

لقد قمت بحل مشكلتي باستخدام https://github.com/vercel/next.js/issues/9022#issuecomment -609969178 كحل.
كانت مشكلاتي تتعلق باستخدام الريبو الخاص بالمكتبة و yarn link ing مع ريبو تطبيقي
مثال
package.json

{
  "dependencies": {
    "next": "9.5.1",
    "myUILibrary": "git+ssh://[email protected]/MyRepo/library-web-ui.git#master",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

وأنا yarn link myUILibrary إلى تسجيل الخروج محليًا MyRepo/library-web-ui والذي تم أيضًا تثبيت react .

شكرا جزيلا johot لنشر الحل الخاص بك

5 🌟 من 3 (نعم! كل النجوم وأكثر!)

يمكنني تأكيد نفس تجربة @ wasd171 في Rush + PNPM monorepo. سأستخدم فقط ~9.4.4 في هذه الأثناء.

أواجه نفس المشكلة بالضبط مع Rush + PNPM 👍

حسنًا ، كان لدي خطأ غبي جدًا تسبب في حدوث هذه المشكلة:

import React, { useState } from 'React';

يجب أن يكون r eact بدلاً من R eact:

import React, { useState } from 'react';

نعم. أرى هذا أيضًا في 9.5.x - الرجوع إلى 9.4.4 يعمل - يمكنك إعادة إنتاج هذا باستخدام next-site أيضًا

لم أتمكن من إصلاح هذا الخطأ في 9.5.2. لكن كل شيء يعمل بشكل مثالي في 9.5.3 بالنسبة لي دون أي حيل.

أنا لا أستخدم pnpm.

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

إنه يعمل بشكل موثوق في 9.5.3 بالنسبة لي الآن. 🤷 لا أعرف ما الذي يحدث بعد الآن.

9.5.3 لا يعمل بالنسبة لي - نفس الخطأ. أنا أستخدم Rush + NPM. هل هناك حل معروف؟ (راجع للشغل يتيح تحديث العنوان لأنه لم يعد حول 9.0.6 بعد الآن)

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

الوحدات المنقولة ذات الخطافات لا تعمل معي أيضًا.

بالمناسبة ، لأي شخص يواجه هذه المشكلة عند استخدام next-transpile-modules و npm ، كتبت قسم الأسئلة الشائعة الذي يشرح المشكلة والحلول المحتملة: https://www.npmjs.com/package/ وحدات الترجمة التالية # أنا -أواجه مشكلة-مع-تبعيات مكررة-أو-الخطاف-غير الصحيح-اتصال-خطأ-في-رد الفعل

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

  "resolutions": {
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

انظر: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

تجدر الإشارة إلى أنه في حالتي ، نجحت الإنشاءات المحلية بينما أبلغت الإنشاءات على Vercel عن الخطأ Invalid hook call .

لقد جربت مشكلة مماثلة في _app.js مع صفحة شاملة في Next 10

مهلا،

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

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

1. قم بتضمين وحدة الطرف الثالث الخاصة بك كعنصر تبعية في مشروعك الرئيسي.
2. قم بتشغيل npm install لتثبيت جميع الوحدات الخاصة بك.
3. افتح المحطة الطرفية / وحدة التحكم الخاصة بك وانتقل إلى الوحدة النمطية ، ثم قم بتشغيل sudo npm link .
4. انتقل مرة أخرى إلى مشروعك الرئيسي وقم بتشغيل npm link @example/project . يجب أن ترى رمز سهم صغير بالقرب من اسم الوحدة النمطية الخاصة بك داخل node_modules إذا كنت تستخدم Visual Studio Code.
5. قم بتشغيل npm run dev .

مرة أخرى ، يجب عليك تضمين React باعتبارها تبعية نظير بدلاً من تبعية عادية في @ example / project.

أتمنى أن يساعد ذلك!

لدي monorepo مع مشروع next.js بالداخل. واجهت نفس المشكلة مع استدعاء ربط غير صالح بعد تثبيت storybook . تم حل المشكلة باتباع اقتراحaengl - لقد أضفت resolutions إلى مستوى الجذر package.json :

"resolutions": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
}

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