如何解决纯净Vue3/Vite/Storybook环境下importers[path] is not a function错误

按以下步骤操作后启动Storybook报错：

• 安装纯净Vue3/Vite应用（应用可正常运行）
• 安装Storybook
• 执行npm run storybook启动Storybook

出现错误：

importers[path] is not a function

TypeError: importers[path] is not a function
    at StoryStore2.importFn (http://localhost:6006/virtual:/@storybook/builder-vite/storybook-stories.js:6:31)
    at StoryStore2.loadCSFFileByStoryId (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2297:19)
    at StoryStore2._callee2$ (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2355:29)
    at tryCatch (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:46:44)
    at Generator.invoke (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:213:26)
    at Generator.next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:87:25)
    at asyncGeneratorStep2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2140:24)
    at _next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2158:9)

该错误源于Storybook的Vite构建器与Vue3项目的ESM模块处理逻辑冲突，StoryStore2在加载CSF（Component Story Format）文件时无法正确调用模块导入函数，通常由Storybook与Vite版本不兼容或项目ESM配置异常引发。

方案1：降级到兼容的Storybook稳定版 #

若使用最新版Storybook出现问题，可降级至7.x系列的稳定版本（如7.6.17）：

1. 卸载现有Storybook依赖：

npm uninstall @storybook/vue3 @storybook/vue3-vite storybook

2. 安装指定版本：

npm install -D @storybook/vue3@7.6.17 @storybook/vue3-vite@7.6.17 storybook@7.6.17

3. 重新初始化配置：

npx storybook@7.6.17 init

4. 启动Storybook：

npm run storybook

方案2：调整Vite配置 #

在项目根目录的vite.config.js中添加优化规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['@storybook/vue3', '@storybook/vue3-vite']
  },
  resolve: {
    preserveSymlinks: true
  }
})

方案3：修改Storybook配置 #

在.storybook/main.js中调整Vite构建逻辑：

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  viteFinal: async (config) => {
    // 禁用预构建避免导入冲突
    config.optimizeDeps.disabled = true;
    return config;
  }
};
export default config;

方案4：清理依赖缓存 #

1. 删除依赖目录和锁文件：

rm -rf node_modules package-lock.json

2. 重新安装依赖：

npm install

3. 重启Storybook：

npm run storybook

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