报错:Cannot find module ‘xxx.svg‘ or its corresponding type declarations.ts(2307)

1.react项目中直接引入图片报错

问题我想可能是不能直接引用图片进来,应该需要设置才行,从报错来看的话就是ts检查的问题

查询了一些资料得出结论,有ts项目的项目中,不能直接引用图片资源的,因此我们需要去主动声明这类资源(.d.ts文件),原因就是这样;

2.解决方法

https://www.cnblogs.com/chen-cong/p/10445635.html

https://segmentfault.com/a/1190000038874526

两个方法亲测有效

其实第二种我实在重启之后就会自动生成react-app-env.d.ts文件

懒得点击的同学请看这里:

根目录下添加文件react-app-env.d.ts

三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。 

/// <reference types="react-scripts" />
### 解决方案 对于 `Cannot find module 'virtual:svg-icons-register'` 的类型声明错误,在 Vue 3, Vite 和 TypeScript 构建的前端项目中,可以采取以下措施: #### 安装必要的依赖包 确保已安装 `vite-plugin-svg-icons` 插件。可以通过 npm 或 yarn 来完成此操作。 ```bash npm install vite-plugin-svg-icons --save-dev ``` 或者使用 Yarn: ```bash yarn add vite-plugin-svg-icons --dev ``` #### 配置插件 在项目的根目录下编辑或创建 `vite.config.ts` 文件,并引入并配置 `vite-plugin-svg-icons` 插件[^1]。 ```typescript // vite.config.ts import { defineConfig } from "vite"; import svgIconsPlugin from "vite-plugin-svg-icons"; export default defineConfig({ plugins: [ svgIconsPlugin({ iconDirs: [{ dir: "./src/assets/icons", name: "iconName" }], svgoOptions: true, }), ], }); ``` #### 添加全局导入语句 为了使 SVG 图标注册生效,在入口文件(通常是 `main.ts` 或者 `main.js`)里加入如下代码片段[^3]: ```javascript // main.ts or main.js import "virtual:svg-icons-register"; ``` #### 创建存放SVG图标的文件夹结构 按照约定俗成的方式,在 src 目录下的 assets 文件夹内建立 icons 子文件夹用于放置所有的 .svg 文件。 #### 处理TypeScript 类型定义问题 针对 TS2307 错误——即找不到模块及其对应的类型声明的情况,可以在项目中的某个位置(比如 `shims-vue.d.ts` 或其他合适的地方),增加自定义的类型扩展以告知编译器有关虚拟模块的存在[^2]。 ```typescript // shims-vue.d.ts declare module "virtual:svg-icons-register"; ``` 通过上述方法应该能够有效解决 `Cannot find module 'virtual:svg-icons-register'` 及其类型声明的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值