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): https://github.com/vuejs/vue-loader/pull/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

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: https://github.com/vitejs/vite/issues/8224, https://github.com/vitejs/vite/issues/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: https://github.com/vuejs/core/commit/4b5b384485cf8f6124f6738b89e3d047358f3a11 https://github.com/vuejs/core/commit/94fa67a4f73b3646c8c1e29512a71b17bd56efc3

[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*