Unexpected HMR behavior

[DavidReinberger]

Hey everyone, I'm trying to setup vue with meteor, unfortunately I can't get the same developer UX like with vue-cli or webpack. Meteor reloads the page most of the time instead of replacing the module. See this repo https://github.com/DavidReinberger/vue-meteor-hmr-test.

Try to edit any of the vue files inside the import directory, after first edit, most of the time, HMR kicks in properly and reloads the module, after editing it for the second time, it reloads the whole app :/

Any idea why?

[marvinside]

Having the same Problems.

As a Workaround you can Fork the Package vue-component-dev-client, symlink it to /packages in your Meteor project folder (overrides Repository, Meteor will then use the local version).

Then add _suppressNextReload = true; after Line 201 in the dev-client.js (Or checkout https://github.com/meteor-vue/vue-meteor/pull/347)

Also you might have to do this: (Not in PR currently)

setTimeout(()=>{
  _suppressNextReload = true;
}, 300);

As your Project grows bigger, there will be some delay on some stuff. So you have to supress again after a short time. I have not investigated why this is needed a second time. Feel free to help.

[DavidReinberger]

Hi @marvinside thanks for the comment it prompted me to investigate further! AAAAND I've found a solution to our problem. Nevertheless I'm not 100% sure about the implications.

Basically the debounce in vue-component/vue-compiler.js is too long for the compiler to pickup fast changes and secondly, meteor reloads every time simply because the compiler adds .js extension to every .vue file, which is afterwards picked up by the meteor ecmascript package thus reloading the app.

I'll be happy to submit a PR to this repo. @mitar could you please shed a little bit of light, why the debounces and .js extension? Thanks!

Update: the reloads are still there unfortunately

[mitar]

I am no familiar with this code.

[DavidReinberger]

Ah sorry, saw you as the only "people" here, should have tagged @Akryum

[DavidReinberger]

Alright after further observations: If you are not using client/server folder in your imports folder (tested on custom package)

1. the server is going to get reloaded which gets you a very unexpected behavior with the debounce
2. slow reloads

If you are using client folder in your imports folder (tested on vanilla package)

1. The App only reloads the client
2. The app reloads after any change (because FE migrations)
3. The 'changed' event is sent multiple times - thus the debounces i guess?

EDIT: In conclusion I've wasted a few hours and the best solution is to use the imports/client folder + Reload._onMigrate(() => null);

[mathieustan]

Reload._onMigrate(() => null); doesn't refresh JS in vue component :(

[Akryum]

It should be better with latest release.