使用 esbuild 加载 SVG 文件答案

【问题标题】：Loading SVG file using esbuild使用 esbuild 加载 SVG 文件
【发布时间】：2021-11-29 15:40:35
【问题描述】：

我正在使用 electron 和 typescript react，并使用 esbuild bundler。

项目文件树：

projectname/
┣ assets/
┃ ┣ index.d.ts
┃ ┗ logo.svg
┣ src/
┃ ┣ components/
┃ ┃ ┗ Intro.tsx
┃ ┣ App.tsx
┃ ┣ electron.ts
┃ ┣ fonts.css
┃ ┣ index.css
┃ ┣ index.html
┃ ┗ index.tsx
┣ .gitignore
┣ build.js
┣ LICENSE
┣ package.json
┣ README.md
┗ yarn.lock

我尝试使用esbuild-plugin-svg，但是出现了这个错误。

找不到模块“esbuild-plugin-svg”的声明文件。 'd:/genius0412/github/checkaccess/node_modules/esbuild-plugin-svg/src/index.js' 隐含地具有“任何”类型。尝试npm i --save-dev @types/esbuild-plugin-svg（如果存在）或添加新声明 (.d.ts) 文件包含declare module 'esbuild-plugin-svg';ts(7016)

另外，我尝试使用 esbuild-plugin-svgj，但它也不起作用。

错误：无法解析“react”（插件“svgj”没有设置解析目录）

我应该如何解决这个问题？

【问题讨论】：

标签： typescript svg electron react-typescript esbuild

【解决方案1】：

这是一个打字稿问题 - 它不知道导入的是什么类型：

import logo from '../assets/logo.svg';

我看到您尝试使用index.d.ts 添加类型。由于您的索引文件是.tsx，我会尝试在index.tsx 中手动导入index.t.ts - 在某些时候，我的印象是TS 会自动为.js 文件导入d.ts，但不是@987654328 @

【讨论】：