जावास्क्रिप्ट और टाइपस्क्रिप्ट डेवलपर्स के रूप में, हम अक्सर विभिन्न मॉड्यूल सिस्टम के साथ काम करते समय अप्रत्याशित त्रुटियों का सामना करते हैं। एक सामान्य समस्या "मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं कर सकता" त्रुटि है। यह आमतौर पर आधुनिक ईएस मॉड्यूल (ईएसएम) के साथ काम करते समय या वेबपैक, बेबेल, या नोड.जेएस वातावरण जैसे बंडलर से जुड़े सेटअप से निपटने पर सामने आता है। इस ब्लॉग में, हम पता लगाएंगे कि इस त्रुटि का कारण क्या है, ऐसा क्यों होता है, और इसे हल करने के लिए व्यावहारिक समाधान।

इस त्रुटि का मतलब क्या है?

"एक मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं कर सकता" त्रुटि स्व-व्याख्यात्मक है: यह तब होता है जब जावास्क्रिप्ट एक वैध ईएस मॉड्यूल के बाहर एक आयात विवरण का सामना करता है। जावास्क्रिप्ट में, मॉड्यूल सिस्टम यह निर्धारित करते हैं कि कोड कैसे विभाजित है कई फाइलों में और वे एक दूसरे के साथ कैसे इंटरैक्ट करते हैं ईएस मॉड्यूल (आयात/निर्यात) और कॉमनजेएस (आवश्यकता/मॉड्यूल.एक्सपोर्ट) दो प्राथमिक मॉड्यूल सिस्टम हैं।

यदि जावास्क्रिप्ट आपके कोड को ईएस मॉड्यूल के रूप में नहीं पहचानता है, तो यह त्रुटि उत्पन्न करता है।

"मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं कर सकते" त्रुटि का क्या कारण है?

यह आम तौर पर तब होता है जब जावास्क्रिप्ट/टाइपस्क्रिप्ट को मॉड्यूल संदर्भ के बाहर एक आयात विवरण का सामना करना पड़ता है। जिसका अर्थ है कि जिस फ़ाइल से आप आयात करने का प्रयास कर रहे हैं वह ES मॉड्यूल के रूप में मान्यता प्राप्त नहीं है।

यहां कुछ और सामान्य कारण बताए गए हैं कि यह त्रुटि क्यों हो सकती है:

• Node.js डिफ़ॉल्ट रूप से CommonJS का उपयोग करता है: डिफ़ॉल्ट रूप से, Node.js CommonJS (CJS) मॉड्यूल का उपयोग करता है, ES मॉड्यूल का नहीं। इसका मतलब यह है कि आयात/निर्यात सिंटैक्स निर्दिष्ट होने तक मूल रूप से समर्थित नहीं है।

• गलत कॉन्फ़िगर किया गया बैबल/वेबपैक: आपके कोड को बंडल करते समय, बैबेल या वेबपैक जैसे उपकरण ईएस मॉड्यूल को सही ढंग से संभालने के लिए कॉन्फ़िगर नहीं किए जा सकते हैं, खासकर यदि लक्ष्य वातावरण मूल रूप से उनका समर्थन नहीं करता है।

• package.json में "type": "module" गायब है: यदि आप Node.js प्रोजेक्ट में ES मॉड्यूल का उपयोग कर रहे हैं, तो आपको "type" जोड़कर इसे स्पष्ट रूप से निर्दिष्ट करना होगा : आपके package.json में "मॉड्यूल"।

• फ़ाइल एक्सटेंशन बेमेल: कभी-कभी, ईएस मॉड्यूल के लिए .mjs के बजाय .js का उपयोग करने या इसके विपरीत इस त्रुटि का परिणाम हो सकता है।

चरण दर चरण समाधान

यहां "मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं किया जा सकता" त्रुटि को ठीक करने के लिए कुछ समाधान दिए गए हैं:

• Node.js में ES मॉड्यूल सक्षम करें:

