@baldurh यह वास्तव में बहुत ही असामान्य है, जब प्लेटफॉर्म का उपयोग करते समय अब ​​केवल फ़ोल्डर जहां Next.js ऐप रहता है, तैनात है, यह इस तरह से बेहतर है क्योंकि अन्यथा आपको पहले सभी बाहरी मॉड्यूल के बारे में जानना होगा। 2 बेहतर विकल्प हैं:

• सब कुछ एक ही Next.js ऐप पर ले जाएं
• Lerna या निजी npm पैकेज या समान का उपयोग करें

@ उत्तर के लिए धन्यवाद। उन विकल्पों में से कोई भी हमारे लिए उपलब्ध नहीं है और हम अभी या कुछ भी समान करने के लिए तैनात नहीं कर रहे हैं। हमने शुरुआत में यार्न वर्कस्पेस का इस्तेमाल किया था, लेकिन फिर हमने बाज़ल को एकीकृत किया और यह यार्न वर्कस्पेस की सहानुभूति प्रकृति के साथ अच्छी तरह से नहीं खेलता है। Npm संकुल का अर्थ है कि हम साझा मॉड्यूल को उतनी तेजी से विकसित नहीं कर सकते हैं जितना हम चाहते हैं। यह सिर्फ बहुत अधिक उपरि है।

@baldurh बस अगले i18next के साथ इस में भाग गया क्योंकि हमने उदाहरण के रूप में NextJs एप्लिकेशन को नेस्टेड कर दिया है। क्या आपको वर्कअराउंड मिला?

@ आइसाचिनमैन हम नहीं। हम अन्य कारणों से 9.x में अपग्रेड करने में अभी तक कामयाब नहीं हुए हैं इसलिए मैं इसे नहीं देख रहा हूं। क्या किसी को इस बात का अंदाजा है कि इसे प्रभावित करने वाला कोड कहां हो सकता है? मैं समस्या को बेहतर ढंग से समझना चाहूँगा।

मेरे पास अभी तक इसे खोदने का समय नहीं है, लेकिन अगर किसी को भी रिप्रो की जरूरत है: क्लोन cd में examples/simple और NextJs संस्करण को> = = 9.0.6 में अपग्रेड करें।

यह वर्तमान में 9.0.3 पर है, इसलिए यह तकनीकी रूप से एक पैच पर एक परिवर्तन है।

मुझे हाल ही में ऐसी ही त्रुटि आई थी और इसे घटकर 9.0.5 (और रिएक्ट 16.8.x) करना पड़ा। मैं अगली बार MDX के उपयोग के लिए देखी गई समस्या को कम कर रहा हूं, लेकिन मेरे पास इससे परे कोई ठोस विवरण नहीं है।

मैंने नेक्स्ट एंड नेक्स्ट- i18next पर आधारित एक बहुत बड़े प्रोजेक्ट के साथ एक ही मुद्दे पर काम किया है।

मैंने देखा कि यह त्रुटि 3 कारणों से डाली जा सकती है:

1. गलत प्रतिक्रिया और प्रतिक्रिया-प्रधान संस्करण - मेरे ऐप पर लागू नहीं होते हैं
2. आयात किए गए प्रतिक्रिया-डोम के 2 संस्करण - मेरे ऐप पर लागू नहीं किए गए
3. रिएक्ट हुक का अनुचित उपयोग - मैं हुक का उपयोग नहीं करता, लेकिन कुछ लिबास हैं, और ऐसा लगता है कि यह हर एक के लिए काम करता है।

अजीब बात यह है कि यह केवल उत्पादन निर्माण पर होता है।

@timneutkens @Timer आपको इसमें टैग करने के लिए खेद है, लेकिन मुझे आपसे कुछ इनपुट पसंद

ऐसा लगता है कि आपने react कमाया है, लेकिन react-dom । क्या आप कोशिश कर सकते हैं?

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

