Hot reloading issue

[tianhuat]

Hi I am using Quasar CLI with latest Quasar downloaded yesterday in Windows 10. I have some issues with hot reloading highlighted here: https://www.loom.com/share/3137f7ac86974af78a222a207b7c375e, what is the problem?

[MilosPaunovic]

There has been a few discussions about a hot reloading issues in the past few weeks:
https://github.com/quasarframework/quasar/discussions?discussions_q=hot+reload

Check it out to see if you could find a workaround there.

[hawkeye64]

@tianhuat If you are using the Class API, then it's been recently fixed (today): vuejs/vue-loader#1897

We will have our own release soon.

[rstoenescu]

This seems to be something different, for TS + Options API.

[hawkeye64]

@rstoenescu He is using q/app v3.1.8 in the video. The HMR fix is in q/app v3.1.9...

[rstoenescu]

His issue has nothing to do with the fix for TS + vue-class-component. He is not using the Class API. @hawkeye64

[Smrtnyk]

I am facing same issues occasionally with HMR not working when changing something in template
using ts + script setup
It happens when I change color of the q-btn for example, the changes are not reflected, I need to manually reload

[J3m5]

I don't know if it's related or if it can help but I'm facing the same issue as @Smrtnyk but with vite and script setup on q-btn props.

EDIT
Versions used:

  "dependencies": {
    "@quasar/extras": "^1.11.5",
    "@vueuse/core": "^6.8.0",
    "pinia": "^2.0.2",
    "vue": "^3.2.16",
    "vue-router": "4"
  },
  "devDependencies": {
    "@quasar/vite-plugin": "^1.0.2",
    "@vitejs/plugin-vue": "^1.9.4",
    "quasar": "^2.3.0",
    "sass": "1.43.4",
    "unplugin-vue-components": "^0.17.2",
    "vite": "^2.6.13"
  }

[sullyD64]

I am facing the same problem shown in the video (HMR not working when adding props/attributes to elements). I am using TS with composition API without script setup, with @quasar/app v3.1.10.

[tianhuat]

Hi @hawkeye64 @rstoenescu, I have updated to @quasar/app v3.1.10, the above problem seems to be resolved, but I faced another hot reloading problem:
https://www.loom.com/share/4afe701837a4481b9120d83f49a9d0ee

I attached the code here for your testing convenient:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-input dense rounded outlined v-model="text" label="eer" />
      </q-toolbar>
    </q-header>
  </q-layout>
</template>

[Smrtnyk]

Vue has fixed some stuff regarding hmr in latest release
https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md
not sure if it is something that relates to issues we have mentioned here

[J3m5]

I have updated the dependencies and it seems to be fixed now.

[tianhuat]

Hi, how do we upgrade to the latest vue version and test in the existing Quasar project?

[Smrtnyk]

if you are using quasar cli you don't, you wait for quasar to upgrade
you can add the dependency manually to your package.json but I wouldn't go using that route

[hawkeye64]

@quasar/app should be updated/released this weekend
The HMR updates are related to <script setup lang="ts">

[zookz]

I do still face this problem. both with or without the "setup" in the script tag <script setup lang="ts">

I started a new quasar project using the CLI - Quasar 2 Vue 3 with Typescript and Vite
When I add a q-input with a v-model to a ref() it works, but Hot Reload is not working anymore for the q-input field.

[yusufkandemir]

I can confirm this problem in some of the local projects, I created some repros in StackBlitz to showcase the problems. The repros use Quasar CLI with Vite without TypeScript, but the problem also exists when using TypeScript.

• <script setup>: https://stackblitz.com/edit/quasar-vite-weird-hmr-behavior?file=src%2Fpages%2FIndexPage.vue

• <script>: https://stackblitz.com/edit/quasar-vite-weird-hmr-behavior-without-script-setup?file=src%2Fpages%2FIndexPage.vue

  • Second test case from <script setup> stops working when using regular <script>

[geminigeek]

i am having similar issue, i an using script setup + vite + js , my issue is only in composable , the hot reload is not working in composable file changes rest child parent components working fine

my structure of app layout>loginPage>loginComponent the login component and login page both uses the loginComposable < here changes are not reflecting

[hawkeye64]

I believe this is a known issue with Vite, but don't have the capacity to find the issue # right now.

[yusufkandemir]

Might be related: vitejs/vite#8224, vitejs/vite#7839

[AleksKamb]

Problem still persists.
Changing color on q-btn doesn't get reflected, however changing color on a q-badge does.

App Setup Info

Operating System - Darwin(22.2.0) - darwin/x64 NodeJs - 16.14.2

Global packages
NPM - 8.5.0
@quasar/cli - 2.0.0
@quasar/icongenie - 2.5.1

Important local packages
quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-webpack - 3.7.1 -- Quasar Framework App CLI with Webpack
@quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations

vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.0.15

vuex - 4.0.2 -- state management for Vue.js
@babel/core - 7.14.6 -- Babel compiler core.
webpack - 5.59.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 - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
workbox-webpack-plugin - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
@capacitor/core - 3.4.3 -- Capacitor: Cross-platform apps with JavaScript and the web
@capacitor/cli - 3.4.3 -- Capacitor: Cross-platform apps with JavaScript and the web
@capacitor/ios - 3.4.3 -- Capacitor: Cross-platform apps with JavaScript and the web`

[J3m5]

This might fix the problem when vue 3.3 is out:
vuejs/core@4b5b384
vuejs/core@94fa67a

[Walnussbaer]

Since we moved to using the script setup syntax we are also experiencing this problem. Whenever I write a new component I have to manually restart the dev server. Component changes also require a restart sometimes. We are using Quasar 2.12.0 with Vue 3.3.4 and WebPack

[muhdammar]

Just found out, i forgot to change component path in route file. Before this i rename the folder of component. Now it fixed and working fine.

[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

[patrickmonteiro]

Somehow I managed to solve it by updating the quasar packages and also updating other packages in my project with yarn outdated command. 🚀

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.1 -- 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.10 -- 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

Quasar App Extensions
  *None installed*