PNPM 单仓中 Storybook 提示未找到配置文件的问题求助

问题重现 #

在PNPM monorepo环境下，无论是给现有Vite-React项目添加Storybook，还是从零新建Storybook项目，均触发相同错误：

Error: No configuration files have been found in your configDir, Storybook needs "main.js" file, please add it (or pass a custom config dir flag to Storybook to tell where your main.js file is located at).

即使存在main.ts或重命名为main.js，错误依旧存在。

解决方案 #

1. 启动时明确指定配置目录 #

Storybook在monorepo中可能无法自动识别配置文件路径，启动时通过--config-dir参数指定.storybook文件夹的准确路径。

修改项目的package.json中的启动脚本：

{
  "scripts": {
    "storybook": "storybook dev -p 6006 --config-dir ./.storybook"
  }
}

如果是monorepo子项目，路径改为子项目下的.storybook，比如：

"storybook": "storybook dev -p 6006 --config-dir ./packages/your-app/.storybook"

2. 调整PNPM的Hoisting配置 #

PNPM默认的依赖隔离机制可能导致Storybook无法读取到所需依赖，在monorepo根目录的.npmrc文件中添加以下配置：

public-hoist-pattern[]=*storybook*
public-hoist-pattern[]=@storybook/*

保存后执行pnpm install重新安装依赖，确保Storybook相关包被提升到根目录的node_modules中。

3. 修复配置文件中的路径解析函数 #

原配置中的getAbsolutePath使用require.resolve，在PNPM monorepo的ES模块环境下可能存在解析问题，替换为更可靠的路径解析方式：

import type { StorybookConfig } from '@storybook/react-vite';
import { fileURLToPath } from 'url';
import { join, dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

function getAbsolutePath(packageName: string) {
  return join(__dirname, '..', 'node_modules', packageName);
}

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

export default config;

4. 清理缓存并重新安装依赖 #

缓存异常可能导致依赖加载失败，执行以下命令：

# 清理PNPM缓存
pnpm store prune

# 重新安装项目依赖
pnpm install

之后再启动Storybook尝试。

5. 检查版本兼容性 #

确保@storybook/react-vite与项目中Vite的版本兼容：

• Vite 4.x 对应 Storybook 7.x
• Vite 3.x 对应 Storybook 6.x
  如果版本不匹配，升级或降级Storybook到对应版本。

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