React项目StoryBook配置下SVG无法加载报错如何解决？

你本地React项目的构建工具（CRA/Vite/自定义Webpack）已经配置了SVG导入为React组件的loader规则，但Storybook的独立构建配置没有同步该规则。此时你导入的Logo实际是SVG的静态资源路径字符串，而非React组件，把字符串当做组件标签调用时，就会触发createElement标签名不合法的报错。

1. 优先尝试调整导入语法（无需改配置，适配绝大多数场景） #

如果你的项目已经集成了svgr相关能力，只需把SVG的导入语句改成命名导入即可，对原有项目逻辑无影响：

// 把原导入
import Logo from '../../utils/assets/Logo.svg';
// 替换为
import { ReactComponent as Logo } from '../../utils/assets/Logo.svg';

2. 同步Storybook构建配置 #

如果方案1不生效，按照你项目使用的构建工具修改Storybook配置即可：

如果你用Vite构建项目 #

首先确认你项目的vite.config.js中已经配置了vite-plugin-svgr，之后修改.storybook/main.js，同步添加svgr插件配置：

import { mergeConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default {
  // 其余原有配置保持不变
  async viteFinal(config) {
    return mergeConfig(config, {
      // 如果你项目中是默认导入SVG作为组件，保留exportAsDefault: true；如果是命名导入则删除该配置
      plugins: [svgr({ exportAsDefault: true })],
    });
  },
};

如果你用Webpack/CRA构建项目 #

首先安装svgr的webpack loader：

npm install @svgr/webpack --save-dev

之后修改.storybook/main.js，修改webpack规则：

module.exports = {
  // 其余原有配置保持不变
  webpackFinal: async (config) => {
    // 排除原有默认处理SVG的规则
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test.toString().includes('svg')) {
        return { ...rule, exclude: /\.svg$/i }
      }
      return rule
    })
    // 新增svgr处理规则
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
}

3. 临时替代方案（无需改配置） #

如果不需要操作SVG内部属性（比如修改颜色、路径样式），可以直接把SVG作为图片资源引入使用：

import logoSrc from '../../utils/assets/Logo.svg';

const Header = () => {
  const classes = styles();
  return (
    <>
       <img src={logoSrc} className={classes.Logo} alt="Logo" />
    </>
  );
};

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