TypeScript sieht SVG nicht? Das Problem ein für alle Mal lösen

Einleitung: "Cannot find module" — ein bekanntes Problem?

Sie programmieren in TypeScript, fügen Ihrem Projekt ein schönes SVG-Symbol hinzu und versuchen, es auf die Standardweise zu importieren:

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

Und dann zeigt TypeScript Ihnen einen roten Fehler an:

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

Kommt Ihnen das bekannt vor? Wenn Sie jemals auf dieses Problem gestoßen sind, sind Sie nicht allein. Die Frage "Unable to import svg files in typescript" auf Stack Overflow hat tausende Aufrufe und Dutzende Antworten gesammelt. Das Problem ist, dass TypeScript standardmäßig nicht weiß, wie es mit Nicht-Code-Dateien (SVG, PNG, CSS) umgehen soll.

In diesem Artikel behandeln wir eine vollständige Erklärung mit Code: warum der Fehler auftritt und wie Sie ihn ein für alle Mal beheben. Sie erfahren etwas über declaration files, die Einrichtung von Webpack und Vite sowie darüber, wie man SVG in React-Projekten richtig typisiert.

Warum sieht TypeScript SVG nicht?

TypeScript ist eine streng typisierte Sprache. Es überprüft Typen während der Kompilierung. Wenn Sie import Logo from './logo.svg' schreiben, erwartet TypeScript, dass das Modul ./logo.svg etwas mit einem bekannten Typ exportiert. Aber SVG ist keine TypeScript-Datei, es ist XML. TypeScript hat keine eingebaute Beschreibung für SVG-Module.

Daher der Fehler: Der Compiler kann keine type declarations (Typdeklarationen) für diese Datei finden.

Es gibt drei Hauptwege, das Problem zu lösen:

\n
• Methode 1: Eine globale Deklarationsdatei (.d.ts) erstellen
\n
• Methode 2: Webpack/Vite mit den richtigen Loadern verwenden
\n
• Methode 3: SVG über url oder raw importieren (für spezifische Fälle)
\n

Wir werden jede Methode mit Codebeispielen durchgehen.

Methode 1: Globale declaration file (am beliebtesten)

Dies ist die Lösung aus Stack Overflow, die in 90% der Fälle funktioniert. Sie erstellen eine Datei mit der Erweiterung .d.ts (z.B. src/declarations.d.ts oder src/svg.d.ts) und deklarieren das Modul für SVG.

Hier ist der minimale Code:

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

Was passiert hier? Wir sagen TypeScript: "Jede Datei mit der Erweiterung .svg ist ein Modul, das standardmäßig einen String (Dateipfad oder Inhalt) exportiert."

Wenn Sie React verwenden und SVG als React-Komponente importieren möchten (über @svgr/webpack oder vite-plugin-svgr), sieht die Deklaration anders aus:

// 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}

Wichtig: Stellen Sie sicher, dass die .d.ts-Datei in Ihrer tsconfig.json enthalten ist. Normalerweise reicht es, wenn sie innerhalb von src/ liegt, aber falls nicht, fügen Sie den Pfad im Feld include hinzu:

// tsconfig.json\n{\n  "compilerOptions": {\n    // ... restliche Einstellungen\n  },\n  "include": ["src/**/*"]\n}

Danach verschwindet der Fehler "Cannot find module" und Sie können SVG wie gewohnt importieren.

Methode 2: Einrichtung von Webpack oder Vite

Die globale Deklaration ist nur die halbe Miete. Damit der Import zur Laufzeit (im Browser) tatsächlich funktioniert, müssen Sie den Bundler konfigurieren.

Für Webpack

Installieren Sie file-loader oder url-loader:

npm install --save-dev file-loader

Fügen Sie eine Regel in webpack.config.js hinzu:

// webpack.config.