配置externals外置react和react-dom后Next.js HMR热重载失效如何解决？

直接重写webpack的externals配置项会覆盖Next.js内置的热重载（HMR）相关外部依赖处理规则，导致模块更新逻辑无法正常触发，因此修改代码后页面不会自动刷新，也不会抛出明显报错。

不要直接替换config.externals，改为将自定义的外部依赖规则追加到原有配置中，修改后的next.config.js参考配置如下：

// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    if (!isServer) {
      // 兼容原有externals的不同格式，追加自定义规则
      const originExternals = config.externals ?? []
      config.externals = [
        ...(Array.isArray(originExternals) ? originExternals : [originExternals]),
        {
          next: 'next',
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      ]
    }
    return config;
  }
}

修改配置后重启Next.js开发服务即可，既可以正常使用window.React、window.ReactDOM全局变量，也能正常触发热重载。

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