Webpack hmr: __webpack_hmr 404 not found

This line in entry array does not play well with webpack-dev-server:

webpack-hot-middleware/client

because it's a requirement of webpack-hot-middleware for working with any server other than webpack-dev-server (such as express or some such).

I ran into this mixed-server issue by following Webpack tutorials. They should update it so that the entry point for the config file of Webpack using webpack-dev-server doesn't require an artifact produced by webpack-hot-middleware, which tries to hot-emit the developer's module updates into a custom-built server depending on it.

You can remove that line from the entry array, which in case of using dev-server should solve the problem.

FYI That line in your code came from here: https://github.com/webpack-contrib/webpack-hot-middleware where it says:

Add webpack-hot-middleware/client?... into the [webpack config's] entry array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly.

Based on your question, "I'm using webpack-dev-server", you're therefore not using "webpack-hot-middleware" and should remove the entry line.

Fixed by deleting the following line under entry: 'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'. I don't know why it worked. See Amin Ariana's answer for an explanation to why this may work for you.

I will add here my answer because in my case that was the cause of this issue.

Assuming you are using Next.JS.

After receiving this issue, all I had to do is to close the debug window of the nodeJS (chrome debugging tool, but for the BE, not the UI) and then just to start the project again using npm start

I hope it will help anyone that face it (the other answers here didn't suit me)