React组件库Rollup打包后在Next.js消费应用中SVG资源加载失败

• 你使用的-!svg-react-loader!./xxx.svg是Webpack专属的内联loader语法，仅在Webpack构建链路（比如本地Storybook环境）下生效，Rollup无法识别这种特殊导入前缀，不会处理对应SVG文件，只会把导入语句原样输出到打包产物中。
• 现有Rollup配置里的rollup-plugin-svg默认仅将SVG转为字符串或Base64 URL，不会输出React组件，和代码中直接将导入值作为组件渲染的用法完全不匹配。
• 将svg-react-loader列为peerDependencies是错误配置：这个包是Webpack专属的构建时loader，消费端应用（包括Next.js）默认不会对node_modules下的第三方依赖执行自身的Webpack loader规则，就算消费端安装了这个包也不会生效。

1. 调整SVG导入写法 #

删除所有SVG导入语句前的Webpack内联loader前缀，改为普通路径导入：

// Footer.tsx
import FacebookSvg from './facebook.svg';
import InstaSvg from './insta.svg';
import LinkedInSvg from './linkedin.svg';

// 组件使用逻辑保持不变
<a target="_blank" href={facebook} rel="noreferrer">
  <FacebookSvg />
</a>

2. 替换Rollup SVG处理插件 #

卸载无法满足需求的rollup-plugin-svg，安装可将SVG转为React组件的Rollup插件：

npm uninstall rollup-plugin-svg
npm install @rollup/plugin-svgo rollup-plugin-svg-to-jsx --save-dev

修改rollup.config.js配置，替换原有SVG插件，注意插件顺序：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import svgo from "@rollup/plugin-svgo";
import svgToJsx from "rollup-plugin-svg-to-jsx";
import typescript from "rollup-plugin-typescript2";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    // 先压缩优化SVG
    svgo({
      plugins: [
        { removeViewBox: false },
        { cleanupIDs: false }
      ]
    }),
    // 将SVG转为可直接渲染的React组件
    svgToJsx(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
  ]
};

3. 修正类型声明与依赖配置 #

• 修改globals.d.ts中的SVG模块声明，匹配实际导入的组件类型：

declare module '*.svg' {
  import React from 'react';
  const SvgComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default SvgComponent;
}

• 从package.json的peerDependencies中删除svg-react-loader，这个包仅在组件库本地构建Storybook时使用，消费端不需要安装任何SVG相关依赖。

4. 重新构建发布 #

删除原有build目录，重新执行npm run build，检查打包产物可以看到SVG内容已经被转为JSX代码内嵌到JS文件中，重新发布版本后，消费端安装更新即可正常渲染图标，不需要做任何额外配置。

组件库打包时，Rollup会从入口文件开始遍历所有依赖，只有被对应插件正确解析转换的资源，才会被合并到最终的JS产物里。之前的写法相当于在代码里留了只有Webpack能识别的特殊标记，Rollup无法解析就会原样保留导入语句，消费端运行时找不到对应路径的SVG文件自然报错。
将SVG提前转成普通React组件再打包，本质是把SVG的渲染逻辑直接写进组件代码，消费端导入组件时拿到的就是完整可运行的JSX，不需要额外处理资源，也不会对外暴露单独的SVG文件，完全符合预期。

内容的提问来源于stack exchange，提问作者Jamadan