I have an application which required window.React and window.ReactDOM, so i modify the webpack externals field in next.config.js like this:

// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    if (!isServer) {
      config.externals = {
        next: 'next',
        react: 'React',
        'react-dom': 'ReactDOM'
      }
    }
    return config;
  }
}

But when i do this, the page can't hot reload when editing code. And there is no warning or error in the Chrome console panel. Only when i manually refresh the page, the latest code can work as well.

Reproduce repositry: https://github.com/MrKou47/nextjs-hmr-notwork-demo