dumi封装组件中引用svg图片报错Cannot find module的解决办法

使用 dumi 开发组件包，在组件中引用 svg 图片时 TS 报错，执行 pnpm build 命令无法正常打包，报错如下：

# pnpm build
error - src/index.tsx:19:22 - TS2307: Cannot find module '../assets/img1.svg' or its corresponding type declarations.
error - src/index.tsx:20:18 - TS2307: Cannot find module '../assets/img2.svg' or its corresponding type declarations.
...

原因分析：

• TypeScript 类型缺失：未声明 .svg 文件的模块类型，导致 TS 无法识别导入路径。

• 路径引用错误：相对路径 ../assets/... 计算不准确，实际文件位置与代码中路径不匹配。

• 构建配置未处理资源：若 father-build 未正确配置静态资源处理，可能导致文件未被复制到输出目录。

解决方案：

1. 添加 SVG 类型声明文件

在项目根目录或 src 目录下创建 typings.d.ts 文件（如已存在则直接修改），添加以下内容：

// typings.d.ts
declare module '*.svg' {
  const content: string;
  export default content;
}

检查 TypeScript 配置，在项目根目录下的 tsconfig.json 文件中增加 "typings.d.ts" 引用：

{
  "compilerOptions": {
    "typeRoots": ["./typings.d.ts", "./node_modules/@types"]
  },
//- "include": [".dumirc.ts", "src/**/*"]
    "include": [".dumirc.ts", "src/**/*", "typings.d.ts"]
}

2. 检查并修正 SVG 文件路径

验证代码中引用路径与文件实际位置是否一致。

假设项目结构如下：

src/
  index.tsx
  assets/
    img1.svg
    img2.svg

则正确引用路径应为：

// index.tsx
import img1 from '../assets/img1.svg';
import img2 from '../assets/img2.svg';

3. 验证 SVG 文件位置

确保 img1.svg 和 img2.svg 实际存在于 src/assets 目录下。

若路径错误，调整代码引用路径或移动文件位置。

4. 清理缓存并重新构建

# 删除构建缓存
rm -rf dist node_modules/.cache

# 重新安装依赖并构建
yarn install
yarn build

验证以上方法是否有效。

未经允许不得转载：前端资源网 - w3h5 » dumi封装组件中引用svg图片报错Cannot find module的解决办法