使用Rollup构建R3F组件库时Hook报错求助

问题根源 #

这个报错本质是组件库和测试项目里的react、react-dom或@react-three/fiber不是同一个实例，导致R3F的上下文无法在两者间共享，即使组件放在Canvas里也识别不到。

解决步骤 #

• 调整组件库的依赖声明
  把react、react-dom、@react-three/fiber移到package.json的peerDependencies里，同时在devDependencies中保留一份用于本地开发构建。这样组件库会复用测试项目里的这些依赖实例，避免重复加载：

  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@react-three/fiber": "^8.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@react-three/fiber": "^8.0.0"
  }
  

• 修改Rollup配置外部化依赖
  在Rollup配置文件中，把这些依赖标记为外部依赖，不让Rollup把它们打包进组件库代码：

  export default {
    // 其他已有配置
    external: ['react', 'react-dom', '@react-three/fiber'],
    output: {
      format: 'esm', // 输出ES模块格式，利于依赖共享
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
        '@react-three/fiber': 'ReactThreeFiber'
      }
    }
  }
  

• 修复npm link的依赖冲突
  如果用npm link还是有问题，换成本地依赖安装更稳妥：

  # 在测试项目目录下执行，替换为你的组件库package文件夹路径
  npm install ../glsl-pipeline-react/package
  

  或者手动把组件库的依赖软链到测试项目的依赖上（以react为例）：

  # 进入测试项目的node_modules/react目录
  cd your-test-project/node_modules/react
  # 链接到组件库的react依赖
  npm link ../../glsl-pipeline-react/package/node_modules/react
  

  重复上述操作处理react-dom和@react-three/fiber。

• 验证构建结果
  重新执行npm run build构建组件库，查看输出文件里有没有包含@react-three/fiber的完整代码，正常应该只保留导入语句，没有打包库本身。

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