TypeScript में SVG Import समस्या का स्थायी समाधान

परिचय: "Cannot find module" — क्या यह दर्द आपको भी है?

आप TypeScript में कोड लिख रहे हैं, एक सुंदर SVG आइकन प्रोजेक्ट में जोड़ते हैं और इसे सामान्य तरीके से import करने का प्रयास करते हैं:

import Logo from './assets/logo.svg';

और फिर TypeScript आपको एक लाल एरर दिखाता है:

Cannot find module './assets/logo.svg' or its corresponding type declarations.

परिचित लग रहा है? अगर आपने कभी इस समस्या का सामना किया है — तो आप अकेले नहीं हैं। Stack Overflow पर "Unable to import svg files in typescript" सवाल को हज़ारों बार देखा गया है और दर्जनों जवाब मिले हैं। समस्या यह है कि TypeScript डिफ़ॉल्ट रूप से नॉन-कोड फ़ाइलों (SVG, PNG, CSS) को हैंडल करना नहीं जानता।

इस लेख में हम पूरे कोड के साथ पूरी व्याख्या करेंगे: एरर क्यों आती है और इसे हमेशा के लिए कैसे ठीक करें। आप declaration files, Webpack और Vite की सेटअप, और React प्रोजेक्ट्स में SVG को सही तरीके से टाइप करने के बारे में जानेंगे।

TypeScript SVG को क्यों नहीं देखता?

TypeScript एक सख्ती से टाइप की गई भाषा है। यह कंपाइलेशन के समय टाइप्स की जाँच करता है। जब आप import Logo from './logo.svg' लिखते हैं, TypeScript उम्मीद करता है कि मॉड्यूल ./logo.svg किसी ज्ञात टाइप के साथ कुछ एक्सपोर्ट करेगा। लेकिन SVG एक TypeScript फ़ाइल नहीं है, यह XML है। TypeScript के पास SVG मॉड्यूल के लिए कोई बिल्ट-इन विवरण नहीं है।

यही वजह है कि एरर आती है: कंपाइलर इस फ़ाइल के लिए type declarations (टाइप घोषणाएँ) नहीं ढूँढ पाता।

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

\n
• तरीका 1: एक ग्लोबल declaration फ़ाइल बनाएँ (.d.ts)
\n
• तरीका 2: सही लोडर्स के साथ Webpack/Vite का उपयोग करें
\n
• तरीका 3: SVG को url या raw के माध्यम से import करें (विशेष मामलों के लिए)
\n

हम प्रत्येक तरीके को कोड उदाहरणों के साथ समझाएँगे।

तरीका 1: ग्लोबल declaration file (सबसे लोकप्रिय)

यह Stack Overflow का समाधान है जो 90% मामलों में काम करता है। आप .d.ts एक्सटेंशन वाली एक फ़ाइल बनाते हैं (जैसे, src/declarations.d.ts या src/svg.d.ts) और SVG के लिए मॉड्यूल घोषित करते हैं।

यहाँ न्यूनतम कोड है:

// src/declarations.d.ts\ndeclare module '*.svg' {\n  const content: string;\n  export default content;\n}

यहाँ क्या हो रहा है? हम TypeScript को बता रहे हैं: ".svg एक्सटेंशन वाली कोई भी फ़ाइल एक मॉड्यूल है जो डिफ़ॉल्ट रूप से एक स्ट्रिंग (फ़ाइल पथ या सामग्री) एक्सपोर्ट करती है।"

अगर आप React का उपयोग कर रहे हैं और SVG को React कम्पोनेंट के रूप में import करना चाहते हैं (@svgr/webpack या vite-plugin-svgr के माध्यम से), तो घोषणा अलग होगी:

// src/declarations.d.ts\ndeclare module '*.svg' {\n  import React from 'react';\n  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>;\n  export default SVGComponent;\n}

महत्वपूर्ण: सुनिश्चित करें कि .d.ts फ़ाइल आपके tsconfig.json में शामिल है। आमतौर पर यह src/ के अंदर होने पर काफी है, लेकिन अगर नहीं, तो include फ़ील्ड में पथ जोड़ें:

// tsconfig.json\n{\n  "compilerOptions": {\n    // ... बाकी सेटिंग्स\n  },\n  "include": ["src/**/*"]\n}

इसके बाद "Cannot find module" एरर गायब हो जाएगी, और आप SVG को सामान्य रूप से import कर पाएँगे।

तरीका 2: Webpack या Vite की सेटअप

ग्लोबल घोषणा केवल आधा काम है। रनटाइम (ब्राउज़र में) import को वास्तव में काम करने के लिए, बंडलर को कॉन्फ़िगर करना होगा।

Webpack के लिए

file-loader या url-loader इंस्टॉल करें:

npm install --save-dev file-loader

webpack.config.js में एक नियम जोड़ें:

// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\.svg$/,\n        use: ['file-loader']\n      }\n    ]\n  }\n};

अब Webpack SVG फ़ाइलों को प्रोसेस करेगा और उन्हें एक URL में बदल देगा।

Vite के लिए

Vite में SVG import डिफ़ॉल्ट रूप से काम करता है, लेकिन TypeScript के लिए आपको अभी भी declaration फ़ाइल की आवश्यकता होगी। Vite के साथ SVG को React कम्पोनेंट के रूप में import करने के लिए, vite-plugin-svgr इंस्टॉल करें:

npm install --save-dev vite-plugin-svgr

फिर vite.config.ts में जोड़ें:

// vite.config.ts\nimport { defineConfig } from 'vite';\nimport svgr from 'vite-plugin-svgr';\n\nexport default defineConfig({\n  plugins: [svgr()],\n});

अब आप SVG को इस तरह import कर सकते हैं:

import Logo from './assets/logo.svg?react';

यह SVG को एक React कम्पोनेंट के रूप में import करेगा।

तरीका 3: url या raw के माध्यम से import

कभी-कभी आप SVG को सीधे URL के रूप में या रॉ स्ट्रिंग के रूप में import करना चाह सकते हैं। Webpack और Vite दोनों इसका समर्थन करते हैं:

// URL के रूप में\nimport logoSvg from './assets/logo.svg?url';\n\n// रॉ स्ट्रिंग के रूप में\nimport logoSvg from './assets/logo.svg?raw';

इनके लिए भी declaration फ़ाइल की आवश्यकता होगी:

declare module '*.svg?url' {\n  const content: string;\n  export default content;\n}\n\ndeclare module '*.svg?raw' {\n  const content: string;\n  export default content;\n}

निष्कर्ष

TypeScript में SVG import की समस्या को हल करना मुश्किल नहीं है। बस एक declaration फ़ाइल बनाएँ और अपने बंडलर को सही ढंग से कॉन्फ़िगर करें। अब आप बिना किसी एरर के अपने प्रोजेक्ट में SVG का उपयोग कर सकते हैं।

अगर आपको कोई समस्या आती है, तो नीचे कमेंट करें या हमारे अन्य ट्यूटोरियल देखें। हैप्पी कोडिंग!