Kan ikke importere SVG-filer i TypeScript

I typescript(*.tsx)-filer kan jeg ikke importere SVG-fil med denne setningen:

import logo from './logo.svg';

Transpiler sier:[ts] finner ikke modul './logo.svg'. Min SVG-fil er bare <svg>...</svg>.

Men i .js-filen kan jeg importere det uten problemer med nøyaktig samme import-setning. Jeg antar det har noe å gjøre med typen svg-fil som må settes på en eller annen måte for ts-transpileren.

Kan du vennligst dele hvordan man får dette til å fungere i ts-filer?

Svar #1

Hvis du bruker webpack, kan du gjøre dette ved å lage en tilpasset typefil.

Opprett en fil med navnet custom.d.ts med følgende innhold:

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

Legg til custom.d.ts i tsconfig.json som vist nedenfor

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

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

Svar #2

Takk smarx for at du påpekte bruk av require(). Så i mitt tilfelle bør det være:

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

som fungerer fint i *.tsx-filer

Svar #3

  • Hvis du bruker create-react-app 2+: dokumentasjon

Legg til en custom.d.ts-fil (jeg opprettet den i rotmappen til src-katalogen min) med riktig type (takk til RedMatt):

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

Installer svg-react-loader eller en annen, deretter:

  • Bruk det som hoved SVG-laster
  • Eller hvis du migrerer en kodebase og ikke vil røre den fungerende delen (JS), spesifiser loaderen på importen:
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Bruk den da bare som en JSX-tagg:

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

Svar #4

Jeg har gjennomsøkt internett på jakt etter en løsning på dette problemet. Dette Stack Overflow-spørsmålet dukket opp som den øverste lederen, men ingen av svarene fungerte for meg.

Endelig klarte jeg å komme frem til en løsning ved å prøve noen forskjellige teknikker.

  1. Opprett en ./globals.d.ts-fil i roten av prosjektet ditt, på samme sted/nivå som ./tsconfig.json er.

  2. Inne i den ./globals.d.ts-filen, legg til dette:

declare module '*.svg' {
  const content: string;
  export default content;
}

Dette importerer .svg riktig som en streng, noe som er et problem jeg la merke til i det høyest rangerte svaret.

  1. Oppdater din tsconfig.json med følgende:
{
  "files": ["globals.d.ts"]
}

Det er det - det fikk det til å fungere i mitt tilfelle. Jeg vil bemerke - dette er i en VanillaJS-app.

Svar #5

Løsningen jeg fant: I et ReactJS-prosjekt, i filen react-app-env.d.ts fjerner du bare mellomrommet i kommentaren slik som:

Før

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

Etter

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

Jeg håper å hjelpe deg

Svar #6

Du kan deklarere modul for SVG-er på samme måte som create-react-app:

react-app.d.ts

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

se kilde

Svar #7

Hvis du bruker vite, løste det feilen for meg å legge til følgende compilerOptions i tsconfig.json:

  "compilerOptions": {
    "types": ["vite/client", "node"],

Svar #8

Kan ikke finne en modul eller dens tilsvarende typedeklarasjoner | Klarer ikke å importere SVG-filer i TypeScript

  1. Inne i den ./custom.d.ts-filen, legg til dette:
declare module '*.svg' {
  const content: string;
  export default content;
}

Svar #9

Løsning uten webpack og custom.d.ts

For meg fungerte ingen av de ovennevnte løsningene alene. Fordi jeg ikke bruker Webpack i mitt nåværende prosjekt.

Jeg undersøkte resultatene i loggen, og deretter fungerte følgende måte for meg, uten å opprette en fil (custom.d.ts), endre konfigurasjonen eller installere en ny avhengighet:

const logo: string = require("../assets/images/logo.svg").default;

<img src={logo} alt="logo" />

For svg-format må du legge til .default, men ikke for png-format.

Svar #10

Hvis du bruker Create-React-App startpakken, sørg for at react-app-env.d.ts inneholder linjen:

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

Relaterte artikler