集成Storybook、React、Vite与TS时遇Missing './preview.js'错误求助

可行的解决步骤： #

1. 清理依赖缓存并重装 #

• 删除项目根目录下的node_modules文件夹、yarn.lock（或package-lock.json）文件
• 执行yarn install（或npm install）重新安装所有依赖
• 重启Storybook服务

2. 修正Storybook配置文件 #

检查.storybook/main.ts（或.js），确保使用正确的框架与构建器配置，避免依赖冲突：

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: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

3. 移除冗余依赖 #

你的开发依赖中同时包含@storybook/react和@storybook/react-vite，这会导致版本冲突，执行命令移除冗余包：

yarn remove @storybook/react
# 或使用npm：npm uninstall @storybook/react

重新安装依赖后重启服务。

4. 降级Vite版本 #

部分用户反馈Vite 4.3.x与Storybook 7.x存在兼容性问题，可尝试降级到稳定兼容版本：

yarn add vite@4.2.1 --dev
# 或使用npm：npm install vite@4.2.1 --save-dev

5. 手动创建preview配置文件 #

如果上述方法无效，在.storybook目录下创建preview.ts（或preview.js），添加基础配置：

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

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

export default preview;

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