Hot reload in Quasar Dev is broken

[athamour1]

Describe the bug
Hot reload in Quasar Dev is broken

Codepen/jsFiddle/Codesandbox (required)
Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.

To Reproduce
just open a quasar project in dev and go in the console inside the browser

Screenshots

Platform (please complete the following information):
Quasar Version : 3.0.2
@quasar/app Version : "^3.0.0"

OS : 5.12.16-1-MANJARO
Node : v16.4.1
NPM : 7.18.1
Yarn : 1.22.10
Browsers : [ "Firefox Dev 90.0b12 (64-bit)", "Google Chrome 91.0.4472.114 (Official Build) (64-bit)" ]

Additional context
I have heard from several friends, have the same problems in windows.

[hawkeye64]

I have lot (LOTS!) of projects for Quasar v2 and non-of them have broken HMR. I would check your environment. Maybe a firewall or some other watcher of your ports.

hmr-works.mp4

[hawkeye64]

Maybe try a different port, too

[athamour1]

thats a good idea i will try to replicate the problem in a clean installation and in a new port.

[oefeningen]

I have the same problem. I've made a video to show you what happens.
I used a brand new quasar project. (but it occured also in all my other v2 projects, v1 projects work fine)
When i change something in the data, the changes are not visible, allthough you see the reloading in console. When i change something in the template, you can see the changes directly, but only those in the template, not the data.
I have to manually refresh to see the changes.

problemHRM.mp4

[therealcoder1337]

i have a similar error: hmr doesn't work then changing a file in linked dependencies, e. g.

• cd my-quasar-project
• npm link my-local-dependency
• change something in "my-local-dependency"
• change gets noticed, it looks like it's rebuilding
• but change doesn't become visible, even after f5

error doesn't seem to come from quasar tho, since i tried to downgrade:

» Pkg quasar........ v2.0.0-beta.16
» Pkg @quasar/app... v3.0.0-beta.28

error still persisted.

i also tried a node version downgrade from v16 to v14 but that didn't help either.

os: arch linux

any other ideas?

edit: it's not just linked dependencies, it's dependencies per se. at least transpiled ones. maybe i will open a separate issue tomorrow.

[zeroinformatique]

There is a similar issue here : #9302

I encountered this bug with Hot-Reload as well.

[therealcoder1337]

the quasar team could try updating the webpack-dev-server to rc.0. now @quasar/app uses the outdated webpack-dev-server version beta.3. it should not be too much work doing the update (and other related ones maybe; watch out for breaking changes, though) and maybe this could fix some of the issues here.

[hawkeye64]

@therealcoder1337 #10289

[therealcoder1337]

@hawkeye64 there are some breaking changes, though. i tried it locally and quasar didn't launch because some webpack-dev-server options got renamed, apparently.

edit: it seems changing firewall: false option to allowedHosts: 'all' in quasar-conf-file.js helps avoiding the error on startup. but for me it still hangs; now at Chaining "UI" Webpack config.

references:
https://github.com/webpack/webpack-dev-server/pull/3345/files

quasar/app/lib/quasar-conf-file.js

Line 609 in 78df1f4

firewall: false,

[therealcoder1337]

i did some more local experiments. after changing the webpack-dev-server's option firewall: false to the rc.0 allowedHosts: 'all' to avoid validation errors (as described previously), it now seems the webpack compiler hook in app/lib/dev-server-regular.js doesn't fire the compiler.hooks.done.tap('done-compiling', ... hook and hence the dev server does never start (unresolved promise). i also updated the other dependencies of quasar/app, but those seem to be mostly minor versions, except a types package. for a team member with some webpack experience, this should be easy to trace down and fix, i guess.

i know i am just some random internet dude but i would still advise to use the newest versions possible (if not possible, fine - vue cli still uses webpack-dev-server@3.x) and not some months old beta package in a quasar final. at the very least this would help to minimize the chance for problems. thank you for your time and work.