मैं react और react-dom निर्भरता को एक स्तर ऊपर ले जाने के द्वारा रेप्रो में अभी इसे हल करने में सक्षम था। अगर कोई इसे आज़माना चाहता है तो मैंने बदलावों को आगे बढ़ाया है। मैंने इसे हमारे वास्तविक प्रोजेक्ट पर आज़माया नहीं है, लेकिन मुझे उम्मीद है कि यह हमारे लिए काम करेगा। शायद इससे @isaachinman , @jaredcwhite और @felixmosh के लिए भी समस्या सुलझ सकती है ?

@ टिमर मुझे हमारी परियोजना में यह काम मिला, लेकिन मुझे यह भी सुनिश्चित करना था कि मेरी कोई अन्य निर्भरता नहीं थी, जिसने हमारी परियोजनाओं में react स्थापित किया, node_modules फ़ोल्डर। हमारे मामले में यह स्टोरीबुक ( yarn why react बहुत मदद की) से संबंधित था। हम वैसे भी स्टोरीबुक को एक अलग प्रोजेक्ट में ले जाने की योजना बना रहे थे, इसलिए मुझे लगता है कि यह समाधान हमारे मामले में काम करेगा।

आह येस। अनुचित रूप से प्रकाशित node_module पैकेज इसका कारण होगा (सहकर्मी निर्भरता के बजाय react(-dom|) निर्भरता के साथ)।

मैं react और react-dom निर्भरता को एक स्तर ऊपर ले जाने के द्वारा रेप्रो में अभी इसे हल करने में सक्षम था। अगर कोई इसे आज़माना चाहता है तो मैंने बदलावों को आगे बढ़ाया है। मैंने इसे हमारे वास्तविक प्रोजेक्ट पर आज़माया नहीं है, लेकिन मुझे उम्मीद है कि यह हमारे लिए काम करेगा। शायद इससे @isaachinman , @jaredcwhite और @felixmosh के लिए भी समस्या सुलझ सकती है ?

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

मैं npm ls react या npm ls react-dom चलाता हूं मुझे सूची में केवल मेरा अगला ऐप मिला है।

@felixmosh क्षमा करें, जाहिरा तौर पर कल मेरे लिए धक्का विफल रहा। अब परिवर्तन निश्चित रूप से वहाँ हैं moved मैंने react और react-dom app फ़ोल्डर से रूट फ़ोल्डर में स्थानांतरित किया ताकि अब आपको yarn/npm install दोनों में करने की आवश्यकता हो। app फ़ोल्डर और रूट फ़ोल्डर app चलाने से पहले। आशा है कि यह पर्याप्त स्पष्ट है।

हम उत्पादन में इस काम को पाने के लिए अपने निर्माण प्रणाली में कुछ बदलाव करने जा रहे हैं, इसलिए यह समाधान अभी भी हमारे लिए थोड़ा परेशानी भरा है do

स्पष्टीकरण के लिए थैंक्स, मैं इसे हल करने के लिए अगली टीम की प्रतीक्षा करूंगा, मेरे मोनो-रेपो की जड़ पर प्रतिक्रिया डिप्स लगाने के लिए थोड़ा अजीब लगता है ...

@felixmosh हाँ मैं

एक ही मुद्दे में चल रहा है, और react और react-dom एक स्तर ऊपर लाने और सर्वर को रूट से चलाने का एकमात्र समाधान है जो वर्तमान में 9.1.5 पर काम करता है। संदर्भ के लिए https://github.com/facebook/react/issues/13991 और https://github.com/facebook/react/issues/15315#issuecomment -479802153 को लिंक करना जैसा कि मैंने इस मुद्दे से पहले पाया था।

हाय इस मुद्दे पर कोई अद्यतन? हमारे पास एक मोनोरेपो है और हम इस सटीक मुद्दे का सामना कर रहे हैं।

उसी समस्या से मिलते हैं।
v9.0.5 rootFolder के बाहर आयात किए गए घटकों के लिए हुक के साथ बहुत अच्छा काम करता है।

9.0.6 से शुरू होकर 9.1.6-canary.5 तक समान समस्याएं हैं।

