I'm developing a react app and until I was running my dev server just on https://localhost everything was ok, i.e. the app was hot refreshed everytime I clicked "save" in my IDE.

Then I've added a new entry in my etc/hosts file:

127.0.0.1 localhost localhost.myDomain.local

and configured devServer like this:

export const devConfig: Configuration = {
  mode: "development",
  devtool: "eval-source-map",
  devServer: {
    port: 443,
    hot: true,
    open: true,
    historyApiFallback: true,
    https: true,
    allowedHosts: "all",
    host: "localhost.myDomain.local",
  },
  plugins: [new ReactRefreshWebpackPlugin()],
};

When I now start the server it opens a new tab in my browser with https://localhost.myDomain.local. Looks alright at first glance. But saving changes in my IDE doesn't make the browser hot refresh the page. I need to manually refresh it to see them.

I flushed DNS cache but it didn't help. Passing { forceEnable: true } as an arg to ReactRefreshWebpackPlugin didn't work either. Is there a chance to make it work?