Prevent page refresh after hot reload

[rb1193]

Frequently, webpack triggers an entire page refresh after hot reloading. This shouldn't be necessary - can we find a way to avoid this problem?

[mikedaviesweb]

I don't have much to add to this @rb1193, apart from I've experienced the same thing and is very annoying and slows down dev time.

Generally what I've seen happen is:

1. Vue component hot reloads
2. A few milliseconds after twig fully reloads resulting in a browser refresh.

A couple of things worth mentioning:

• This doesn't happen all the time, but 9/10 times it does.
• This wasn't happening at all on our previous webpack setup.

[moacode]

@mikedaviesweb does this happen when saving Vue components or Twig files? I noticed this happened when saving Twig files using the old Webpack setup but it shouldn't happen when saving Vue SFCs.

[rb1193]

@thejoshsmith I've seen it with Vue SFCs too

[mikedaviesweb]

Hey @thejoshsmith, yes this happens with Vue SFCs. Say you add some new data to the vue component, and output it in the template, on save the vue component hot-reloads and you see the new data in browser, then the page completely refreshes, happends 9/10 times.

[rb1193]

I think I've gotten to the bottom of this, but I need to confirm the appropriate solution with @judereid and @thejoshsmith. I believe this is caused by both the legacy and modern webpack configs running their own hot reload process - on the second request for hot-update.json a 404 is returned, presumably because that file got replaced by the other process. It appears in some cases the file is accessed before the other process replaces it, hence we only see the issue intermittently.

When I comment out the legacy config, hot reload appears to work as expected (I've triggered over a dozen with no problem, with various page refreshes in between). Do we even need a legacy config for development? If we do, would it not be better to pass an isLegacy environment param via the start script and build a single config off of that, rather than building both configs on every occasion? I'm actually surprised exporting two configs from webpack.dev.js works at all, but I'm guessing there's a gap in my understanding.

[judereid]

@rb1193 The legacy build shouldn't be included by default (with npm run dev), and only run when then environment variable BUILD_TYPE is explicitly set to legacy or combined (using the npm run dev-legacy or npm run dev-combined commands).

If the combined build is running by default, that's definitely a bug.

cc @thejoshsmith

[rb1193]

Ok, looks like this one is already fixed in the latest version 🎉 I was running into this a lot on Lyttelton but I've updated Craft webpack to the latest version locally and am now unable to reproduce, unless I specifically run the "dev-combined" command which runs both the legacy and modern configs. I may open a PR to remove the combined option as Jude and I aren't really convinced it has a valid use case.

@mikedaviesweb do you want to try upgrading any projects you're having issues with to the latest version of craft-webpack and seeing if that resolves the issue?

[mikedaviesweb]

Hey @rb1193, sounds good! Next time I'm on the NPC project I'll upgrade and see if the issues is resolved.

[moacode]

Ah yes, I added support for legacy/modern builds in v1.4.0. The use case for running a legacy bundle in development is so you can check IE11 (or other legacy browser) compatibility in tools such as BrowserStack without having to perform a build each time.