समस्या केवल सर्वर-साइड पर होती है। यदि SSR अक्षम हो जाता है (जैसे डायनेमिक के माध्यम से बाहरी घटक लोड) तो सभी संस्करण के लिए अपेक्षित के रूप में काम करता है> = 9.0.6।

@nodkz यह प्रतिक्रिया पैकेज के समाधान के साथ एक मुद्दा है, इसलिए यह केवल नोड में होता है।

@ यह मुद्दा लगभग 6 संस्करणों के लिए "अगला" मील का पत्थर बन गया, यह मुझे नवीनतम संस्करण को अपडेट करने से रोकता है।

मैंने उस पर आवास में पूरे दिन का समय बर्बाद किया है, पता नहीं कि इसका स्रोत मुद्दा क्या है, यहां तक ​​कि वर्कअराउंड (जो काम नहीं किया) की कोशिश की।

क्या आपको किसी भी दिशा में जांच करने के लिए किसी सहायता की आवश्यकता है?
क्या आपके पास इसके बारे में कोई आंत-भावना है?
ऐसा केवल उत्पादन निर्माण पर ही क्यों होता है?
9.0.5 से 9.0.6 जो कि इस से संबंधित हो सकता है क्या बदल गया था?

थैंक्स 🙏🏼

मुझे लगता है कि मुझे मुद्दा मिल गया है !!!
मुझे लगता है कि यह 2 चीजों का एक संयोजन है:

1. नोड -modules के लिए सिम्-लिंक का उपयोग
2. i18next / react-i18next सर्वर बंडलों में बाहरी नहीं थे !!
   
   मेरे मामले में, जब यह उत्पादन निर्माण पर विस्फोट करता है, तो यह i18next useTranslation हुक पर शिकायत करता है ...

इसलिए मैंने इस कारण की पड़ताल की है कि सर्वर बंडल के अंदर नोड मॉड्यूल क्यों हैं (सर्वर बंडल के लिए सबसे अच्छा अभ्यास उन्हें बाहरी बनाने के लिए है)।

मैंने देखा कि अगले परिवाद के लिए कुछ अपवाद हैं (क्यों?), मज़ेदार हिस्सा यह है कि यह रेगेक्स सभी next/dist/ साथ समाप्त होने वाले सभी लिबासों को पकड़ता है, जैसा कि i18next & react-i18next होता है !!

इसलिए, यदि आप इसे बदलते हैं:

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

जांच

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

सर्वर बंडल उन सभी लिबासों को बाहर कर देगा जो next और next/dist साथ समाप्त होते हैं, और इसने समस्या को हल कर दिया है!

मेरे लिए मुख्य मुद्दा नए तरीके के अनुरोधों का समाधान है: https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack-config.ts#L446

चूँकि हमारे पास परियोजना रूट के बाहर घटक हैं, इसलिए अनुरोध रिज़ॉल्यूशन में एक त्रुटि होगी, जिसके परिणामस्वरूप react का सर्वर सर्वर में बंडल किया जा सकता है। और यही कारण है कि हमें सर्वर पर Invalid hook call त्रुटि मिलती है।

@baldurh context उस लिंक में, जिसे आपने वेबपैक द्वारा प्रदान किया है, और यह अलग है कि संकलन रूट (आपकी परियोजना निर्देशिका)।
यह हमेशा उस फ़ाइल की निर्देशिका है जो आवश्यकता को जारी कर रही है।

सही। मैंने इसे अभी के लिए हमारे लिए काम करने के लिए पैच किया है। मुझे लगता है कि हम अंततः कोड की संरचना को बदल देंगे ताकि निर्भरता एक ऊपरी निर्देशिका स्तर पर साझा हो। हालाँकि, भले ही react बाहरी फ़ोल्डर में उपलब्ध हो (रूट के बाहर) फिर भी मुझे त्रुटि मिली।

मैं एक लिंक किए गए पैकेज का उपयोग करने की कोशिश कर रहा हूं और मैं एक ही समस्या का सामना कर रहा हूं। दुर्भाग्य से https://github.com/facebook/react/issues/13991 वर्क ly से कोई भी फिक्स नहीं है

मैं भी yarn link साथ सम्‍मिलित घटक लाइब्रेरी के साथ एक ही समस्या का सामना कर रहा हूं। इसने v9.0.6-canary.4 तक ठीक काम किया और अब मैं कुछ अन्य टिप्पणीकारों के रूप में उसी स्थिति में हूं और इस अतीत को अपग्रेड नहीं कर सकता .. मैंने इस PR https://github.com/zeit में परिवर्तन को इंगित किया है

मेरे घटक पुस्तकालय react , react-dom , और styled-components । इसके लिए विन्यास इस प्रकार है

• पैकेजों को देव-निर्भरता के रूप में जोड़ा और उन्हें सह-निर्भरता में शामिल किया
• मेरे वेबपैक कॉन्फिगरेशन में एक्सटर्नल के रूप में पैकेज जोड़े
• मेरे अगले विन्यास में इन पैकेजों में उपनामों को जोड़ा गया
• अगले-ट्रांसपाइल-मॉड्यूल के साथ घटक लाइब्रेरी मॉड्यूल को ट्रांसप्लड किया

अपडेट करें

मैं सर्वर बाह्य उपकरणों में इन मॉड्यूलों को शामिल करके इसे ठीक करने में सक्षम था। इस टिप्पणी में @HosseinAgha का धन्यवाद https://github.com/martpie/next-transpile-modules/issues/50#issuecomment -558318688

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

मैं सटीक एक ही मुद्दे को देख रहा हूं, मेरे लिए अब तक किसी ने भी काम नहीं किया।

मेरा पैकेज काम करता है अगर मैं इसे प्रकाशित करता हूं और इसे स्थापित करता हूं (और मेरे अगले.कॉन्फ़िग.जै में रिज़ॉल्यूशन का उपयोग करता हूं)।

लेकिन yarn link @mypackage माध्यम से लिंक किए गए पैकेज के साथ एक देव बिल्ड चलाने से हमेशा एक अमान्य हुक त्रुटि होती है।

मैं node_modules/dist/build/wepack-config.js को संशोधित करके और https://github.com/zeit/next.js/pull/8739 में जोड़ी गई लाइनों को कम करके इसे काम में लाने में सक्षम था।

अगर मैं लॉग इन कर रहा हूं तो मैं क्या देख रहा हूं।

• /।
• मेरी समझ से यह ट्रिगर हो जाता है यदि पथ समान नहीं है यहां तक ​​कि फ़ाइल / संस्करण 100% समान है

अपडेट करें:

हम यार्न वर्कस्पेस का उपयोग करने के लिए अपने पैकेज को परिवर्तित करके समस्या के आसपास काम करने में कामयाब रहे (भले ही हमारे रेपो में केवल एक ही पैकेज हो)।
हमने अपना कोड ./src से ./package/our-package-name/src और सेटअप यार्न वर्कस्पेस => https://classic.yarnpkg.com/en/docs/workspaces/ पर स्थानांतरित कर दिया है।

यह समस्या के इर्द-गिर्द काम करता है क्योंकि यह सामान्य निर्भरता को शीर्ष स्तर तक लहराएगा ।/node_modules फ़ोल्डर और ./package/our-package-name/node_modules काफी हद तक खाली रहेंगे।

इसलिए अब जब हम अपने पैकेज को अगले लिंक करते हैं, तो अब प्रतिक्रिया के दूसरे संस्करण में नहीं खींचेंगे (जैसा कि यह हमारे पैकेज में मौजूद नहीं है नोड_मॉडल फ़ोल्डर) और सब कुछ उसी तरह काम करता है जैसा कि इसे करना चाहिए।

मुझे वही कमबख्त समस्या है। ¬¬ '

हम आम तौर पर शपथ ग्रहण को ध्वस्त कर देते हैं क्योंकि यह आचार संहिता के खिलाफ है।

क्षमा करें, मैं इस बग से नाराज था। दरअसल, मुझे नेक्स्ट का बहुत ज्यादा पसंद है।जेएस लेकिन कोई भी इसका उपयोग नहीं कर सकता क्योंकि यह समस्या उबाऊ है।

