微前端中如何正确共享 React 依赖避免重复加载？

夏侯新利提问于 2026-03-01 18:55:19 阅读 7

前端

我用 qiankun 搭了个微前端项目，主应用和子应用都用了 React 18，但发现子应用加载时又把 React 打包进去了，导致页面报错说存在多个 React 实例。

我试过在 webpack 里配 externals 把 React 排除，也按文档在主应用挂载了 window.React = React，但子应用还是报 Invalid hook call。是不是哪里配置漏了？

这是我的子应用 webpack 配置片段：

externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
}

我来解答赞 1 收藏

反馈

1 条解答

司空爱棋 Lv1

Invalid hook call 基本就是多个 React 实例导致的，你的 externals 配置本身没问题，但 qiankun 的 JS 沙箱隔离了 window 对象，子应用访问不到主应用挂载的 React。

改成这样，用函数形式的 externals 动态获取：

externals: {

  'react': {

    root: 'React',

    commonjs: 'react',

    commonjs2: 'react',

    amd: 'react'

  },

  'react-dom': {

    root: 'ReactDOM',

    commonjs: 'react-dom',

    commonjs2: 'react-dom',

    amd: 'react-dom'

  }

}

同时主应用挂载方式改成这样，确保在 qiankun 启动前就挂载好：

import * as React from 'react';

import * as ReactDOM from 'react-dom';



// 必须在 registerMicroApps 之前挂载

window.React = React;

window.ReactDOM = ReactDOM;

如果还不行，最稳的方式是主应用直接用 script 标签加载 React CDN，这样全局变量在沙箱创建前就存在了，子应用 externals 配置不用改。

2026-03-01 19:03