javascript - Kan ikke finne SVG-ressurser med Parcel i React og TS

Jeg har lagt til Parcel i et create-react-app-prosjekt som bruker Typescript-malen. Jeg prøver å legge til SVG-er i den genererte JS-filen min i henhold til anbefalingene fra dokumentasjonen deres. Jeg er ikke sikker på om det er noe som må gjøres annerledes i TS, men jeg satte opp prosjektet mitt som de foreslo i deres JSX-eksempler, og det fungerte ikke:

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

Merk: Jeg har lagt til transformer-tillegget i mine utviklingsavhengigheter.

Komponent.tsx

import BriefcaseSvg from "jsx:../../assets/briefcase.svg";

// ...later in my return statement:
<img src={BriefcaseSvg} alt="work icon" />

// I've also tried
<BriefcaseSvg/>

Hver gang jeg får følgende feil:

Cannot resolve dependency 'jsx:../../assets/briefcase.svg'

Jeg har også prøvd å konvertere begge jsx-deklarasjonene til tsx.

Jeg har lagt til Parcel på toppen av det standard Webpack-byggeverktøyet du får med CRA. Webpack har ingen problemer og viser ikonet helt fint. Parcel klarte også å kjøre en bygging når jeg ikke inkluderte denne SVG-pluginen, men skrev ut SVG-en separat i sin egen fil.

Jeg vil at alt skal ende opp i én js-fil. Hvordan kan jeg oppnå dette med Parcel, React og TS?

Svar #1

Standard Parcel-konfigurasjonen definerer en SVG-transformator og optimizer, som ikke håndterer importene riktig. Du kan følge problemet på GitHub på https://github.com/parcel-bundler/parcel/issues/7587.

Som en midlertidig løsning (for enhver type import), trenger du ikke å importere en transformer.

Erstatt "jsx:" med "url:" i importen din slik:

import BriefcaseSvg from "url:../../assets/briefcase.svg";

Og bruk src-attributtet, ikke en komponent.

<img src={BriefcaseSvg} alt="work icon" />

Du kan lese mer om syntaksen på https://github.com/parcel-bundler/parcel/pull/4055. Det fungerer bare i JS og var ment å støtte import av filer som ikke er eksplisitt støttet.

Relaterte artikler