बाहरी स्थानीय पैकेज और next-transpile-modules साथ काम करने पर हम इस समस्या का सामना कर रहे हैं।

जैसा कि हम Next.js के नवीनतम संस्करण के साथ रहना चाहते हैं, मैं मूल कारण खोजने पर Next.js को एक पैच सबमिट करने का प्रयास करूंगा।

अगले [email protected] को स्थापित करने के बाद, मैं एक ही मुद्दे का सामना करता
मेरी निर्भरताएँ अगले @v9.3.1 , [email protected] , [email protected] हैं और निश्चित रूप से कई अन्य

इस मुद्दे को पोस्ट करने के लिए धन्यवाद, मुझे हमारी डिजाइन प्रणाली (प्रतिक्रिया घटक पुस्तकालय) पैकेज को सहानुभूति देने के साथ भी समस्याएं थीं। हम इसे 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 में तय किया गया यह देखना अच्छा होगा, मैंने यह समझने में बहुत समय बिताया कि वेबपैक उर्फ ​​ने मेरे सभी नॉन नेक्स्टज प्रोजेक्ट के लिए क्यों काम किया है :)

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

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

react पहले से ही बाहरी सर्वर-साइड है।

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

यह समस्या को हल नहीं करेगा।

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

@timneutkens

खैर नहीं यह हमेशा मामला नहीं होता है। मुझे यकीन है कि सहकर्मी निर्भरता के रूप में प्रतिक्रिया और प्रतिक्रिया-डोम है। समस्या तब भी होती है जब आप उदाहरण के लिए अपने पुस्तकालय को नेक्स्टज प्रोजेक्ट के लिए सीलिंक करते हैं। फिर क्या होता है कि आपके पुस्तकालय के अंदर आपके पास node_modules फ़ोल्डर होगा (कम से कम अगर आपने कभी उस लाइब्रेरी फ़ोल्डर में npm i या npm link लिया)।

जब प्रतिक्रिया इस लाइब्रेरी फ़ोल्डर से हल हो जाती है तो यह उस node_modules फ़ोल्डर में से किसी एक पर हल हो जाएगी और आपको प्रतिक्रिया की दोहरी प्रतियाँ मिलेंगी जिससे समस्या उत्पन्न होगी। अगर मैं अपने काम के अंदर node_modules फ़ोल्डर को हटाता हूं या npm link तुलना में कुछ और का उपयोग करके इसे स्थापित करता हूं तो हां यह काम करता है (यदि आप सहकर्मी निर्भरता या बिल्कुल उसी प्रतिक्रिया संस्करण का उपयोग करते हैं)।

तो देव के दौरान इसे हल करने के लिए आप उर्फ ​​प्रतिक्रिया के लिए सभी को एक ही संस्करण का उपयोग करने के लिए मजबूर करने में सक्षम होना चाहते हैं। यहां बताई गई समस्याओं के कारण, config.externals ... (कम से कम मेरे लिए) को जोड़े बिना वर्तमान NextJS संस्करण में इसका कोई प्रभाव नहीं है, शायद जैसा कि लोगों ने यहां उल्लेख किया है क्योंकि कुछ बदलावों के कारण यहां # 8739 का उल्लेख किया गया है?

