Vue3+Storybook动态导入模块失败，组件无法显示求助

问题现象 #

执行 npm run storybook 后无法在 Storybook 中看到组件，报错信息：

Failed to fetch dynamically imported module: http://localhost:6006/src/stories/InputText.stories.ts

已尝试执行 npx storybook@latest upgrade，问题未解决。

相关配置信息 #

devDependencies #

"@storybook/addon-essentials": "^7.0.7",
"@storybook/addon-interactions": "^7.0.7",
"@storybook/addon-links": "^7.0.7",
"@storybook/addon-mdx-gfm": "^7.0.7",
"@storybook/blocks": "^7.0.7",
"@storybook/testing-library": "^0.1.0",
"@storybook/vue3": "^7.0.7",
"@storybook/vue3-vite": "^7.0.7",
"@tailwindcss/line-clamp": "^0.4.2",
"@types/node": "^18.15.11",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"@vitejs/plugin-basic-ssl": "^1.0.1",
"@vitejs/plugin-vue": "^3.2.0",
"@vue/eslint-config-typescript": "^10.0.0",

.storybook/main.ts 配置 #

import type { StorybookConfig } from "@storybook/vue3-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm"],
  core: {
    builder: '@storybook/builder-vite',
  },
  framework: {
    name: "@storybook/vue3-vite",
    options: {}
  },
  docs: {
    autodocs: "tag"
  }
};
export default config;

.storybook/preview.ts 配置 #

import type { Preview } from "@storybook/vue3";

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: "^on[A-Z].*" },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
};

export default preview;

排查与解决方案 #

1. 校验文件基础信息 #

• 确认 InputText.stories.ts 确实存在于 src/stories/ 目录，文件名大小写与配置匹配（区分大小写的系统需严格一致）。
• 检查stories文件内是否存在语法错误，比如TypeScript类型定义错误、组件导入路径错误，这类问题会直接导致模块加载失败。

2. 优化Storybook的Vite配置 #

在 .storybook/main.ts 中添加Vite自定义配置，确保正确解析TypeScript和Vue文件：

import type { StorybookConfig } from "@storybook/vue3-vite";
import vue from '@vitejs/plugin-vue';

const config: StorybookConfig = {
  // 保留原有配置
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm"],
  core: {
    builder: '@storybook/builder-vite',
  },
  framework: {
    name: "@storybook/vue3-vite",
    options: {}
  },
  docs: {
    autodocs: "tag"
  },
  // 添加Vite自定义配置
  viteFinal: async (config) => {
    return {
      ...config,
      plugins: [...(config.plugins || []), vue()],
      resolve: {
        ...config.resolve,
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
      },
    };
  },
};
export default config;

3. 清除缓存并重新构建 #

• 删除 node_modules/.cache/storybook 目录，清空Storybook缓存。
• 执行 npm install 确保所有依赖安装完整。
• 重新启动Storybook：npm run storybook。

4. 检查项目TypeScript配置 #

确保根目录的 tsconfig.json 包含如下配置，让Storybook能正确解析TypeScript：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5. 调整Storybook版本 #

当前使用的7.0.7版本可能存在兼容性问题，尝试降级到同系列稳定版本：

npm install @storybook/vue3-vite@7.0.20 @storybook/addon-essentials@7.0.20 @storybook/addon-links@7.0.20 @storybook/addon-interactions@7.0.20 --save-dev

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