Quasar: hot reload not working

[lemesdaniel]

I'm testing quasar and I'm very excited, but not working hot reload.
My index.value file is changed and nothing happens
Can you help me?

[rstoenescu]

Can you post a small example so I can take a look, please? A .zip containing your project folder or a github link.

[lemesdaniel]

I did not do anything, just create the application quasar init
then ran the quasar dev and change the component title that has already created it does not change anything, I need to the server and start again to see the changes

[rstoenescu]

It works 100% out of the box.
Let's see what fails on your specific machine. What is the OS and its version. What NPM do you have installed.

You mention about "index.value" file, but there is no such file.. Hot reload works on .vue files only. Any other file should just trigger a refresh.

[lemesdaniel]

My apologises, the file is index.vue

I'm using Ubuntu 16.04, npm 3.7.4 and node 5.8.0

[rstoenescu]

This is really curious. It does not work on your machine only. Verified again with the official Quasar template and it works.

Let's go deeper, try an official Vue app template and tell me if hot reload works after changing App.vue file:

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Thanks!

[rstoenescu]

Please reopen this bug if the official Vue app template works.

[rstoenescu]

There's one more thing. Hot reload does not update the state of any component. What I mean is that it doesn't update the "data" of Vue components. This would defeat the purpose of hot reload which should update everything else BUT maintain the state ("data") of the app.

[Vaerum]

Found a solution. Read here: https://github.com/quasarframework/app-template-default/issues/10

[abhijit-padhy]

Try adding -- --reset-cache to your run command.
*for Linux OS

Ref:
https://www.reddit.com/r/reactnative/comments/8mlelt/hot_reloadinglive_reload_stopped_working_how_do_i/

[xavier-rodet]

My hot reload is not working aswell even with a fresh new quasar SPA project.

My informations:
Note that i'm running on Windows 10 WSL2 with Ubuntu 18.04.5 LTS

Operating System - Linux(4.19.104-microsoft-standard) - linux/x64
NodeJs - 12.18.3

Global packages
  NPM - 6.14.6
  yarn - 1.21.1
  @quasar/cli - 1.1.0
  @quasar/icongenie - 2.3.1
  cordova - Not installed  

Important local packages   
  quasar - 1.13.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.0.8 -- Quasar Framework local CLI
  @quasar/extras - 1.9.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.5.1 -- state management for Vue.js       
  electron - 7.3.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed   
  @capacitor/cli - Not installed    
  @capacitor/android - Not installed
  @capacitor/ios - Not installed    
  @babel/core - 7.11.4 -- Babel compiler core.
  webpack - 4.44.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development

Quasar App Extensions
  *None installed*

What i tried:

• Delete node_modules + package-lock.json + yarn.lock & run yarn install
• Run chown on project
• Increased max_user_watches
• Run as sudo

I also tried what you suggested with a fresh official Vue app template, and in this case Hot Reload is working just fine...
This is driving me crazy :(

Note: I had to install @quasar/cli with NPM because if i install it with Yarn I got this error:
Quasar CLI · [.eslintrc.js] Missing helper: "if_eq"

[xavier-rodet]

Ok so after more research, my issue was coming from WSL2 which have issues tracking changes from a Windows drive filesystem.

The solution for me was to add watch poll option in quasar.conf.js :

    devServer: {
      https: false,
      port: 8080,
      watchOptions: {
        poll: 1000 // Check for changes every second
      },
      open: true
    },

Hot reload is now working back again :-)

[resu511]

Ok so after more research, my issue was coming from WSL2 which have issues tracking changes from a Windows drive filesystem.

The solution for me was to add watch poll option in quasar.conf.js :

    devServer: {
      https: false,
      port: 8080,
      watchOptions: {
        poll: 1000 // Check for changes every second
      },
      open: true
    },

Hot reload is now working back again :-)

Had the same problem on a Deb 10 environment and can confirm that this solution works for hot-reloading.
Thanks @xavier-rodet

[rstoenescu]

For whoever else is reading this: use Node v12 LTS. Any newer version of Node is not well supported by webpack v4 in regards to file watchers.