JSX एलिमेंट में कोई कंस्ट्रक्टर नहीं है? TypeScript त्रुटि को समझना

परिचय: आपका घटक "चुप" है, क्योंकि वह जन्म नहीं ले सकता

आप TypeScript के साथ React में कोड लिख रहे हैं, सब कुछ सुचारू रूप से चल रहा है। और फिर - बम! - कंपाइलर आपके सामने एक रहस्यमय संदेश फेंकता है:

JSX element type 'MyComponent' does not have any construct or call signatures.

परिचित तस्वीर है? यदि आप नौसिखिए हैं, तो यह त्रुटि किसी दूसरी दुनिया के मंत्र की तरह लग सकती है। लेकिन घबराएं नहीं। वास्तव में, यह सरल है: TypeScript आपको बता रहा है कि आप जिसे JSX-घटक के रूप में उपयोग करने का प्रयास कर रहे हैं, वह वास्तव में कोई फ़ंक्शन या क्लास नहीं है जिसे "कॉल" या "कंस्ट्रक्ट" किया जा सके।

इस लेख में, हम इस त्रुटि को सरल शब्दों में समझेंगे: यह क्यों होती है, इसे कैसे ठीक करें, और ये "construct or call signatures" आखिर क्या हैं। चलिए शुरू करते हैं - हम मज़ेदार तरीके से और उदाहरणों के साथ समझेंगे!

"Construct or call signatures" का क्या अर्थ है?

मान लीजिए कि JSX-घटक एक रेस्तरां है। आप अंदर जाते हैं, एक टेबल पर बैठते हैं (props पास करते हैं) और भोजन आने की प्रतीक्षा करते हैं (return JSX)। लेकिन अगर रेस्तरां मरम्मत के लिए बंद है या उसका अस्तित्व ही नहीं है, तो आप ऑर्डर नहीं कर सकते।

TypeScript में, "construct signature" एक क्लास की new के साथ कॉल किए जाने की क्षमता है (जैसे कंस्ट्रक्टर)। "Call signature" एक फ़ंक्शन की सीधे कॉल किए जाने की क्षमता है। React में JSX-घटक या तो फ़ंक्शन या क्लास हो सकते हैं। यदि TypeScript आपके "घटक" में इनमें से कुछ भी नहीं देखता है - तो यह त्रुटि देता है।

सामान्य मामला:

// गलत\nconst MyComponent = someObject;\n// <MyComponent /> — त्रुटि!\n\n// सही\nconst MyComponent: React.FC<Props> = (props) => {\n  return <div>नमस्ते</div>;\n};\n// <MyComponent /> — काम करता है

यह त्रुटि तब होती है जब आप JSX में किसी ऐसी चीज़ का उपयोग करने का प्रयास करते हैं जो फ़ंक्शन या क्लास नहीं है। उदाहरण के लिए, एक स्ट्रिंग, संख्या, ऑब्जेक्ट या अप्रारंभिक वेरिएबल।

त्रुटि के शीर्ष 5 कारण (TypeScript कोड उदाहरणों के साथ)

आइए सबसे सामान्य परिदृश्यों को समझते हैं जहाँ आप इस समस्या में फंस सकते हैं। प्रत्येक मामले के लिए, मैं दिखाऊंगा कि समस्या कैसी दिखती है और इसे कैसे ठीक किया जाए।

1. घटक एक ऑब्जेक्ट है, फ़ंक्शन नहीं

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

// ❌ त्रुटि\nimport userData from './userData';\n// userData = { name: 'अन्ना', age: 25 }\nfunction App() {\n  return <userData />; // userData — ऑब्जेक्ट, घटक नहीं!\n}\n\n// ✅ सुधार\nimport UserCard from './UserCard';\nfunction App() {\n  return <UserCard user={userData} />;\n}

कैसे जांचें: अपने IDE में वेरिएबल पर होवर करें। यदि TypeScript object, Record<string, any> या () => JSX.Element के बिना ऐसा कुछ दिखाता है - तो यह घटक नहीं है।

2. घटक एक स्ट्रिंग या संख्या है

कभी-कभी लापरवाही से आप JSX में एक लिटरल या प्रिमिटिव टाइप का वेरिएबल पास कर सकते हैं।

// ❌ त्रुटि\nconst greeting = "नमस्ते, दुनिया!";\nfunction App() {\n  return <greeting />; // greeting — string है\n}\n\n// ✅ सुधार\nfunction App() {\n  return <h1>{greeting}</h1>; // घटक के रूप में नहीं, बल्कि टेक्स्ट के रूप में उपयोग करें\n}

3. घटक गलत तरीके से इम्पोर्ट किया गया है

यदि आप export default का उपयोग करते हैं और बिना कर्ली ब्रैकेट के इम्पोर्ट करते हैं, लेकिन एक्सपोर्ट नामांकित (named) था - तो आपको undefined मिलेगा। और JSX में undefined वही त्रुटि है।

// फ़ाइल Button.tsx में\nexport const Button = () => <button>क्लिक करें</button>;\n// export default मौजूद नहीं है!\n\n// ❌ त्रुटि\nimport Button from './Button'; // Button = undefined\nfunction App() {\n  return <Button />;\n}\n\n// ✅ सुधार\nimport { Button } from './Button'; // नामांकित इम्पोर्ट\n// या Button.tsx में export default जोड़ें