«React एक UMD ग्लोबल को संदर्भित करता है»: TypeScript कैसे पागल हो जाता है

परिचय: जब कंपाइलर «नहीं» कहता है

आप अपना पसंदीदा एडिटर खोलते हैं, TypeScript में कोड की कुछ पंक्तियाँ लिखते हैं, बिल्ड चलाते हैं — और अचानक यह देखते हैं: 'React' एक UMD ग्लोबल को संदर्भित करता है, लेकिन वर्तमान फ़ाइल एक मॉड्यूल है। यदि आप कभी इस त्रुटि का सामना कर चुके हैं, तो आप जानते हैं कि यह कितनी निराशाजनक हो सकती है। सब कुछ सही लगता है: आयात मौजूद है, React इंस्टॉल है, लेकिन कंपाइलर हठपूर्वक यह समझने से इनकार करता है कि आप उससे क्या चाहते हैं।

यह त्रुटि केवल एक आकस्मिक बग नहीं है। यह TypeScript, बिल्ड सिस्टम और मॉड्यूल प्रारूपों के गहरे तंत्र को उजागर करती है। इस लेख में, हम केवल इसे ठीक करने का तरीका नहीं दिखाएंगे। हम «हुड के नीचे» झाँकेंगे और समझेंगे कि React एक UMD ग्लोबल को संदर्भित करता है त्रुटि क्यों होती है, TypeScript UMD और ESM के बीच कैसे अंतर करता है, और अपने प्रोजेक्ट को सही तरीके से कैसे कॉन्फ़िगर करें ताकि इसे हमेशा के लिए भूल जाएँ।

यह लेख उन डेवलपर्स के लिए है जो पहले से ही React और TypeScript से परिचित हैं, लेकिन आंतरिक कार्यप्रणाली को समझना चाहते हैं। तैयार हैं? चलिए शुरू करते हैं!

UMD क्या है और TypeScript इसके बारे में क्यों जानता है?

त्रुटि को समझने से पहले, आइए याद करें कि JavaScript में मॉड्यूल प्रारूप क्या होते हैं। जब आप import React from 'react' लिखते हैं, तो TypeScript को यह समझना होता है कि यह कोड कहाँ से आ रहा है और इसका उपयोग कैसे करना है। कई मानक हैं:

\n
• ESM (ECMAScript Modules) — आधुनिक मानक, जो import/export का उपयोग करता है।
\n
• CommonJS — Node.js का प्रारूप, जो require/module.exports का उपयोग करता है।
\n
• UMD (Universal Module Definition) — एक हाइब्रिड जो ब्राउज़र (ग्लोबल वेरिएबल के माध्यम से) और Node.js (मॉड्यूल के माध्यम से) दोनों में काम करता है।
\n

React कई प्रारूपों में वितरित किया जाता है, जिसमें UMD भी शामिल है। जब आप npm के माध्यम से React इंस्टॉल करते हैं, तो आपको ESM संस्करण मिलता है (उदाहरण के लिए, index.js जिसमें export default है)। लेकिन पुराने संस्करण या कुछ बिल्ड UMD का उपयोग कर सकते हैं, जहाँ React एक ग्लोबल वेरिएबल window.React के रूप में उपलब्ध होता है।

TypeScript टाइप डिक्लेरेशन फ़ाइलों (.d.ts) का विश्लेषण करता है। React के लिए यह पैकेज @types/react है। इसके अंदर एक घोषणा है जो बताती है: «React एक UMD ग्लोबल के रूप में उपलब्ध है»। जब TypeScript देखता है कि आपकी फ़ाइल एक मॉड्यूल के रूप में चिह्नित है (उदाहरण के लिए, इसमें import या export है), तो वह भ्रमित हो जाता है: «आप React को आयात कर रहे हैं, लेकिन घोषणा में कहा गया है कि यह एक ग्लोबल है। और फ़ाइल एक मॉड्यूल है। क्या करें?»

त्रुटि क्यों होती है: «React एक UMD ग्लोबल को संदर्भित करता है, लेकिन वर्तमान फ़ाइल एक मॉड्यूल है»?

यह त्रुटि तब प्रकट होती है जब TypeScript स्पष्ट रूप से यह निर्धारित नहीं कर पाता कि React आयात को कैसे संसाधित किया जाए। यहाँ एक विशिष्ट परिदृश्य है:

// App.tsx\nimport React from 'react';\nimport { useState } from 'react';\n\nconst App: React.FC = () => {\n    const [count, setCount] = useState(0);\n    return <div>{count}</div>;\n};\n\nexport default App;\n

आप कंपाइलेशन चलाते हैं, और TypeScript त्रुटि देता है: 'React' एक UMD ग्लोबल को संदर्भित करता है, लेकिन वर्तमान फ़ाइल एक मॉड्यूल है। इसके बजाय एक आयात जोड़ने पर विचार करें।

क्यों? क्योंकि @types/react में ऐसी घोषणा है (सरलीकृत):

// @types/react से index.d.ts फ़ाइल में\nexport = React;\nexport as namespace React;\n\ndeclare namespace React {\n    // ...प्रकार\n}\n

मुख्य पंक्ति — export as namespace React है। यह TypeScript को बताती है: «यह मॉड्यूल एक ग्लोबल वेरिएबल React (UMD) के रूप में भी उपलब्ध है»। जब आपकी फ़ाइल एक मॉड्यूल है (इसमें export है), तो TypeScript यह नहीं समझ पाता कि आप ग्लोबल React का उपयोग करना चाहते हैं या आयातित React का। परिणामस्वरूप — एक विरोधाभास।

कैसे ठीक करें: तीन सिद्ध तरीके

तरीका 1: स्पष्ट आयात (सबसे सामान्य)

सबसे आसान तरीका — यह सुनिश्चित करना कि आप स्पष्ट रूप से React को आयात करते हैं, भले ही