TypeScript में JSX त्रुटि: --jsx फ़्लैग और इसे कैसे ठीक करें

«Cannot use JSX unless the '--jsx' flag is provided» — यह क्या है?

कल्पना करें: आप उत्साहपूर्वक TypeScript पर अपना पहला React ऐप लिख रहे हैं। कोड बिल्कुल सही दिखता है, घटक सोच-समझकर बनाए गए हैं, मूड जंगी है। आप कंपाइलेशन चलाते हैं — और अचानक आपको यह ठंडा, डरावना संदेश दिखाई देता है:

Cannot use JSX unless the '--jsx' flag is provided.

परिचित लगता है? चिंता न करें, आप अकेले नहीं हैं। यह त्रुटि Stack Overflow पर हज़ारों व्यूज़ के साथ सबसे लोकप्रिय प्रश्नों में से एक है। लेकिन, किसी भी पहेली की तरह, इसका एक सरल और सुरुचिपूर्ण समाधान है। इस लेख में हम न केवल त्रुटि को ठीक करेंगे, बल्कि यह भी समझेंगे कि यह क्यों होती है और TypeScript को JSX के साथ हमेशा के लिए काम करने के लिए कैसे कॉन्फ़िगर करें।

वैसे, यदि आप अभी TypeScript और React की दुनिया में अपनी यात्रा शुरू कर रहे हैं, तो मैं TypeScript की मूल बातें पर हमारी सामग्री भी देखने की सलाह देता हूँ — इससे शुरुआत में कई नुकसानों से बचने में मदद मिलेगी।

TypeScript JSX पर क्यों आपत्ति करता है?

आइए इस त्रुटि की प्रकृति को समझते हैं। TypeScript एक सख्त भाषा है जो डिफ़ॉल्ट रूप से HTML-जैसे JSX सिंटैक्स को नहीं समझती है। जब आप लिखते हैं:

const element = <h1>Hello, World!</h1>;

TypeScript परिचित कोड नहीं, बल्कि कुछ विदेशी देखता है। कंपाइलर को समझाने के लिए कि ये कोण कोष्ठक कोई त्रुटि नहीं हैं, बल्कि आपके React घटक का हिस्सा हैं, आपको स्पष्ट रूप से --jsx फ़्लैग निर्दिष्ट करना होगा। यह TypeScript को एक दुभाषिया देने जैसा है: "सुनो, ये निर्माण मान्य JSX हैं, इन्हें मत छुओ, बल्कि सही ढंग से प्रोसेस करो"।

यह त्रुटि तीन सामान्य मामलों में होती है:

\n
• नया प्रोजेक्ट — आप React के साथ काम करने के लिए tsconfig.json सेट करना भूल गए;
\n
• JavaScript से माइग्रेशन — आप प्रोजेक्ट को TypeScript में बदल रहे हैं, लेकिन कॉन्फ़िगरेशन अपडेट नहीं किया;
\n
• .tsx फ़ाइलों का उपयोग — आपने .tsx एक्सटेंशन वाली फ़ाइल बनाई, लेकिन कंपाइलर नहीं जानता कि इसके साथ क्या करना है।
\n

अच्छी खबर: इसे ठीक करने में एक मिनट से भी कम समय लगता है। बुरी खबर: यदि आप नहीं जानते कि कहाँ देखना है, तो आप घंटों बिता सकते हैं। आइए इसे हमेशा के लिए ठीक करें।

चरण-दर-चरण समाधान: tsconfig.json सेट करना

सबसे सही और अनुशंसित तरीका है अपने tsconfig.json में JSX सेटिंग जोड़ना। यह फ़ाइल आपके TypeScript प्रोजेक्ट का मस्तिष्क है। यहीं हम कंपाइलर को बताएंगे कि JSX को कैसे प्रोसेस करना है।

चरण 1: tsconfig.json खोलें

अपने प्रोजेक्ट की रूट में tsconfig.json फ़ाइल ढूंढें। यदि यह नहीं है, तो इसे बनाएँ। यह कमांड से किया जा सकता है:

npx tsc --init

यह कमांड कई टिप्पणी किए गए विकल्पों के साथ एक बुनियादी कॉन्फ़िगरेशन फ़ाइल उत्पन्न करेगा। डरें नहीं — हम केवल एक पंक्ति बदलेंगे।

चरण 2: jsx विकल्प जोड़ें

compilerOptions ऑब्जेक्ट के अंदर, पंक्ति जोड़ें (या अनकमेंट करें):

{\n  "compilerOptions": {\n    "jsx": "react-jsx",\n    // बाकी सेटिंग्स...\n  }\n}

ध्यान दें: मान "react-jsx" React 17+ और React 18 के लिए आधुनिक मानक है। यदि आप React का पुराना संस्करण (17 से पहले) उपयोग कर रहे हैं, तो आप "react" निर्दिष्ट कर सकते हैं। लेकिन मैं दृढ़ता से "react-jsx" की सलाह देता हूँ — यह अधिक अनुकूलित कोड उत्पन्न करता है और प्रत्येक फ़ाइल में React को आयात करने की आवश्यकता नहीं होती है।

चरण 3: सहेजें और कंपाइलेशन पुनः चलाएँ

परिवर्तन सहेजने के बाद, त्रुटि गायब हो जानी चाहिए। बिल्ड को फिर से चलाएँ:

npm run build\n# या\nnpx tsc

यदि आपने सब कुछ सही किया है, तो कंपाइलर शिकायत करना बंद कर देगा, और आपका ऐप चल जाएगा।

वैकल्पिक तरीके: उन्नत उपयोगकर्ताओं के लिए

कभी-कभी आपको जल्दी से एक परिकल्पना की जाँच करने या एकल-फ़ाइल स्क्रिप्ट चलाने की आवश्यकता होती है। ऐसे मामलों में, आप कमांड लाइन फ़्लैग का उपयोग कर सकते हैं:

npx tsc --jsx react-jsx app.tsx

यह एक अस्थायी समाधान है — यह प्रोजेक्ट की वैश्विक सेटिंग्स को नहीं बदलता है।