构建可复用React组件时遭遇Invalid Hook Call错误求助

问题根源分析 #

1. 初始的Invalid Hook Call警告：Webpack构建时将React和ReactDOM打包进了组件产物，与CDN引入的React实例冲突——Hook只能在同一React实例环境下调用，双实例导致校验失败。
2. 添加externals后出现的Cannot read properties of undefined (reading 'useState')：externals配置错误，组件无法正确识别CDN注入的全局React对象。

分步解决方案 #

1. 修正Webpack的externals配置 #

修改webpack.config.js，将React和ReactDOM包映射到CDN暴露的全局变量：

module.exports = {
  // ...其他配置项
  externals: {
    react: 'React',    // 对应window.React
    'react-dom': 'ReactDOM'  // 对应window.ReactDOM
  }
};

注意：键名必须是npm包的标准名称（react/react-dom），值必须与CDN脚本注入的全局变量名严格匹配。

2. 保持组件的正常导入逻辑 #

组件代码无需修改导入方式，正常编写即可：

import React, { useState } from 'react';

export default function ButtonLike() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数: {count}
    </button>
  );
}

Webpack会自动将这些导入替换为对全局React对象的引用，不会再把React源码打包进产物。

3. 确保HTML中脚本加载顺序正确 #

必须先加载React和ReactDOM的CDN脚本，再加载你的组件产物：

<!DOCTYPE html>
<html>
<head>
  <title>测试可复用组件</title>
</head>
<body>
  <div id="root"></div>
  <!-- 优先加载React核心库 -->
  <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
  <!-- 再加载你的组件脚本 -->
  <script src="./dist/button-like.js"></script>
  <!-- React 18规范的渲染方式 -->
  <script>
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(ButtonLike));
  </script>
</body>
</html>

4. 验证构建产物有效性 #

重新执行npm run build后，查看打包后的JS文件，搜索useState，应该能看到React.useState形式的引用，而非完整的React源码，这说明externals配置已生效。

额外检查点 #

• 确认本地开发依赖的react/react-dom版本与CDN版本完全一致（你已确认是18.2.0，此步可跳过）
• React 18必须使用ReactDOM.createRoot渲染组件，禁止使用已废弃的ReactDOM.render

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