在其他项目复用Storybook组件遇React未定义错误求助

针对你发布的npm组件库在新项目中出现的「React is not defined」错误，可从以下几个方向排查修复：

• 检查组件库的依赖声明
  在组件库的package.json中，确保React被声明为peerDependencies，而非dependencies或devDependencies。这样会告知使用方需要自行安装兼容版本的React，避免组件库重复打包React代码。示例配置：

  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  }
  

• 配置打包工具将React设为外部依赖
  如果你用Rollup、Webpack等工具打包组件库，必须把React和ReactDOM配置为外部依赖，让打包工具不把它们打包进最终产物，而是依赖项目环境中的React实例。

  • Rollup配置示例（rollup.config.js）：

    export default {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    };
    

  • Webpack配置示例（webpack.config.js）：

    module.exports = {
      externals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
    };
    

• 确认组件内部的React导入
  检查组件库中Button组件的源码，确保文件顶部显式导入了React：

  import React from 'react';
  
  const Button = () => {
    return <button>Click Me</button>;
  };
  
  export default Button;
  

  即使React 17+支持JSX自动转换，部分打包场景下仍需显式导入，避免运行时找不到React的问题。

• 验证打包产物
  查看npm包中打包后的代码，确认是否包含React的完整代码。如果产物里包含React，说明外部依赖配置未生效，需要重新调整打包工具的配置后重新发布。

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