Solution for Webpack 5 Dev Server Not Live Reloading

There is currently a bug with Webpack 5 and webpack-dev-server not working that is caused by the existence of a browserslist in the project. If you have all those things in your project and your dev server is is not live reloading, this video might give you a temporary solve until the next beta version is out with the permanent fix.

Github Issue:

Repo with code I showed for reference:

#webpackdevserver #webpack #webpack5

[JonnyIrwin]

This has been driving me crazy all day. You have just made me very happy. Thanks!

[najmantube]

Bug is still there (on 5th October 2021 with latest Webpack) - but your fix works perfectly!

[ItalianVoid]

Yup, over 5 months later and its still a problem, I think its just apart of normal builds at this point haha. Thank you for this video!

[hugoduchesne]

Your videos about webpack are literally saving me ! Thank you man :)

[jpisty]

I spent HOURS on this. Thank you for your solution. I'm going to go cry now

[komorebientertainment]

My html does not load when i make an update in the code. So to fix that, I set 'hot' to false, and 'liveReload' to true in my webpack.config. Then it is working. 2022 but Webpack 5 still has that bug.

[brunofilgueiras]

by just adding the target:web tag it worked for me thanks buddy.

[leonidkuznetsov]

My config is same but live reloading doesn't work... (((

[eugene]

You are genious man! Two days wasted! From Russia with love!

[sujeinthp]

target: "web " still not working for changing only index.html file, it reflects only after updating index, js file

[antoinexgaly]

thank you, that worked, i searched on the forums for this solution but I never saw this issuebeing metioned

[SaurabhGupta-xvfk]

I was not able to solve this issue, but now it works, Thanks!!!

[islamshg]

why webstrom doesnt autosave changes while dev-server running?

[jittojoyes]

I have this issue module not found with css-loader and saas-loader error on ChunkLoaderror, but when I reload the browser. It works!

[helmuthummel]

Thank you so much for this video! I was one and a half hour in staring at my screen and wondering why my setup suddenly stopped working. Of course I added a browserlist config right before 😔

[engine_man]

Found this too late. Ended up finishing a Hackathon without live reloading enabled. I just prebuilt everything and served on node

[helixroscko]

Thank you very match! It's so helpful information for me!

[Ovechkin]

Great stuff! Like and subscription. Hope you will make videos about webpack internals and Node API

[sajidmusician]

Hello. I am using webpack and the live reloading is working now. But I can't seem to understand why my browser keeps showing wds disconnected just like yours did at the end? Is it something I should be worried about? I am just getting started with react.

[RobertWildling]

Thanks for all your webpack videos! – Have you ever had a working ejs setup, where hot reloading works, when you change templates that are actually nested? I never ever could make that work... In case you do, is there any chance to motivate you to do a video on that topic?