इसी तरह का एक मामला मेरे लिए हो रहा है लेकिन (संभावित रूप से) सामग्री-यूआई लाइब्रेरी (# 10162 में उल्लिखित) के कारण, मेरे लिए अभी का अस्थायी निर्धारण npm run clean मेरे preserve जोड़ना था। dev स्क्रिप्ट यहां उल्लिखित हैं:
https://github.com/zeit/next.js/issues/10162#issuecomment -6125014

@timneutkens मुझे लगता है कि असली मुद्दा यह है कि उन निर्भरताओं को कैसे अपने स्वयं के डिपो (एसपी बनाम पीयर-डिप) सूचीबद्ध कर रहे हैं, लेकिन किसी भी विचार को हम अपने स्वयं के ऐप में स्थायी रूप से ठीक करने के लिए क्या कर सकते हैं?

@ ryan-0 क्या आपके पास कोई विशेष सेटअप है? अगर सामग्री यूआई एक सहकर्मी के रूप में प्रतिक्रिया नहीं करती है तो आश्चर्य होगा? जैसे आप बहुत पुराने प्रतिक्रिया संस्करण का उपयोग करते हैं या कुछ भी सहानुभूति रखते हैं?

कोई विशेष सेटअप नहीं .. कोई सहानुभूति नहीं है और 16.13.1 -> की प्रतिक्रिया है, हमारे पास कुछ अन्य डिपो हैं जो समस्या को उचित तो बना सकते हैं, लेकिन कम से कम उस रिप्रो के अनुसार ऐसा लगता है कि शायद यह सामग्री-यूआई / कोर से संबंधित है। (जिसका हम उपयोग भी करते हैं):
https://github.com/zeit/next.js/issues/10162

@ ryan-0 आपके सामग्री-यूआई फ़ोल्डर के अंदर प्रतिक्रिया के साथ एक नोड_मॉडल फ़ोल्डर है?

इसके अलावा 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
  }
}

मैं Lerna मोनोरेपो में मौजूद स्थानीय पैकेज के साथ yarn link का उपयोग कर रहा हूं। इसके node_modules में react की एक प्रति शामिल नहीं है, लेकिन मोनोरपो रूट करता है । मैं यह उम्मीद नहीं करूंगा कि जब तक resolve.alias का उपयोग किया जाता है, तब तक फर्क पड़ेगा, लेकिन दुर्भाग्य से ऐसा नहीं है। मोनोरपो रूट से react की कॉपी निकालने के बाद, मुझे अब Cannot find module 'react' त्रुटि मिल रही है।

क्या किसी को इसके लिए एक अच्छा समाधान मिला?

मेरे पास एक लिंक की गई अगली लाइब्रेरी है जिसे मैं अपने 'उपभोक्ता' प्रोजेक्ट में शामिल करने के लिए next-transpile-modules का उपयोग कर रहा हूं। मैंने अपने डॉक्स में उल्लिखित react उपनाम को अपने next.config.json में जोड़ा, लेकिन यह पर्याप्त नहीं था। मुझे अभी भी रिएक्ट के लिए डुप्लिकेटेड निर्भरता की त्रुटि मिल रही है।

आप @mweststrate द्वारा relative-deps का उपयोग करने का प्रयास कर सकते हैं

क्या किसी को इसके लिए एक अच्छा समाधान मिला?

मेरे पास एक लिंक की गई अगली लाइब्रेरी है जिसे मैं अपने 'उपभोक्ता' प्रोजेक्ट में शामिल करने के लिए next-transpile-modules का उपयोग कर रहा हूं। मैंने अपने डॉक्स में उल्लिखित react उपनाम को अपने next.config.json में जोड़ा, लेकिन यह पर्याप्त नहीं था। मुझे अभी भी रिएक्ट के लिए डुप्लिकेटेड निर्भरता की त्रुटि मिल रही है।

हां, ऊपर मेरी पोस्ट देखें आपको मेरे नमूने में config.externals भाग को जोड़ने की आवश्यकता है, फिर उपनाम फिर से काम करना शुरू कर देता है

@ जोहोट मैंने आपके समाधान की कोशिश की लेकिन यह मेरे लिए बहुत काम नहीं आया। मुझे कुछ अजीब त्रुटियां होने लगीं, लेकिन मुख्य रूप से यह एक: cannot destructure property 'query' of 'Object(...)(...)' as it is null आपके समाधान की कोशिश करने के बाद। इस मामले में शून्य के रूप में देखी जाने वाली वस्तु useRouter next/router ।

@aleclarson टिप के लिए धन्यवाद। अगर मैं इसे अगले सेटअप के साथ काम नहीं कर सकता तो मैं इसे एक कोशिश दूंगा। क्या आप वर्तमान में इसका उपयोग कर रहे हैं?

