React组件库在微前端(MFE)中被消费时出现TS2307: SVG模块找不到的构建错误
我之前也遇到过几乎一模一样的问题，这种本地开发正常但跨项目消费时报错的情况，大概率和组件库的类型文件发布不完整、静态资源打包缺失或者导入路径映射失效有关，咱们一步步来排查解决：
先搞清楚为什么会出现这个问题
1. TypeScript类型声明缺失
本地开发时，你的组件库可能已经通过自定义*.d.ts文件让TS识别了SVG模块，但发布npm包时没把这些类型文件包含进去；或者消费端的TS配置没有正确读取到组件库的类型声明，导致TS无法识别.svg后缀的模块。
2. 打包产物中缺失SVG文件
如果你的组件库用tsc、Rollup这类工具打包，默认不会处理SVG这类静态资源，导致打包后的dist目录里没有SVG文件。消费端安装包后，通过相对路径自然找不到对应的SVG模块。
3. 相对路径映射失效
组件库本地的相对导入路径（比如./svgs/DashedWarningSvgIcon.svg）是基于源文件目录的，但如果打包后目录结构发生变化，这个相对路径在消费端就会失效。
具体解决方案
1. 补全并发布SVG的TypeScript类型声明
首先确保组件库有正确的SVG类型声明，并且这个文件会被包含在发布的npm包中：
- 在组件库的
src目录下创建svg.d.ts（或者放到专门的types目录），内容如下：
declare module '*.svg' { import React from 'react'; export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>; const src: string; export default src; }
- 打开组件库的
tsconfig.json，确保这个类型文件被包含在编译范围内：
{ "include": [ "src/**/*", "src/**/*.d.ts" // 匹配你的svg.d.ts路径 ] }
- 检查
package.json的types字段，确保正确指向类型入口（如果是打包到dist/types目录）：
{ "types": "dist/types/index.d.ts" }
2. 确保打包时将SVG文件同步到产物目录
根据你使用的打包工具，选择对应的处理方式：
如果你用Rollup打包
安装@rollup/plugin-copy插件来复制SVG文件：
- 安装依赖：
npm install @rollup/plugin-copy --save-dev
- 在
rollup.config.js中添加配置：
import copy from '@rollup/plugin-copy'; export default { // 其他打包配置... plugins: [ // 其他插件... copy({ targets: [ { src: 'src/foundations/icons/svgIcons/svgs/*.svg', dest: 'dist/foundations/icons/svgIcons/svgs' } ] }) ] };
如果你用tsc直接编译
tsc默认不处理静态资源，需要手动复制SVG到输出目录：
- 安装
copyfiles工具：
npm install copyfiles --save-dev
- 在
package.json的scripts中修改打包命令：
{ "scripts": { "build": "tsc && copyfiles -u 1 src/**/*.svg dist/" } }
-u 1参数是为了去掉源路径的一级目录，保证输出的目录结构和源码一致。
3. 检查npm包的发布范围
打开组件库的package.json，确认files字段包含了打包产物、SVG文件和类型文件：
{ "files": [ "dist", "src/**/*.d.ts", // 如果保留源码引用的话 "src/foundations/icons/svgIcons/svgs/*.svg" ] }
避免发布时遗漏关键文件。
4. （更彻底的方案）打包时直接将SVG转为React组件
如果不想处理静态资源的复制问题，可以在组件库打包阶段就把SVG编译成React组件代码，这样消费端导入的就是纯TS/JS代码，完全避开静态资源路径问题：
- 安装
@svgr/rollup插件：
npm install @svgr/rollup --save-dev
- 在Rollup配置中添加：
import svgr from '@svgr/rollup'; export default { // 其他配置... plugins: [ // 其他插件... svgr({ svgo: false, // 可选：是否压缩SVG exportType: 'named', // 导出ReactComponent命名导出 }) ] };
这样打包后，你的SVG导入会被直接编译成React组件的TS代码，消费端就不会再出现找不到SVG模块的错误。
最后验证
按照上面的步骤调整后，重新打包并发布组件库，在MFE项目中安装最新版本，应该就能解决这个TS2307错误了。如果还是有问题，可以检查消费端的tsconfig.json，确保compilerOptions.moduleResolution设置为node或bundler，allowSyntheticDefaultImports设为true（一般默认是开启的）。
