React微前端如何访问NextJS安装的react等npm依赖包？

问题核心原因 #

NextJS 默认webpack配置会将所有npm安装的依赖封闭在构建后的模块作用域内，不会主动挂载到全局window对象，因此微前端配置externals从全局查找react/react-dom等依赖时会拿到undefined，这是现代构建工具避免全局污染的默认行为，不是NextJS的特殊限制。

合规实现方案（无hack、不依赖付费Module Federation） #

所有方案均使用NextJS官方开放的配置能力，不存在侵入构建流程的反模式实现。

• 方案1：构建时注入共享依赖（推荐，版本一致性最优） #

  该方案完全复用宿主npm安装的依赖，从根源避免多版本冲突，配置步骤如下：

  1. 首先统一微前端侧的externals配置，明确指定依赖对应的全局变量名，不要让webpack自动推断：

  // 微前端自定义webpack.config.js
  module.exports = {
    externals: {
      react: 'React', // 映射到window.React
      'react-dom': 'ReactDOM', // 映射到window.ReactDOM
      // 其余共享库按相同规则配置，例如 lodash: '_'、antd: 'antd'
    }
  }
  

  2. 在宿主NextJS项目的next.config.js中，通过官方支持的webpack配置项新增共享依赖入口，确保依赖优先加载：

  // next.config.js
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config, { isServer }) => {
      // 仅客户端构建需要注入全局依赖，服务端无需处理
      if (!isServer) {
        const originalEntry = config.entry
        config.entry = async () => {
          const entries = await originalEntry()
          // 新增独立的共享依赖入口，优先级高于其他业务代码
          if (!entries['share-deps']) {
            entries['share-deps'] = './src/share-deps.js'
          }
          return entries
        }
      }
      return config
    },
  }
  
  module.exports = nextConfig
  

  3. 新建src/share-deps.js文件，导入所有需要共享的依赖并挂载到全局：

  // src/share-deps.js
  import React from 'react'
  import ReactDOM from 'react-dom/client' // React17及以下版本直接从'react-dom'导入
  import * as _ from 'lodash'
  // 按需导入其余需要共享的依赖
  
  // 挂载到window，变量名和微前端externals配置一一对应
  window.React = React
  window.ReactDOM = ReactDOM
  window._ = _
  

  4. 在根组件中使用NextJS官方next/script组件，将共享依赖脚本设置为最早加载，确保微前端加载时依赖已就绪：

  // App Router 对应 app/layout.js，Pages Router对应pages/_document.js
  import Script from 'next/script'
  
  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <body>
          <Script 
            src="/_next/static/share-deps.js" 
            strategy="beforeInteractive" 
          />
          {children}
        </body>
      </html>
    )
  }
  

• 方案2：CDN托管固定版本共享依赖（适合多宿主复用场景） #

  如果有多个宿主项目需要加载同一套微前端，可以将和宿主npm依赖版本完全一致的共享库资源托管到你的CDN，同样在根布局通过beforeInteractive策略的Script标签提前加载，微前端侧externals直接映射对应CDN脚本挂载的全局变量即可。

  注意：必须严格保证宿主、微前端、CDN托管的共享依赖版本完全一致，React多实例会直接导致hooks调用异常、上下文丢失等不可排查问题。

反模式说明 #

你之前尝试的动态导入后挂载全局的方式不推荐，核心问题是动态导入为异步加载，存在时序风险——微前端执行时依赖可能还未完成挂载，同时会破坏tree-shaking机制，增大包体积。

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