next · बिल्ड और टाइप
संदेश
You're importing a component that needs useState. This React hook only works in a client component.
इसका मतलब
App Router में हर component डिफ़ॉल्ट रूप से server component होता है, और किसी server component ने ऐसी फ़ाइल import की जो useState जैसा hook इस्तेमाल करती है, जिसका अर्थ केवल browser में है। निर्देश फ़ाइल के सबसे ऊपर 'use client' की एक पंक्ति है, और उसे लगाने पर वह फ़ाइल तथा वह जो कुछ import करती है, सब client के bundle में चला जाता है — इसीलिए पूरे पृष्ठ की जगह उस सबसे छोटे टुकड़े पर लगाना सस्ता विकल्प है जिसे state चाहिए। उलटी दिशा में, इस तरह बाँटना कि client component अपने children के रूप में server component ले, data लाने का काम server पर ही रखता है। Next.js 13 में यही स्थिति "It only works in a Client Component but none of its parents are marked with \"use client\"" लिखी जाती थी।
सुधार
इसका एक-लाइन कमांड नहीं है। व्याख्या में लिखा है कि क्या देखना है।
- कौन देता है
- next
- बिल्ड और टाइप
- 10
build की त्रुटियाँ किसी औज़ार का चलने से पहले मना कर देना हैं, इसलिए प्रकट होते समय वे कुछ तोड़ती नहीं — पर वे दो सवाल पूछती हैं: क्या आप type या रास्ता असली रूप के अनुसार सुधारेंगे, या as any अथवा दमन-टिप्पणी से उस एक पंक्ति को पार करा देंगे — और यहीं पहली बार वे चीज़ें सामने आती हैं जो केवल आपकी मशीन पर सही हैं: अक्षरों के बड़े-छोटे रूप, extension, और environment variables।
एरर संदेश कैसे पढ़ें
- पहली पंक्ति से पढ़ें। जितना नीचे जाएँगे उतना वह औज़ार के भीतर की बात है; कारण आम तौर पर सबसे ऊपर लिखा होता है।
- फ़ाइल का नाम और पंक्ति संख्या दिखे तो वहीं से शुरू करें — stack का सबसे ऊपरी frame नहीं, बल्कि वह सबसे ऊपरी पंक्ति जिसमें आपकी लिखी फ़ाइल का नाम हो।
- संदेश को जैसा है वैसा खोजें, पर पहले अपने paths और variable नाम हटा दें — वही खोज को अटकाते हैं।
- वही स्थिति औज़ार के हर संस्करण में अलग शब्दों में आती है। नतीजे बेमेल लगें तो संस्करण संख्या भी जोड़ें।
- कोई सुधार चिपकाने से पहले देख लें कि वह क्या फेंक देगा। इनमें कुछ पलटे नहीं जा सकते।
अक्सर पूछे जाने वाले सवाल
Q. “You're importing a component that needs useState. This React hook only works in a client component.” का क्या मतलब है?
App Router में हर component डिफ़ॉल्ट रूप से server component होता है, और किसी server component ने ऐसी फ़ाइल import की जो useState जैसा hook इस्तेमाल करती है, जिसका अर्थ केवल browser में है। निर्देश फ़ाइल के सबसे ऊपर 'use client' की एक पंक्ति है, और उसे लगाने पर वह फ़ाइल तथा वह जो कुछ import करती है, सब client के bundle में चला जाता है — इसीलिए पूरे पृष्ठ की जगह उस सबसे छोटे टुकड़े पर लगाना सस्ता विकल्प है जिसे state चाहिए। उलटी दिशा में, इस तरह बाँटना कि client component अपने children के रूप में server component ले, data लाने का काम server पर ही रखता है। Next.js 13 में यही स्थिति "It only works in a Client Component but none of its parents are marked with \"use client\"" लिखी जाती थी।
Q. इसे कैसे ठीक करें?
एक-लाइन कमांड नहीं है। ऊपर की व्याख्या में लिखा है कि क्या देखना है।
Q. यह कौन-सा औज़ार देता है?
next। यह बिल्ड और टाइप में आता है, और संदेश 16 शब्दों का है।