能否在NX中使用Rollup？组件库打包遇SVG导入报错求助

API 探路者

2026-7-22

问题解决：NX Monorepo中用Rollup打包组件库的SVG类型错误

核心结论

完全可以在NX monorepo里用Rollup打包要发布的组件库，不需要将Storybook移出monorepo。你遇到的TS2307错误是SVG文件缺少类型声明导致的，和NX+Rollup的兼容性无关，按以下步骤修复即可：

1. 添加SVG类型声明文件

TypeScript默认不识别SVG模块，需要手动添加类型声明：

在你的组件库目录（libs/ui-shared/component-library/src）下创建typings.d.ts文件

写入对应内容（根据你用的Rollup插件选择）：

// 如果你用@rollup/plugin-image将SVG转成base64字符串
declare module '*.svg' {
  const content: string;
  export default content;
}

// 如果你用rollup-plugin-svgr将SVG转成React组件，替换成下面的声明
// declare module '*.svg' {
//   import React from 'react';
//   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
//   export default ReactComponent;
// }

打开你指定的tsconfig.json，确保include数组包含这个类型文件：
```
"include": [
  "src/**/*",
  "./typings.d.ts"
]
```

2. 调整Rollup插件配置

确认你用的image()插件是@rollup/plugin-image，它会自动处理SVG文件并输出base64，和上面的类型声明匹配
注意terser和uglify功能重复，保留一个即可（推荐terser，对ES模块支持更好）

3. 确保TS配置生效

检查tsconfig.json的compilerOptions：
- moduleResolution设置为Node或NodeNext，保证模块解析逻辑正确
- allowSyntheticDefaultImports设为true，适配SVG的默认导入方式

4. NX环境下的Rollup使用建议

NX完全支持自定义Rollup构建，你可以在组件库的project.json中配置build目标，直接调用Rollup命令：

"targets": {
  "build": {
    "executor": "nx:run-commands",
    "options": {
      "command": "rollup -c ./libs/ui-shared/component-library/rollup.config.js"
    },
    "outputs": ["{workspaceRoot}/dist/libs/ui-shared/component-library"]
  }
}