使用Rollup开发React库时Storybook报错：找不到react/package.json

以下是几个可行的解决步骤：

• 安装react和react-dom到开发依赖
  peerDependencies不会被自动安装，Storybook运行时需要本地环境存在这些依赖。执行命令：

  npm install react react-dom --save-dev
  # 或者用yarn
  yarn add react react-dom --dev
  # 或者pnpm
  pnpm add react react-dom -D
  

• 检查Storybook配置
  在.storybook/main.js中，确保resolve配置能正确定位到node_modules中的依赖。如果有自定义webpack配置，添加resolve字段：

  const path = require('path');
  
  module.exports = {
    webpackFinal: async (config) => {
      config.resolve.modules.push(path.resolve(__dirname, '../node_modules'));
      return config;
    },
  };
  

• 验证rollup-plugin-peer-deps-external配置
  确保插件正确读取你的package.json，若package.json不在根目录，需手动指定路径：

  import peerDepsExternal from 'rollup-plugin-peer-deps-external';
  
  export default {
    plugins: [
      peerDepsExternal({
        packageJsonPath: './path/to/package.json'
      })
    ]
  };
  

• 清除缓存并重新安装依赖

  1. 清理Storybook缓存：npx sb clean
  2. 删除node_modules和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
  3. 重新安装依赖：npm install（或对应包管理命令）

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