it-swarm.com.de

Svg-Dateien können nicht in Typoskript importiert werden

In TypeScript(*.tsx)-Dateien kann ich keine svg-Datei mit dieser Anweisung importieren:

import logo from './logo.svg';

Transpiler sagt: [ts] cannot find module './logo.svg'.Meine svg-Datei ist nur <svg>...</svg>.

In .js-Datei kann ich sie jedoch problemlos mit derselben Import-Anweisung importieren. Ich nehme an, es hat etwas mit dem Typ der svg-Datei zu tun, die irgendwie für den Transpiler ts eingestellt werden muss. 

Könnten Sie uns bitte mitteilen, wie dies in ts-Dateien funktioniert?

34
AngryBoy

Wenn Sie Webpack verwenden, können Sie dies durch Erstellen einer benutzerdefinierten Datendatei tun. 

Erstellen Sie eine Datei mit dem Namen custom.d.ts mit folgendem Inhalt:

declare module "*.svg" {
  const content: any;
  export default content;
}

Quelle: https://webpack.js.org/guides/TypeScript/#importing-other-assets

56
Graham

Danke smarx für den Hinweis auf die Verwendung von require(). In meinem Fall sollte es also sein:

const logo = require("./logo.svg") as string;

das funktioniert gut in * .tsx-Dateien

18
AngryBoy

Ich hatte das gleiche Problem beim Ausprobieren eines Reaction + TypeScript-Tutorials.
Was für mich funktionierte, war die folgende wichtige Aussage.

import * as logo from 'logo.svg'

Hier sind meine Abhängigkeiten in package.json.

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

Hoffe es hilft jemandem.

1
Kiran Mohan

Es gibt einen alternativen Weg, den wir implementiert haben: Erstellen Sie Ihre SVGs-Komponenten. Ich habe dies getan, weil es mich störte, dass ich neben den Variablen require allgemeine import-Anweisungen verwendete.

0
endymion1818