Storybook安装失败：无法解析peer react@^18.2.0依赖求助

方案1：手动安装对应框架的Storybook依赖（根目录统一管理） #

默认的Storybook初始化命令会默认关联React框架，导致非React项目出现peer依赖冲突。可以手动安装核心包+各框架的适配器，避免强制依赖React：

• 安装核心依赖与框架适配器：

  # 核心Storybook依赖
  npm install -D @storybook/core @storybook/addon-essentials
  # Vue3适配（Vue2请替换为@storybook/vue）
  npm install -D @storybook/vue3 vue-loader vue-style-loader
  # Svelte适配
  npm install -D @storybook/svelte svelte-loader
  # HTML/Twig适配（Twig可通过twig-loader解析）
  npm install -D @storybook/html html-loader twig-loader
  

• 在根目录创建.storybook/main.js，配置多框架的stories入口：

  module.exports = {
    stories: [
      '../vue-library/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
      '../svelte-library/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
      '../twig-library/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
    ],
    addons: ['@storybook/addon-essentials'],
    framework: {
      name: '@storybook/manager-webpack5',
      options: {}
    }
  };
  

方案2：为每个子库单独初始化对应框架的Storybook #

由于各子库是独立的不同框架，在各自目录初始化对应版本的Storybook是更合理的选择，完全避免跨框架依赖冲突：

• Vue子库目录执行：

  cd vue-library
  npx storybook@latest init --type vue3
  

• Svelte子库目录执行：

  cd svelte-library
  npx storybook@latest init --type svelte
  

• Twig子库目录执行：

  cd twig-library
  npx storybook@latest init --type html
  

方案3：跳过peer依赖检查（临时应急） #

如果需要快速绕过当前错误，可使用npm的--legacy-peer-deps参数忽略严格的peer依赖解析：

npx storybook init --legacy-peer-deps
# 或手动安装CLI时
npm install @storybook/cli --legacy-peer-deps

⚠️ 注意：此方案仅作临时应急，可能引发潜在的依赖版本不兼容问题，不建议长期使用。

方案4：降级npm版本（可选） #

npm 7+对peer依赖的校验逻辑更严格，若项目无需npm新特性，可降级到npm 6自动忽略无法满足的peer依赖：

npm install -g npm@6

之后再执行npx storybook init即可。

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