Webpack HMR for NodeJS with React

Question

Im having application React + Express with SSR support(Component initial render will done in nodeJS). I want to implement HMR for the application. For that I have used webpack-hot-middleware and HotModuleReplacementPlugin. It is working as expected in client side(browser) but not working in node side.

Scenario: If I have changed something in component, immediately it get reflected in browser but If I reload the page, server bundle returns with old code and from client side it getting update. So I able to see the flicker in browser.

Client Webpack config:

{
entry: {
    client: ['@gatsbyjs/webpack-hot-middleware/client', resolvePath(process.cwd(), 'src/client/index.js')]
},
...loaders
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshPlugin({
        overlay: {
          sockIntegration: 'whm',
        },
      })
].filter(Boolean)
}

Server Webpack config:

 {
externals: nodeExternals({
    allowlist: ['webpack/hot/poll?1000']
}),
target: 'node',
...loaders
entry: {
    server: ['webpack/hot/poll?1000', resolvePath(process.cwd(), 'src/server/index.js')]
},
plugins: [
    
    new webpack.HotModuleReplacementPlugin(),
    new NodemonPlugin({
        script: path.join('../build', 'server.js')
    })
].filter(Boolean)
}

Express Code Configuration

    const compiler = webpack(webpackConfig[0]);

    app = express();

    app.use(
        require('webpack-dev-middleware')(compiler, {
            publicPath: webpackConfig[0].output.publicPath,
            writeToDisk: true,
            serverSideRender: true,
        })
    );

    app.use(
        require(`@gatsbyjs/webpack-hot-middleware`)(compiler, {
          log: console.log,
          path: `/__webpack_hmr`,
          heartbeat: 1000,
        })
    );

Answer 1

One possible pitfall is that your externals property in the webpack config should be an array.

externals: [
  nodeExternals({
    allowlist: ['webpack/hot/poll?1000']
  })
]