सबसे आम मामला तब होता है जब आप Node.js के साथ काम कर रहे होते हैं, जो डिफ़ॉल्ट रूप से CommonJS मॉड्यूल के लिए होता है। ईएस मॉड्यूल को सक्षम करने के लिए, निम्नलिखित कार्य करें:

विधि 1: package.json को संशोधित करें:

{
  "type": "module"
}

अपने package.json में "type": "module" जोड़कर, आप Node.js को सभी .js फ़ाइलों को ES मॉड्यूल के रूप में मानने के लिए कह रहे हैं।

विधि 2: फ़ाइलों का नाम बदलकर .mjs करें:

यदि आप अपने package.json को संशोधित नहीं करना चाहते हैं, तो आप स्पष्ट रूप से इंगित करने के लिए कि वे ES मॉड्यूल हैं, अपनी फ़ाइलों का नाम बदलकर .mjs (उदाहरण के लिए, Index.mjs) कर सकते हैं।

• बैबल/वेबपैक कॉन्फ़िगरेशन अपडेट करें:

यदि आप बेबेल या वेबपैक का उपयोग कर रहे हैं, तो सुनिश्चित करें कि वे ईएस मॉड्यूल को सही ढंग से संभालने के लिए कॉन्फ़िगर किए गए हैं। बेबेल के लिए, आप @babel/preset-modules प्लगइन का उपयोग कर सकते हैं। वेबपैक के लिए, अपने कॉन्फ़िगरेशन में मॉड्यूल को गलत पर सेट करें।

बेबेल के लिए: .babelrc या babel.config.json फ़ाइल को अपडेट करें:

{
  "presets": ["@babel/preset-modules"]
}

वेबपैक के लिए: webpack.config.js फ़ाइल को अपडेट करें:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

• आयात पथ और सिंटेक्स की जांच करें:

सुनिश्चित करें कि आपके आयात पथ सही हैं और आप सही सिंटैक्स का उपयोग कर रहे हैं। उदाहरण के लिए, सापेक्ष पथ ./ या ../ से शुरू होने चाहिए।

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

• फ़ाइल एक्सटेंशन की दोबारा जांच करें:

यदि आप ईएस मॉड्यूल का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपके फ़ाइल एक्सटेंशन मॉड्यूल प्रकार से मेल खाते हैं। ES मॉड्यूल के लिए .mjs और CommonJS मॉड्यूल के लिए .js का उपयोग करें।

• .एमजेएस: ईएस मॉड्यूल
• .cjs: कॉमनजेएस मॉड्यूल

ईएस मॉड्यूल और कॉमनजेएस मॉड्यूल के बीच क्या अंतर है?

तो एक बात जो दिमाग में आती है वह यह है कि ईएस मॉड्यूल और कॉमनजेएस मॉड्यूल के बीच क्या अंतर है? और जावास्क्रिप्ट में दो अलग-अलग मॉड्यूल सिस्टम क्यों हैं?

ईएस मॉड्यूल

ईएस मॉड्यूल ईएस6 (ईएस2015) में पेश किया गया आधिकारिक जावास्क्रिप्ट मॉड्यूल सिस्टम है। वे मॉड्यूल के बीच निर्भरता को परिभाषित करने के लिए आयात और निर्यात कीवर्ड का उपयोग करते हैं। ईएस मॉड्यूल सांख्यिकीय रूप से विश्लेषण योग्य हैं, जिसका अर्थ है कि निर्भरता को संकलन समय पर हल किया जाता है, जिससे कोड को अनुकूलित करना आसान हो जाता है।

ईएस मॉड्यूल को अतुल्यकालिक रूप से लोड किया जाता है, जो बेहतर प्रदर्शन और मॉड्यूल के समानांतर लोडिंग की अनुमति देता है। वे नामित निर्यात, डिफ़ॉल्ट निर्यात और चक्रीय निर्भरता का भी समर्थन करते हैं। ES मॉड्यूल आधुनिक ब्राउज़रों और Node.js ("प्रकार": "मॉड्यूल" ध्वज के साथ) में व्यापक रूप से समर्थित हैं।

कॉमनजेएस मॉड्यूल

