Tidak dapat mengimpor file svg dalam skrip ketikan

115

Dalam typescript(*.tsx)file saya tidak dapat mengimpor file svg dengan pernyataan ini:

import logo from './logo.svg';

Transpiler mengatakan: [ts] cannot find module './logo.svg'. File svg saya hanya <svg>...</svg>.

Tetapi dalam .jsfile saya dapat mengimpornya tanpa masalah dengan pernyataan impor yang persis sama. Saya kira ini ada hubungannya dengan jenis file svg yang harus diatur entah bagaimana untuk transpiler ts.

Bisakah Anda berbagi cara membuat ini berfungsi di file ts?

typescript svg AngryBoy
sumber
2
File svg bukan javascript dan tidak dapat digunakan sebagai modul javascript. Anda harus memuat file tersebut menggunakan permintaan http sebagai gantinya.
toskv
2
Apakah Anda menggunakan Webpack? Itulah satu-satunya hal yang saya lihat memahami importpernyataan seperti itu . Mungkin Webpack adalah yang mengizinkan ini di JavaScript Anda, tetapi itu tidak melakukan keajaiban yang sama dalam file TypeScript. (Saya tidak berpikir bahwa TypeScript sendiri tahu apa yang harus dilakukan di sini.)
user94559
1
Jika Anda menggunakan Webpack, Anda mungkin perlu membagikan konfigurasi Webpack Anda untuk mendapatkan bantuan lebih lanjut.
user94559
2
Membaca lebih banyak tentang ini, Anda mungkin dapat melakukan const logo = require("./logo.svg");atau mengabaikan kesalahan tersebut. (Saya yakin TS masih harus mengeluarkan kode yang benar.)
user94559
Terima kasih banyak! membutuhkan pekerjaan yang baik! Dalam kasus saya, itu harus const logo = require("./logo.svg") as string;
AngryBoy

Jawaban:

191

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

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

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

Tambahkan custom.d.tske tsconfig.jsonseperti di bawah ini

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

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

Graham
sumber
36
Kemungkinan besar, Anda perlu menambahkannya ke includebagian di tsconfig.json .
Frederik Krautwald
12
Terima kasih! Saya tahu itu harus dimasukkan di suatu tempat tetapi saya tidak bisa membayangkan di mana. Meskipun saya pikir itu di tsconfig.json tetapi saya tidak tahu bagaimana melakukannya. Terima kasih atas komentar Anda. Saya melakukan pencarian dan saya menemukan:"files": [ "custom.d.ts" ]
Shil Nevado
5
Anda bisa mendapatkan pemeriksaan tipe untuk komponen JSX dengan mengetikkan konten:const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
RedMatt
Apakah mungkin agar custom.d.tsfile berfungsi secara global sehingga SVG dapat berada di direktori yang berbeda dari custom.d.tsfile? Saya mendapatkan pesan kesalahan "tidak dapat menemukan modul" kecuali itu dalam direktori yang sama.
Nic Scozzaro
1
Ini tidak mengimpor konten file di Angular, ini mengimpor nama file sebagai string. Saya butuh konten. Bagaimana kami mendapatkan konten file?
Routhinator
37

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

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

yang berfungsi dengan baik di file * .tsx

AngryBoy
sumber
5
logomungkin lebih baik dinamai logoPath, karena memang seperti itu.
DharmaTurtle
2
@DharmaTurtle Saya pikir itu bisa diperdebatkan. Juga, ini disebut logodalam pertanyaan, jadi ini adalah jawaban yang lebih baik untuk pertanyaan spesifik ini sebagaimana adanya.
ArneHugo
@DharmaTurtle jujur ​​kawan, nama variabel jauh mengesampingkan intinya, mengapa terganggu oleh hal yang sepele seperti itu?
ELI7VH
17

Tambahkan custom.d.tsfile (saya membuatnya di jalur root dir src saya) dengan jenis yang benar (terima kasih kepada RedMatt ):

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

Instal svg-react-loader atau lainnya , lalu:

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

Kemudian gunakan saja sebagai tag JSX: 

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

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

Sebelum

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

Setelah

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

Saya berharap dapat membantu Anda

jilvanx.dll
sumber
Untuk orang-orang yang menggunakan create-react-app dan mengonfigurasi eslint, ini mungkin menyelesaikan masalah
Daniel Chin
2

Saya mengalami masalah yang sama saat mencoba tutorial ketikan REACT +.
Yang berhasil bagi saya adalah pernyataan impor berikut. 

import * as logo from 'logo.svg'

Berikut adalah dependensi saya di package.json.

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

Semoga bisa membantu seseorang.

Kiran Mohan
sumber
0

Ada cara alternatif untuk melakukan ini yang telah kami terapkan: buat komponen SVG Anda. Saya melakukan ini karena mengganggu saya bahwa saya menggunakan requirepernyataan commonJS di samping pernyataan saya import.

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

jika Anda menggunakan puglin slint, mungkin dia telah menonaktifkan berpikir itu adalah komentar tetapi tidak untuk membaca svg Anda memerlukan modul skrip tipe ini cukup nonaktifkan baris dan berbahagialah

Breno Melo
sumber
0

Untuk menggunakan n aset dalam kode dengan TypeScript , kita perlu menunda jenis untuk impor ini . Ini membutuhkan file custom.d.ts yang menandakan definisi kustom untuk TypeScript dalam proyek kami.

Mari kita siapkan deklarasi untuk file .svg:

custom.d.ts

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

Di sini kami mendeklarasikan modul baru untuk SVG dengan menentukan impor apa pun yang diakhiri dengan .svg dan mendefinisikan konten modul sebagai apa saja.

Mehadi Hassan
sumber