在Storybook中使用vite-plugin-dynamic-import插件报错的解决方法

问题概述 #

使用Vite构建React+TypeScript项目，借助vite-plugin-dynamic-import处理动态导入时，npm run dev和npm run build可正常运行，但npm run storybook或npm run build-storybook出现vite:build-import-analysis解析错误。

解决方案 #

1. 让Storybook正确加载项目Vite配置 #

修改.storybook/main.ts，引入项目的vite.config.ts并合并配置，确保vite-plugin-dynamic-import被Storybook的Vite构建流程正确加载：

import type { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from 'vite';
import viteConfig from '../vite.config';

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  core: {
    builder: '@storybook/builder-vite',
  },
  framework: {
    name: "@storybook/react-vite",
    options: {
      viteConfig: async () => mergeConfig(viteConfig, {}),
    },
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

2. 限制vite-plugin-dynamic-import的处理范围 #

避免插件处理Storybook内部文件或故事文件导致解析错误，修改vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dynamicImport from 'vite-plugin-dynamic-import'

export default defineConfig({
  plugins: [
    react(),
    dynamicImport({
      // 仅处理src目录下的业务代码
      include: 'src/**/*',
      // 排除Storybook相关文件
      exclude: [/\.stories\.(ts|tsx)$/, /\.storybook\//]
    }),
  ],
})

3. 检查并升级依赖版本 #

可能存在版本兼容问题，执行以下命令更新依赖：

• 更新vite-plugin-dynamic-import：npm update vite-plugin-dynamic-import
• 更新Storybook相关包：npm update @storybook/react-vite @storybook/builder-vite

4. 按需禁用插件（调试用） #

如果以上方法无效，可临时在Storybook环境中禁用vite-plugin-dynamic-import，确认问题来源：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dynamicImport from 'vite-plugin-dynamic-import'

export default defineConfig(({ mode }) => {
  const plugins = [react()]
  // 非Storybook环境才加载动态导入插件
  if (!mode.includes('storybook')) {
    plugins.push(dynamicImport())
  }
  return { plugins }
})

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