使用Microbundle打包React组件库时useState/useEffect无法渲染

核心原因 #

这类报错通常是因为组件库打包时将React/ReactDOM一同打包，导致客户端项目中出现两个独立的React实例，而Hooks必须在同一个React实例的上下文环境中运行。

具体修复步骤 #

1. 调整Microbundle打包配置 #

修改组件库package.json中的build命令，将React和ReactDOM标记为外部依赖，避免打包进产物：

"scripts": {
  "build": "microbundle --external react,react-dom --format es,cjs"
}

• --external react,react-dom：告诉Microbundle不要把这两个依赖打包到组件库中，而是使用客户端项目提供的实例。
• --format es,cjs：同时生成ES模块和CommonJS模块，适配不同的客户端项目。

2. 修正package.json依赖配置 #

将React/ReactDOM移至peerDependencies，明确声明组件库对宿主环境的依赖要求：

"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"peerDependenciesMeta": {
  "react": {
    "optional": false
  },
  "react-dom": {
    "optional": false
  }
},
"devDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

• peerDependencies：告知客户端项目需要自行安装指定版本的React，避免重复安装。
• devDependencies：保留React用于组件库本地开发、测试。

3. 检查组件导出与代码规范 #

确保组件是标准的React函数组件，且导出方式正确：

• 示例Dropdown.js：

import { useState } from 'react';

export const Dropdown = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle Dropdown</button>
      {open && <div className="dropdown-content">Dropdown Content</div>}
    </div>
  );
};

• 入口导出文件lib.package.js：

export { Dropdown } from './Dropdown';

4. 客户端项目验证 #

• 确保客户端项目安装的React版本为18.2.0，与组件库要求一致。
• 正确引入组件：

import { Dropdown } from 'your-component-library-name';

function App() {
  return (
    <div className="App">
      <Dropdown />
    </div>
  );
}

export default App;

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