CommonJS एक मॉड्यूल प्रणाली है जिसका उपयोग ES मॉड्यूल पेश किए जाने से पहले Node.js और अन्य वातावरणों में किया जाता था। कॉमनजेएस मॉड्यूल मॉड्यूल आयात करने के लिए आवश्यक फ़ंक्शन का उपयोग करते हैं और मूल्यों को निर्यात करने के लिए मॉड्यूल.एक्सपोर्ट या निर्यात करते हैं। CommonJS मॉड्यूल समकालिक रूप से लोड किए जाते हैं, जिससे प्रदर्शन संबंधी समस्याएं हो सकती हैं।

कॉमनजेएस मॉड्यूल मूल रूप से ब्राउज़रों में समर्थित नहीं हैं, लेकिन उन्हें बैबल या वेबपैक जैसे टूल का उपयोग करके ईएस मॉड्यूल में ट्रांसपाइल किया जा सकता है। CommonJS मॉड्यूल अभी भी Node.js परियोजनाओं में व्यापक रूप से उपयोग किए जाते हैं, लेकिन ES मॉड्यूल अपने बेहतर प्रदर्शन और स्थिर विश्लेषण क्षमता के कारण अधिक लोकप्रिय हो रहे हैं।

ये दो मॉड्यूल सिस्टम मौजूद होने का कारण जावास्क्रिप्ट का विकास और अधिक आधुनिक, मानकीकृत मॉड्यूल सिस्टम की आवश्यकता है। ईएस मॉड्यूल जावास्क्रिप्ट मॉड्यूल का भविष्य हैं, लेकिन कॉमनजेएस मॉड्यूल अभी भी मौजूदा परियोजनाओं और वातावरणों में व्यापक रूप से उपयोग किए जाते हैं।

डिबगिंग युक्तियाँ

यदि आपने उपरोक्त सभी समाधान आज़मा लिए हैं और अभी भी त्रुटि का सामना कर रहे हैं, तो यहां कुछ अतिरिक्त डिबगिंग युक्तियाँ दी गई हैं:

• Node.js संस्करण की जाँच करें: सुनिश्चित करें कि आप Node.js संस्करण 12.x या उससे ऊपर चला रहे हैं, क्योंकि ES मॉड्यूल समर्थन मूल रूप से Node.js 12 में पेश किया गया था। पुराने संस्करण पर, ES मॉड्यूल काम नहीं करेगा। Node.js वेबसाइट पर जाकर अपना संस्करण अपडेट करें।

• ब्राउज़र समर्थन जांचें: यदि आप ब्राउज़र वातावरण में काम कर रहे हैं, तो सुनिश्चित करें कि आपका ब्राउज़र ईएस मॉड्यूल का समर्थन करता है। अधिकांश आधुनिक ब्राउज़र ऐसा करते हैं, लेकिन पुराने संस्करण शायद ऐसा न करें।

• टाइपो की जांच करें: कभी-कभी, आपके कोड में एक साधारण टाइपो इस त्रुटि का कारण बन सकता है। किसी भी वर्तनी की गलती या गलत वाक्यविन्यास के लिए अपने कोड की दोबारा जांच करें।

• टाइपस्क्रिप्ट के लिए npx tsc का उपयोग करें: यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं और इस त्रुटि का सामना कर रहे हैं, तो अपने टाइपस्क्रिप्ट कोड को जावास्क्रिप्ट में संकलित करने के लिए npx tsc चलाएं, जो समस्याओं का पता लगाने में मदद कर सकता है।

निष्कर्ष

''मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं किया जा सकता'' त्रुटि ईएस मॉड्यूल के साथ काम करते समय जावास्क्रिप्ट/टाइपस्क्रिप्ट डेवलपर्स द्वारा सामना की जाने वाली एक आम समस्या है। यह समझकर कि यह त्रुटि क्यों होती है और इस ब्लॉग में दिए गए चरण-दर-चरण समाधानों का पालन करके, आप इसे जल्दी से हल कर सकते हैं और मॉड्यूलर, रखरखाव योग्य कोड बनाना जारी रख सकते हैं।