6

I just upgraded to Webpack 5, and because webpack-dev-server wasn't working anymore, I changed my npm start command from webpack-dev-server to webpack serve.

This is my npm start command

webpack serve --config  ./build-config/webpack.config.js

I can see the console updating, and printing output, but the page in the browser will not update, I have to refresh the browser page.

EXTRA

Adding --mode development --env development --hot to my npm start did not fix the problem

webpack version:

"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"

Note: I am not talking about webpack-serve

Sam
  • 1,765
  • 11
  • 82
  • 176

1 Answers1

3

Possible solutions are,

If you are NOT running off of Node.js It's as simple as appending hot: true in your devServer option of your webpack config.

If you ARE running off of Node.js When creating a webpackDevServer instance in your server file, you have to pass a second options argument that contains the key-value pair hot: true

The configuration got a bit tricky since Webpack 5 came along. Until I see your dev config/package.json, I will assume you have the correct dependencies/options. It's a bit hard knowing what to take into consideration when answering your question since you didn't provide explicit input on your environment, among other things.

References

For documentation/concept: https://webpack.js.org/api/hot-module-replacement/

For a comprehensive guide: https://webpack.js.org/guides/hot-module-replacement/

Dan der Mensch
  • 322
  • 2
  • 13
  • How do you pass that key-value pair? And how do you know if you’re running off nodejs? Nodejs serves the website on a local host, but I’m a bot confused by what you meant. What would be the situation when you aren’t running off nodejs? – Sam Dec 11 '20 at 05:26
  • Basically, are you booting your localhost by running a script (e.g: `node fileName.js` ), or are you using your CLI to run a webpack command? You're running off Node if you answer yes to the first part of the question. That's why seeing your code helps clear it all up. – Dan der Mensch Dec 11 '20 at 05:38
  • I don’t think I’m booting it from a script, I believe npm start just triggers the command “webpack serve”. I can’t share all my code sorry, but I could share certain parts if you name them – Sam Dec 11 '20 at 05:40
  • Sure, can you share your webpack.devServer field? – Dan der Mensch Dec 11 '20 at 05:51
  • I’ll have to in the morning, I’m in Canada. I’m guessing you’re in a different timeline – Sam Dec 11 '20 at 05:58
  • `devServer: { open: true, historyApiFallback: true },` – Sam Dec 12 '20 at 00:51
  • 1
    Append `hot: true,` in there and you should see the following messages in the console `[WDS] Hot Module Replacement enabled.` and `[HMR] Waiting for update signal from WDS`. When you make changes to your codebase (excluding config files), you will see something like `[WDS] App hot update...` – Dan der Mensch Dec 12 '20 at 03:20
  • Did that answer your question? If not, let me know if you'd like me to clear something up. – Dan der Mensch Dec 13 '20 at 01:22
  • It did not unfortunately. I updated my question to show what the console is printing out. This happens every time I make a change, so it looks like it's hot reloading, but the browser isn't refreshing – Sam Dec 14 '20 at 18:33
  • I also made my script: start command to be `"start": "webpack serve --mode development --env development ` – Sam Dec 30 '20 at 17:36
  • If you want to take at look at the config files, they're [here](https://github.com/samgermain/react-boiler-plate), this solution works, except hot reload doesn't work when there's an error, and then the error is fixed – Sam Aug 05 '21 at 00:03