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

A. 绍桐提问于 2026-03-09 08:30:21 阅读 4

前端

我在用 qiankun 搭建微前端项目时，主应用和子应用都用了 React，结果发现 React 被加载了两次，控制台还报了 Invalid hook call 的错误。明明已经在 webpack 里把 React 配成 external 了，但子应用还是自己打包了一份。

我尝试在主应用的 webpack 配置里把 React 和 ReactDOM 设为 shared，子应用也配置了同样的 shared 项，但好像没生效。是不是哪里漏了？

// 主应用的 shared 配置
const { name } = require('./package.json');
module.exports = {
  shared: {
    react: { singleton: true, requiredVersion: '^18.2.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.2.0' }
  }
};

共享依赖

我来解答赞 4 收藏

反馈

1 条解答

Zz自娴 Lv1

这个问题我遇到过，确实是配置shared没生效的典型症状。先别急，我们一起调试看看。

关键点在于主应用和子应用都要用Module Federation插件，并且两边配置要匹配。你的主应用配置没问题，但子应用漏了关键配置。正确的子应用webpack配置应该长这样：

module.exports = {

  plugins: [

    new ModuleFederationPlugin({

      shared: {

        react: { 

          singleton: true,

          eager: true,  // 这行很关键，不加的话子应用可能自己加载

          requiredVersion: '^18.2.0'

        },

        'react-dom': {

          singleton: true,

          eager: true,

          requiredVersion: '^18.2.0'

        }

      }

    })

  ]

}

另外两个常见踩坑点：
1. 确保主应用先加载，子应用后加载。如果顺序反了就会报hook错误
2. 检查package.json里react版本号是否一致，差个补丁版本都可能导致问题

如果还不行，可以手动在浏览器控制台检查加载情况：
- 打开network面板看react是否加载了多次
- 输入window.react查看是否只有一个实例

我上次搞这个也折腾了半天，最后发现是子应用webpack配置少写了eager:true。微前端这种依赖共享确实容易踩坑，不过调通后就舒服了。

2026-03-09 09:00