使用Rollup与SVGR打包时出现'default is not exported by svg'错误

运行yarn rollup -c命令时出现以下错误：

[!] RollupError: "default" is not exported by "src/assets/svg/basic_icons/Atom.svg", imported by "src/components/basic_icons/atom.tsx"

atom.tsx组件代码：

import svgUrl, { ReactComponent as Atom } from '../../assets/svg/basic_icons/Atom.svg'; 
export default svgUrl; 
export { Atom };

Atom.svg为常规SVG文件，当前Rollup配置：

import svgr from '@svgr/rollup';
import url from '@rollup/plugin-url'
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';
import svg from 'rollup-plugin-svg';


export default {
    input: 'src/index.ts',
    output: [
        {
            file: 'build/bundle.js',
            format: 'cjs',
            sourcemap: true,
            name: 'icons'
        },
    ],
    plugins: [
        url({
            include: ['**/**.svg']
        }), 
        svg({
            output: 'module',
            defaultExport: 'svgUrl'
        }),
        svgr({ babel: false, jsx: { namedExports: true } }),
        resolve(),
        commonjs(),
        typescript({ tsconfig: './tsconfig.json' }),
        external(),
        terser()
    ],
}

问题原因 #

你同时使用了@rollup/plugin-url、rollup-plugin-svg和@svgr/rollup三个SVG处理插件，三者逻辑冲突，导致SVG模块的导出结构不符合你的导入需求。

解决方案 #

1. 调整Rollup插件配置 #

移除rollup-plugin-svg，通过@svgr/rollup和@rollup/plugin-url的配合，实现默认导出SVG URL、命名导出React组件的需求：

修改后的Rollup配置：

import svgr from '@svgr/rollup';
import url from '@rollup/plugin-url'
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import typescript from '@rollup/plugin-typescript';


export default {
    input: 'src/index.ts',
    output: [
        {
            file: 'build/bundle.js',
            format: 'cjs',
            sourcemap: true,
            name: 'icons'
        },
    ],
    plugins: [
        // 先处理SVG生成文件URL作为默认导出
        url({
            include: ['**/*.svg'],
            limit: 0, // 所有SVG生成独立文件，按需改为大于0的数值启用base64嵌入
            fileName: '[name].[hash][extname]' // 保留文件名便于缓存
        }),
        // 再生成React组件作为命名导出
        svgr({
            babel: false,
            exportType: 'named', // 指定命名导出模式
            svgProps: { xmlns: 'http://www.w3.org/2000/svg' } // 给组件添加默认属性
        }),
        resolve(),
        commonjs(),
        typescript({ tsconfig: './tsconfig.json' }),
        external(),
        terser()
    ],
}

2. 配置TypeScript类型声明 #

在项目中创建或修改SVG类型声明文件（如src/svg.d.ts），确保TS能识别SVG的导出结构：

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

调整完成后，即可正常导入SVG的URL和React组件，打包错误会被修复。

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