React组件打包后在其他项目渲染触发Invalid hook call错误排查

修正esbuild打包配置 #

你的构建脚本仅排除了react，但peer依赖包含react-dom——如果打包时未排除react-dom，组件会内置一份react-dom实例，和宿主应用的实例冲突，直接触发hook调用错误。修改build命令：

"build": "esbuild ./src/index.js --external:react --external:react-dom --bundle --format=cjs --loader:.js=jsx --outdir=dist"

注意移除参数中的单引号，避免shell解析异常导致external规则失效。打包后检查dist目录下的文件，确认仅存在require('react')/require('react-dom')的引用，没有包含react或react-dom的源码。

处理本地链接依赖的实例冲突 #

如果用npm link测试组件，组件项目node_modules内的react/react-dom会被优先加载，导致和宿主应用的React实例不共享。解决方式二选一：

• 直接删除组件项目的node_modules/react和node_modules/react-dom，强制组件使用宿主应用的依赖
• 在宿主项目执行npm link ../your-component/node_modules/react（替换为组件的实际路径），让两者共享同一个React实例

强制宿主项目的模块解析路径 #

若直接复制dist目录到宿主项目，可在宿主的打包配置（如webpack）中添加别名，强制所有依赖指向宿主的React实例：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
    }
  }
};

检查组件代码的导入规范 #

确保组件内所有React相关导入都直接从包名引入，避免使用相对路径引用本地React副本：

// ✅ 正确写法
import { useState } from 'react';
import { render } from 'react-dom';

// ❌ 错误写法（会加载本地React）
import { useState } from '../node_modules/react';

排查版本兼容性 #

临时将宿主项目的React版本切换为组件Storybook使用的版本，测试是否解决问题。比如Storybook用React 17，就在宿主执行：

npm install react@17.0.2 react-dom@17.0.2

排除跨版本隐性差异导致的问题。

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