Tidak dapat mengimpor file svg di typescript

Di file typescript(*.tsx) saya tidak bisa mengimpor file svg dengan pernyataan ini:

import logo from './logo.svg';

Transpiler mengatakan:[ts] tidak dapat menemukan modul './logo.svg'. File svg saya hanyalah <svg>...</svg>.

Tapi di file .js saya bisa mengimpornya tanpa masalah dengan pernyataan impor yang persis sama. Saya kira ini ada hubungannya dengan tipe file svg yang harus diatur entah bagaimana untuk transpiler ts.

Bisakah Anda membagikan bagaimana cara membuat ini bekerja di file ts?

Jawaban #1

Jika Anda menggunakan webpack, Anda dapat melakukan ini dengan membuat file tipe kustom.

Buat file bernama custom.d.ts dengan isi berikut:

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

Tambahkan custom.d.ts ke tsconfig.json seperti di bawah ini

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

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

Jawaban #2

Terima kasih smarx telah menunjukkan penggunaan require(). Jadi dalam kasus saya seharusnya:

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

yang bekerja dengan baik di file *.tsx

Jawaban #3

  • Jika Anda menggunakan create-react-app 2+: dokumen

Tambahkan file custom.d.ts (saya membuatnya di path root direktori src saya) dengan tipe yang benar (terima kasih kepada RedMatt):

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

Instal svg-react-loader atau yang lainnya, kemudian:

  • Gunakan itu sebagai pemuat svg utama
  • Atau jika Anda sedang memigrasi basis kode dan tidak ingin menyentuh bagian yang berfungsi (JS), tentukan loader pada impor:
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Lalu gunakan saja sebagai tag JSX:

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

Jawaban #4

Saya menjelajahi internet mencari solusi untuk masalah ini. Pertanyaan di Stackoverflow ini muncul sebagai petunjuk utama, tetapi tidak satupun jawaban yang berhasil untuk saya.

Akhirnya, saya bisa menemukan solusi dengan mencoba beberapa teknik yang berbeda.

  1. Buat file ./globals.d.ts di root proyek Anda, di tempat/tingkat yang sama dengan ./tsconfig.json Anda.

  2. Di dalam file ./globals.d.ts itu, tambahkan ini:

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

Ini dengan benar mengimpor .svg sebagai string, yang merupakan masalah yang saya perhatikan di jawaban dengan peringkat tertinggi.

  1. Perbarui tsconfig.json Anda dengan yang berikut:
{
  "files": ["globals.d.ts"]
}

Itu dia - itu berhasil dalam kasus saya. Saya akan mencatat - ini dilakukan di aplikasi VanillaJS.

Jawaban #5

Solusi yang saya temukan: Dalam proyek ReactJS, di file react-app-env.d.ts Anda hanya perlu menghapus spasi di komentar seperti:

Sebelum

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

Setelah

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

Saya berharap dapat membantu Anda

Jawaban #6

Anda bisa mendeklarasikan modul untuk SVG dengan cara yang sama seperti 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;
}

lihat sumber

Jawaban #7

Jika Anda menggunakan vite, menambahkan compilerOptions berikut ke tsconfig.json memperbaiki kesalahan untuk saya:

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

Jawaban #8

Tidak dapat menemukan modul atau deklarasi tipe yang sesuai | Tidak dapat mengimpor file svg di TypeScript

  1. Di dalam file ./custom.d.ts itu, tambahkan ini:
declare module '*.svg' {
  const content: string;
  export default content;
}

Jawaban #9

Solusi tanpa webpack dan custom.d.ts

Bagi saya, tidak ada satu pun dari solusi di atas yang berhasil sendiri. Karena saya tidak menggunakan Webpack dalam proyek saya saat ini.

Saya menyelidiki output dalam log, kemudian cara berikut berhasil bagi saya, tanpa membuat file (custom.d.ts), mengubah konfigurasi, atau menginstal dependensi baru:

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

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

Untuk format svg Anda perlu menambahkan .default, tetapi tidak untuk format png.

Jawaban #10

Jika Anda menggunakan starter Create-React-App, pastikan bahwa react-app-env.d.ts berisi baris berikut:

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

Artikel terkait