如何通过CDN将一个React应用的组件集成到另一个React应用中

问题场景 #

尝试通过CDN在React应用（App 2）中引入另一个React应用（App 1）的组件，该组件在原应用中运行正常，但通过CDN引入时出现useState相关错误，导致组件无法正常渲染。

已尝试操作 #

将App 1构建后通过localhost:8000提供服务，试图将其组件渲染到App 2中，期望组件能无缝集成到宿主React应用且无useState相关问题。

错误原因 #

核心问题是React双实例冲突：

• App 2本身通过npm安装了React依赖，同时又通过CDN引入了全局的React；
• App 1的Webpack配置将React设为外部依赖（externals），打包时会调用全局的React实例；
• 当App 2渲染组件时，组件使用的全局React实例和App 2内部的React实例并非同一个，而React Hooks（如useState）依赖于同一个React实例的内部状态管理机制，因此触发错误。

解决方案 #

方案1：统一React实例（推荐） #

让App 2和引入的组件共用同一个React实例：

1. 移除App 2 index.html中的CDN React引入
   删除以下两行代码：

   <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   

2. 将App 2内部的React暴露到全局
   在App 2的入口文件（如src/index.js）顶部添加：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   
   // 挂载到全局，供CDN组件调用
   window.React = React;
   window.ReactDOM = ReactDOM;
   

3. 重新构建并运行App 2
   此时App 1的组件会使用App 2内部的React实例，彻底避免双实例冲突。

方案2：调整App 1的Webpack配置（不推荐） #

若无法修改App 2配置，可让App 1打包时内置React：
修改App 1的webpack.config.js，移除externals中的React配置：

// 删除这段配置
externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
},

此方案会将React打包进组件bundle，虽能解决错误，但会增大包体积，且存在版本不匹配的风险。

额外修复点 #

检查组件导出逻辑：Webpack配置library: 'MyComponent'后，默认导出的组件会挂载在window.MyComponent.default下，而非window.MyComponent.Button。修改App 2的App.js：

useEffect(() => {
  if (window.MyComponent) {
    setMyComponent(() => window.MyComponent.default);
  }
}, []);

同时确保App 1和App 2使用完全一致的React版本，版本差异也可能引发Hooks错误。

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