使用vite-plugin-svgr时Storybook.js出现动态导入模块错误

以下是针对SVG模块导入错误的排查和修复方向：

1. 调整SVGR插件的匹配范围 #

当前vite-plugin-svgr的include仅设置为"*.svg"，只能匹配当前目录下的SVG文件，无法覆盖@public指向的public目录下子文件夹中的文件。修改为全局匹配规则：

// vite.config.ts
svgr({
  svgrOptions: {
    plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
    svgoConfig: {
      plugins: ['preset-default', 'removeTitle', 'removeDesc', 'removeDoctype', 'cleanupIds'],
    },
  },
  include: "**/*.svg", // 修改为全局匹配所有SVG文件
}),

2. 确保Storybook继承Vite配置 #

Storybook 7.x基于@storybook/react-vite时，需明确指定Vite配置文件路径。在.storybook/main.ts中添加配置：

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {
      viteConfigPath: "../vite.config.ts", // 指定Vite配置文件路径
    },
  },
};
export default config;

3. 添加SVG的TypeScript类型声明 #

如果是TypeScript报错无法识别ReactComponent导出，在src/vite-env.d.ts（无则新建）中添加类型声明：

// src/vite-env.d.ts
/// <reference types="vite-plugin-svgr/client" />

也可以手动声明：

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

4. 同步别名到Storybook配置 #

确保Storybook能解析@public别名，在.storybook/main.ts中通过viteFinal同步别名：

// .storybook/main.ts
import path from "path";

const config: StorybookConfig = {
  // ...其他已有配置
  async viteFinal(config) {
    config.resolve!.alias = {
      ...config.resolve!.alias,
      "@public": path.resolve(__dirname, "../public"),
    };
    return config;
  },
};

完成以上配置后，重启Storybook服务验证问题是否解决。

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