导入已发布的自研React组件时报Minified React error #321如何解决

你检测到仅有单个React版本仍触发该错误，核心原因是运行时存在两份React实例，而版本检测工具仅能扫描到npm安装层面的依赖，无法识别打包内置的副本，常见场景如下：

• 你发布的@me/library组件库使用Parcel构建时，未将react、react-dom标记为外部依赖，Parcel默认将所有引用的依赖打入产物，导致组件库内部自带了一份独立的React副本，运行时和业务项目的React同时加载，触发Hook版本校验失败
• 组件库和业务项目使用了不同的模块规范导入React，例如组件库用CommonJS规范导入React、业务项目用ESM规范导入React，即使版本完全一致，不同模块系统导出的React实例也会被判定为不同的对象，触发报错

1. 调整组件库的依赖配置
   在组件库的package.json中，将react、react-dom从dependencies移到peerDependencies中，声明组件库使用宿主项目的React版本：

{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

2. 修改组件库的Parcel构建命令
   打包时明确将react、react-dom标记为外部依赖，不打入组件库产物，构建命令调整为：
   rm -rf dist && parcel build src/index.js --external react --external react-dom --no-cache

3. 统一模块规范
   组件库打包时优先输出ESM格式产物，在package.json中指定ESM入口：

{
  "module": "dist/index.esm.js",
  "main": "dist/index.cjs.js"
}

业务项目导入组件库时统一使用ESM的import语法，避免混用require导入。

4. 重新验证
   将调整后的组件库重新构建发布到Gemfury，业务项目删除node_modules、lock文件后重新安装依赖，启动项目即可正常渲染组件。

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