यदि आप next-transpile-modules और यार्न का उपयोग कर रहे हैं, तो समाधान काफी सीधा है: https://github.com/martpie/next-transpile-modules#i -have-परेशानी-के साथ डुप्लिकेट-निर्भरताएँ-या-और -invalid-हुक-कॉल-त्रुटि-इन-प्रतिक्रिया

यदि आप npm का उपयोग कर रहे हैं, तो मैं अभी भी स्वयं एक समाधान की तलाश में हूँ: c

ठीक है, इसलिए मेरा अंतिम समाधान 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-compenders.com/docs/faqs#linking -in-a-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);

मैंने इस मुद्दे का सामना किया और npm ( https://github.com/vercel/next.js/ का उपयोग करने के बजाय yarn का उपयोग करने के लिए इसका सामना किया। मुद्दों / 9022 # जारी करने -616169466

क्या इसका कोई हल है?

बस पूरी तरह से संस्करण 9.4.4 के साथ अटक गया।

नीचे निजी मार्गों के लिए HOC पर जारी होने वाला मुद्दा। मैंने 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 पॉप अप होता है, लेकिन अब इस त्रुटि के साथ मुझे नहीं लगता कि मैं इस सेवा का उपयोग करूंगा

मैं यह पुष्टि कर सकता हूं कि यह PR https://github.com/vercel/next.js/pull/8739 से संबंधित है
हम रश और pnpm के साथ एक मोनोरेपो सेटअप का उपयोग कर रहे हैं जो उस कारण को समाप्त करता है जिसका उल्लेख पीआर विलय किया गया था। इसका अर्थ यह भी है कि https://github.com/vercel/next.js/issues/9022#issuecomment -610255555 में किया गया @timneutkens बिंदु हमारे लिए लागू नहीं होता है, हमारे पास निम्नलिखित संरचना है:

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) समान सटीक फ़ाइलों की ओर संकेत करते हैं। हालाँकि यह संकल्प @1.11.0 जैसा दिखता है जिसका उपयोग https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9809c74cfc3/packages/next/lib/resolve-request.ts#Loy1616 में किया जाता है। डिफ़ॉल्ट Node.js व्यवहार को सहानुभूति को संरक्षित करके।

हमने निम्नलिखित को समाप्त किया:

1. हमारे कोड को library ट्रांसपाइल करने के लिए
2. resolve.symlinks = true अंदर वेबपैक कॉन्फ़िगरेशन में next.config.js
3. से अनुरोध किया बाहरी जोड़ तोड़ library से अनुरोध किया जाना library/node_modules (सही ढंग से हल करने के लिए मॉड्यूल सर्वर साइड निर्माण के लिए)
4. लाइन बाहर टिप्पणी करते https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/build/webpack-config.ts#L601

इरादा के रूप में यह काम करता है लेकिन महसूस करता Hacky, यह देखते हुए कि Next.js जैसे महत्वपूर्ण वेबसाइटों के कुछ शक्ति है एप्पल यह monorepos कि अक्सर उन बड़ी परियोजनाओं में साझा कोड के प्रबंधन के लिए उपयोग किया जाता है के लिए बेहतर समर्थन की उम्मीद के लिए संभव है?

मैं इन के साथ खेल रहा हूँ और पाया कि, जब मैं एक HOC का उपयोग करता हूँ तो यह एक त्रुटि फेंकता है, लेकिन, अगर मैं एक आवरण के रूप में एक घटक का उपयोग करता हूँ, तो यह ठीक काम करता है।

अगर किसी को दिलचस्पी है, मेरे पास एक रेपो है जहां आप इसे पुन: पेश कर सकते हैं: अगले-घटक-हुक-त्रुटि

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 का उपयोग करके मेरे ऐप रेपो के साथ थी
उदाहरण
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 धन्यवाद

3 में से 5 3 (हाँ! सभी सितारे और अधिक!)

मैं रश + पीएनपीएम मोनोरेपो में @ wasd171 के समान अनुभव की पुष्टि कर सकता हूं। मैं अभी अंतरिम में ~9.4.4 का उपयोग करूंगा।

मैं रश + PNPM Rush के साथ एक ही सटीक मुद्दा रख रहा हूं

