Impossibile importare file SVG in dattiloscritto

109

Nei typescript(*.tsx)file non posso importare il file svg con questa dichiarazione:

import logo from './logo.svg';

Transpiler dice: Il [ts] cannot find module './logo.svg'. mio file svg è solo <svg>...</svg>.

Ma nel .jsfile sono in grado di importarlo senza problemi con la stessa identica dichiarazione di importazione. Suppongo che abbia qualcosa a che fare con il tipo di file svg che deve essere impostato in qualche modo per ts transpiler.

Potresti per favore condividere come farlo funzionare nei file ts?

typescript svg

— AngryBoy
fonte

2

i file svg non sono javascript e non possono essere utilizzati come i moduli javascript. Dovresti invece caricare quei file usando una richiesta http.

— toskv

1

Stai usando Webpack? Questa è l'unica cosa che ho visto capire una simile importaffermazione. Forse Webpack è ciò che consente questo nel tuo JavaScript, ma non sta facendo la stessa magia nei file TypeScript. (Non penso che TypeScript stesso sappia cosa fare qui.)

— user94559

1

Se stai usando Webpack, probabilmente dovrai condividere la tua configurazione di Webpack per ottenere ulteriore aiuto.

— user94559

2

Leggendo un po 'di più su questo, probabilmente puoi fare const logo = require("./logo.svg");o semplicemente ignorare l'errore. (Credo che TS dovrebbe ancora emettere il codice giusto.)

— user94559

Grazie mille! richiedono funziona bene! Nel mio caso deve essere const logo = require("./logo.svg") as string;

— AngryBoy

184

Se usi webpack, puoi farlo creando un file di tipi personalizzati.

Crea un file denominato custom.d.ts con il seguente contenuto:

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

Aggiungere il custom.d.tsper tsconfig.jsoncome di seguito

"include": ["src/components", "src/custom.d.ts"]

Fonte: https://webpack.js.org/guides/typescript/#importing-other-assets

— Graham
fonte

36

Probabilmente, dovresti aggiungerlo alla includesezione in tsconfig.json .

— Frederik Krautwald

12

Grazie! Sapevo che doveva essere incluso da qualche parte ma non riesco a immaginare dove. Anche io pensavo fosse in tsconfig.json ma non sapevo come farlo. Grazie per il tuo commento. Ho fatto una ricerca e ho trovato:"files": [ "custom.d.ts" ]

— Shil Nevado

5

È possibile ottenere il controllo del tipo per il componente JSX digitando il contenuto:const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;

— RedMatt

È possibile che il custom.d.tsfile funzioni a livello globale in modo che SVG possa trovarsi in una directory diversa dal custom.d.tsfile? Viene visualizzato un messaggio di errore "Impossibile trovare il modulo" a meno che non si trovi nella stessa directory.

— Nic Scozzaro

1

Questo non importa il contenuto del file in Angular, importa il nome del file come una stringa. Ho bisogno del contenuto. Come otteniamo il contenuto del file?

— Routhinator

37

Grazie smarx per aver segnalato l'uso require(). Quindi nel mio caso dovrebbe essere:

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

che funziona bene nei file * .tsx

— AngryBoy
fonte

5

logopotrebbe essere chiamato meglio logoPath, perché è quello che diventa.

— DharmaTurtle

2

@DharmaTurtle Penso che si possa discutere. Inoltre, è chiamato logonella domanda, quindi è una risposta migliore a questa domanda specifica così com'è.

— ArneHugo

17

Aggiungi un custom.d.tsfile (l'ho creato nel percorso principale della mia directory src) con il tipo corretto (grazie a RedMatt ):

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Installa svg-react-loader o qualche altro , quindi:

Usalo come caricatore svg principale
Oppure, se stai migrando una base di codice e non vuoi toccare la parte di lavoro (JS) specifica il caricatore sull'importazione:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Quindi usalo come tag JSX:

function f() { 
  return (<MySVG />); 
}

— Allenaz
fonte

4

La soluzione che ho trovato: nel progetto ReactJS, nel file react-app-env.d.ts devi solo rimuovere lo spazio nel commento come:

Prima

// / <reference types="react-scripts" />

Dopo

/// <reference types="react-scripts" />

Spero di aiutarti

— jilvanx
fonte

Per le persone che utilizzano app create-react e eslint configurato, questo potrebbe risolvere il problema

— Daniel Chin

2

Ho avuto lo stesso problema mentre provavo un tutorial REACT + dattiloscritto.
Ciò che ha funzionato per me è stata la seguente dichiarazione di importazione.

import * as logo from 'logo.svg'

Ecco le mie dipendenze in package.json.

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

Spero che aiuti qualcuno.

— Kiran Mohan
fonte

0

C'è un modo alternativo per farlo che abbiamo implementato: crea i tuoi componenti SVG. L'ho fatto perché mi ha infastidito il fatto che stavo usando le requireistruzioni commonJS insieme alle mie import.

— endimione 1818
fonte

0

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

se stai usando puglin slint potrebbeessere che sia disabilitato pensando che fosse un commento ma non per leggere lo svg hai bisogno di questo modulo di script di tipo disabilita semplicemente la linea e sii felice

— Breno Melo
fonte

0

Per utilizzare n asset su codice con TypeScript , è necessario differire il tipo per queste importazioni . Ciò richiede un file custom.d.ts che indica definizioni personalizzate per TypeScript nel nostro progetto.

Impostiamo una dichiarazione per i file .svg:

custom.d.ts

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

Qui dichiariamo un nuovo modulo per SVG specificando qualsiasi importazione che termini con .svg e definendo il contenuto del modulo come any.

— Mehadi Hassan
fonte