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.

[therealcoder1337]

okay, so i found a way to get the newest webpack-dev-server version running for me (spa) and it also seems to fix the worst bugs regarding linked modules. now i only have to press f5 to see the changes, which is far better than rebuilding the whole app...

here's what i did, but beware that this could probably introduce problems in error handling and other areas; try at your own risk:

on a local, linked version of @quasar/app:

1. steps outlined in the previous comments
2. in file dev-server-regular.js, replace the function listen() with this:

  listen () {
    const cfg = this.quasarConfFile.quasarConf
    const webpackConf = this.quasarConfFile.webpackConf

    return new Promise(resolve => {
      const compiler = webpack(webpackConf.renderer)

      compiler.hooks.done.tap('done-compiling', stats => {
        if (this.__started) { return }

        // start dev server if there are no errors
        if (stats.hasErrors() === true) {
          return
        }

        this.__started = true
      })

      // start building & launch server
      this.server = new WebpackDevServer(compiler, cfg.devServer)
      compiler.compile(() => {
        this.server.listen(cfg.devServer.port, cfg.devServer.host, () => {

          if (openedBrowser === false) {
            openedBrowser = true

            if (cfg.__devServer.open && ['spa', 'pwa'].includes(cfg.ctx.modeName)) {
              openBrowser({ url: cfg.build.APP_URL, opts: cfg.__devServer.openOptions })
            }
          }

          resolve()
        })
      })
    })
  }

the hook wasn't called until i called compiler.compile(), where i put the stuff to start the dev server and resolve the promise in the callback.

[FlxEd]

There is a similar issue here : #9302

I encountered this bug with Hot-Reload as well.

Facing the same issue as well

[IlCallo]

@therealcoder1337 @athamour1 have you tried q/app v3.1.0 released last week?
webpack-dev-server have been updated to its stable release, do you still have the HMR problem mentioned here?

[zeroinformatique]

I just tested it on my project, no luck, the HMR is still dead.

[danbars]

Same problem with an SPA project in quasar V2 that worked just fine, but now seems to hot-reload only the first update. After that the browser does not update. Only stop and start of the server fixes it.

The terminal shows successful recompile, the browser console shows

[webpack-dev-server] App hot update...
[HMR] checking for updates on the server...
[HMR] Nothing hot updated

In some cases the last line is printed 10`s of times a second as you can see in the image

Related (all of them unanswered):
#9910
https://forum.vuejs.org/t/vue-loader-hot-reload-failing/116265
#9104
#9871

This problem seems to be happening at least from April.
Couldn't find evidence for it in vue-loader not-related to quasar.

[danbars]

FOUND IT!
At least in my case this was the issue - my routes config had an import with a typo: pages/transform.vue instead of pages/Transform.vue

For some reason this worked, but it made hot-reload broken.
If the import itself would have failed I'd probably find the issue earlier because my page would not load at all.

Hope this will help someone

[hawkeye64]

vuejs/vue-loader#1795

[therealcoder1337]

have you tried q/app v3.1.0 released last week?
webpack-dev-server have been updated to its stable release, do you still have the HMR problem mentioned here?

@IlCallo yes, the problem persists even after upgrading all dependencies.

[rstoenescu]

Whatever it is, it is an external problem (either Webpack or webpack-dev-server), out of our reach.

Is this still happening with @quasar/app v3.1.5? (webpack-dev-server is now 4.3.1)
Only answer if your issue is not related to HMR for node_modules (because webpack 5 is no longer watching that folder).

[nitwhiz]

yes, still happening, i just set up a fresh project. changing something within the linksList in the boilerplate project does not reflect in browser.

console doesn't output anything beyond

[HMR] Waiting for update signal from WDS...
[Quasar] Running SPA.

so no "finished compiling" or anything like that in console.

Meta:

 » Dev mode.......... spa
 » Pkg quasar........ v2.1.9
 » Pkg @quasar/app... v3.1.5
 » Transpiled JS..... yes (Babel)

Running on Linux, used TypeScript + Composition API Style

[hawkeye64]

I have not had this issue once and the only difference is typescript. Something in the toolchain is broken. The hard part is figuring out what. It'll be interesting to see if this is still an issue with the Vite plugin Razvan is working on.

[rstoenescu]

Think I found the culprit.
Please retry with "@quasar/app" v3.1.6.

[mesqueeb]

@rstoenescu every since 3.1.6 I get these errors, and cannot launch the dev server anymore:

[mesqueeb]

Edit: fixed when removing the ESLint stuff:

I can live without it for now.

[rstoenescu]

@mesqueeb No way around it. The exclude: /node_modules/ does not match your symlinked stuff anymore. So you'll have to add them to the regex.

[kamasuPaul]

Think I found the culprit. Please retry with "@quasar/app" v3.1.6.

I dont think changing to "@quasar/app" v3.1.6. solves the issue. This is still an issue in spa mode

[mariojgt]

Found the error, just in case someone is looking for in your routes files make sure your path has the correct name including the capitals.

[furches-cadre5]

An app I've been working on for months just abruptly stopped hot reload. I have another app that works fine. I have the same versions of quasar, vite, and vue in both. Any thoughts?

[Techn1c4l]

An app I've been working on for months just abruptly stopped hot reload. I have another app that works fine. I have the same versions of quasar, vite, and vue in both. Any thoughts?

Same here, just stopped working since I updated Vue, Quasar and other packages to the latest version. Only CSS changes are updated without refreshing the page. Async components (loaded through defineAsyncComponent) are refreshed only if you unmount and mount them again.

[tufantoksoz]

I have two different Quasar projects in my monorepo.
One of them is working but the other one hot reload is not working. Only Css are updated without refresh page

[patrickmonteiro]

I'm also facing the same problem, I'm trying to update classes in the css, the browser identifies the change by sending a console.log() but it doesn't update the component on the screen.

Quasar info:

Operating System - Darwin(23.3.0) - darwin/arm64
NodeJs - 21.2.0

Global packages
NPM - 10.2.3
yarn - 1.22.19
@quasar/cli - 2.4.0
@quasar/icongenie - 2.5.4
cordova - Not installed

Important local packages
quasar - 2.15.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.8.0 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.3.0
pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
vuex - Not installed
vite - 2.9.15 -- Native-ESM powered web dev build tool
eslint - 8.41.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed