[webpack-dev-server] Content base changed. Reloading...

[hailwood]

Since upgrading from 0.33.0 to 1.0+ my HMR stopped working.

it detects the changes, however we're getting the following message logged out into the console

[webpack-dev-server] Content base changed. Reloading...

And the the page does a full reload. Previously it would do live reloading via pmmmwh/react-refresh-webpack-plugin

To fix it I've added

Encore.configureDevServerOptions(options => {
    options.liveReload = false;
});

I'm not sure if this is an issue for here, webpack-dev-server or pmmmwh/react-refresh-webpack-plugin but given this was the dependency I updated I thought I'd start at the top.

Another issue I ran into is that I had to set the client host as otherwise the websocket was trying to connect via my server rather than the dev-server.

options.client = {
  ...options.client,
  host: 'localhost',
};

[weaverryan]

I'm not sure if this is an issue for here, webpack-dev-server or pmmmwh/react-refresh-webpack-plugin but given this was the dependency I updated I thought I'd start at the top.

I'm not sure either :). One possible way to check would be to check HMR with Vue and see if it's behaving badly with the default config (i.e. does it also need liveReload = false)?

Another issue I ran into is that I had to set the client host as otherwise the websocket was trying to connect via my server rather than the dev-server.

Can you give some more information about this? What's the URL to your site/server? And were you using the normal http://localhost:8080 for the dev-server?

Thanks!

[hailwood]

Hi @weaverryan,

Sorry about the odd notification you would have just gotten here, posted the answer to your question on another issue here!
Anyway,

I don't use Vue so I'll leave that for someone who does to comment, on the other point - our site would be sitting at e.g.
https://mysite.lndo.site

The manifest file correctly points to https://localhost:8080/build/app.js and so we can load the javascript,
But then it attempts to open a wss connection to wss://mysite.lndo.site/ws rather than wss://localhost:8080/ws which means the live reloading doesn't work as it cannot get notified of changes.

Adding the host key under client as shown above fixes that issue, but I feel like that should probably be done automatically if hot is true?

[weaverryan]

Adding the host key under client as shown above fixes that issue, but I feel like that should probably be done automatically if hot is true?

hot is always true in webpack-dev-server v4. But yes, if your analysis is correct, Encore should always do this for you. But it wasn't an issue in webpack-dev-server v3 apparently. I'll need to try to replicate.

[weaverryan]

Hi again!

I can now confirm both items. I'm not sure why liveReload seems to "take over", but disabling restores HMR for me also.

About the client.host, that is also valid: I missed this entry in the webpack-dev-server v4 CHANGELOG:

client uses the hostname of the current location (location.hostname), by default. To get previously behavior, set the client.host with the hostname you'd like to set

For me, I'm using 127.0.0.1:8000 for my site and localhost:8080 for the dev-server. The web socket was using 127.0.0.1:8080, which is technically incorrect (it should be using localhost)... but it worked fine so I didn't notice. I'm not sure why/when you would want your web socket to NOT go to the dev-server hostname... I wonder why they changed that. Anyways, I'll need to make a PR to use the same hostname that's being used for the dev-server.

[hailwood]

Thanks for the update @weaverryan , and thank you for all your work on this!

Since you've got that PR in progress, feel free to close this issue whenever you'd like 👍