Webpack (4) hot module reloading fetches update manifest from malformed URI

Question

When Webpack attempts to fetch the update JSON file, it fails with the console error message:

[HMR] Update failed: Error: Manifest request to https://subdomain.localhost23dae8e1865781c26fcd.hot-update.json timed out.

Note the omission of a slash between the TLD and the path…

Devserver config:

{
  public: `subdomain.localhost`,
  publicPath: 'https://subdomain.localhost/',
  port: 9000,
  https: false,
  contentBase: path.join(__dirname),
  watchContentBase: true,
  historyApiFallback: true,
  compress: true,
  hot: true
};

What configuration is required to ensure update manifest will load from the correct path?

• No other parts of our dev/prod environments are failing… which leads me to believe the configuration error exists in a niche.

• https://subdomain.localhost/webpack-dev-server links to valid assets at the correct URL's

Answer 1

Surprisingly, the hot module replacement plugin will actually look to the config.output.publicPath property rather than the config.devServer.[static].publicPath value.

devServer.static.publicPath (or WDS < 4, devServer.publicPath) should be the same as output.publicPath.

Correcting the output property to use the full path https://subdomain.localhost/ corrects this problem.

Answer 2

I believe publicPath should be just / instead of the full path.