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: quasarframework/quasar-template-default#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.

[jniclas]

I use Docker with WSL2 on Windows Home. Hot reloading works for my quasar container, if I add the environment variable

CHOKIDAR_USEPOLLING: 1

to the docker-compose.yml.

[TobyMosque]

https://docs.microsoft.com/en-us/windows/wsl/compare-versions#exceptions-for-using-wsl-1-rather-than-wsl-2

We recommend that you use WSL 2 as it offers faster performance and 100% system call compatibility. However, there are a few specific scenarios where you might prefer using WSL 1. Consider using WSL 1 if:

Your project files must be stored in the Windows file system. WSL 1 offers faster access to files mounted from Windows.
If you will be using your WSL Linux distribution to access project files on the Windows file system, and these files cannot be stored on the Linux file system, you will achieve faster performance across the OS files systems by using WSL 1.
A project which requires cross-compilation using both Windows and Linux tools on the same files.
File performance across the Windows and Linux operating systems is faster in WSL 1 than WSL 2, so if you are using Windows applications to access Linux files, you will currently achieve faster performance with WSL 1.

While using WSL2, your project must be stored at the linux file system. eg: ~/path/to/the/project (or in the windows: \\wsl$\{distro_name}\home\{user_name}\path\to\the\project)
if for some reason, u need to store the project in the windows file system, probably u'll be better with the WSL1

[avesus]

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.

Was that issue solved somewhere somehow? Really uncomfortable to fill up all 50 form fields on 10 steps of the stepper component again after every change. Have to add manually localStorage etc.

[rahimi-pouria]

for me not only for HMR but also the file hadn't changed after saving because my file name was "index.vue", I changed my file name to something else and this problem was solved.