Rollup构建React组件后导入出现Invalid hook call问题求助

核心原因 #

组件库打包时未将React/ReactDOM标记为外部依赖，导致产物中包含重复的React代码，安装到应用项目后出现多份React实例，违反了Hooks必须在同一React上下文调用的规则。

具体修复步骤 #

• 配置Rollup排除React依赖
  修改组件库的rollup.config.js，添加external配置，将react和react-dom排除在打包产物外：

  export default {
    // 其他现有配置...
    external: ['react', 'react-dom'],
    output: {
      // 其他输出配置...
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
    }
  }
  

• 调整组件库依赖声明
  将react和react-dom从dependencies移到peerDependencies，明确要求应用项目提供兼容版本的React：

  {
    "peerDependencies": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0"
    },
    "devDependencies": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
      // 其他开发依赖...
    }
  }
  

• 清理应用项目重复依赖
  在应用项目目录执行命令，清理多余的React实例：

  npm uninstall react react-dom
  npm install react react-dom
  

  同时检查package-lock.json，确保只有一份React依赖记录。

• 重新构建并安装组件库
  回到组件库目录重新构建：

  npm run build
  

  再在应用项目中重新安装组件库（本地安装可重新执行npm install ../test-button）。

验证 #

重启应用项目，确认组件正常渲染且不再触发Invalid hook call警告，执行npm ls react检查是否只有一份React实例。

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