ठीक है मुझे इस समस्या के कारण बहुत ही बेवकूफाना त्रुटि हुई:

import React, { useState } from 'React';

यह आर eact के बजाय आर 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 में मज़बूती से काम कर रहा है। What's मुझे नहीं पता कि अब क्या चल रहा है।

9.5.3 मेरे लिए काम नहीं करता है - वही त्रुटि। मैं रश + एनपीएम का उपयोग कर रहा हूं। क्या कोई ज्ञात समाधान है? (btw शीर्षक को अद्यतन करने देता है क्योंकि यह 9.0.6 के बारे में नहीं है)

FYI करें, यह एक कारण था कि मेरे ऑर्गन ने npm से yarn स्थानांतरित करने का निर्णय लिया। यह सिर्फ (दुर्भाग्य से) बहुत अच्छा खेलता है। यह कदम कष्टप्रद है, लेकिन अब हम काफी खुश हैं।

हुक के साथ ट्रांसप्लड मॉड्यूल मेरे लिए भी काम नहीं करते हैं।

वैसे, next-transpile-modules और npm का उपयोग करते समय इस समस्या का सामना करने वाले किसी भी व्यक्ति ने, मैंने एक FAQ अनुभाग लिखा है जो समस्या और संभावित समाधानों की व्याख्या करता है: https://www.npmjs.com/package/ अगला-ट्रांसपाइल-मॉड्यूल # i -have- परेशानी-डुप्लिकेट-निर्भरता-या-अमान्य-हुक-कॉल-त्रुटि-प्रतिक्रिया

मैं प्रोजेक्ट रूट में यार्न के लिए संस्करण रिज़ॉल्यूशन को मैन्युअल रूप से जोड़कर इसे हल करने में कामयाब रहा। इसलिए सभी प्रतिक्रिया निर्भरता को मूल package.json पर ले जाने के बजाय, मैंने निम्नलिखित पंक्तियाँ जोड़ीं:

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

देखें: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

यह ध्यान देने योग्य है कि मेरे मामले में, स्थानीय बिल्ड ने काम किया, जबकि वर्सेल पर बिल्ड ने Invalid hook call त्रुटि की सूचना दी।

मैंने नेक्स्ट 10 में एक catchall पेज के साथ _app.js में इसी तरह के मुद्दे का प्रयोग किया

अरे,

मेरे मामले में मैंने ऐसे ट्रांसप्लड मॉड्यूल रखे थे जो npm link माध्यम से जुड़े थे।

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

1. अपने मुख्य प्रोजेक्ट में निर्भरता के रूप में अपने तीसरे पक्ष के मॉड्यूल को शामिल करें।
2. अपने सभी मॉड्यूल को स्थापित करने के लिए npm install चलाएँ।
3. अपना टर्मिनल / कंसोल खोलें और मॉड्यूल पर नेविगेट करें, फिर sudo npm link चलाएं।
4. अपने मुख्य प्रोजेक्ट पर वापस जाएं और npm link @example/project चलाएं। यदि आप Visual Studio कोड का उपयोग कर रहे हैं, तो आपको अपने मॉड्यूल नाम के अंदर एक छोटा तीर आइकन देखना चाहिए।
5. अपना npm run dev चलाएँ।

फिर, आपको अपने @ उदाहरण / परियोजना में एक नियमित निर्भरता के बजाय एक सहकर्मी के रूप में प्रतिक्रिया को शामिल करना होगा।

मुझे आशा है कि वह मदद करेंगे!

मैं एक अगली परियोजना के अंदर के साथ एक monorepo है। storybook स्थापित करने के बाद अमान्य हुक कॉल के साथ एक ही समस्या का सामना करना पड़ा। इस मुद्दे को @aengl के सुझाव का पालन करके हल किया गया - मैंने resolutions को मूल स्तर package.json जोड़ा:

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

मुझे यकीन नहीं है कि अगर हम एक बार और ग्राहक और पैकेज जोड़ रहे हैं तो यह एक अच्छा समाधान होने वाला है।