Hot Reload doesn't work when creating project with TypeScript support (Class based)

[ronniechew]

Hot reload does not work when you create new project with quasar create with TypeScript support.
Tried creating a new project without TypeScript and hot reload work out-of-the-box as expected.

To Reproduce
Steps to reproduce the behavior:

1. quasar create test-quasar-ts
2. quasar dev
3. Edit index.vue and save
4. Observe the change in browser - nothing changes

Expected behavior
Hot reload should work and reflect changes on the fly

Platform (please complete the following information):
Quasar Version: 1.2.1
@quasar/app Version: 2.0.4

Quasar mode:

• [ X ] SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• [ X ] SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Windows_NT(10.0.18363) - win32/x64
Node: 14.17.0
NPM: 7.7.6
Yarn: 1.21.1
Browsers: Chrome Version 92.0.4515.159 (Official Build) (64-bit)
iOS:
Android:
Electron:

Additional context
It works fine when I do quasar create but not selecting TypeScript support.

[MatthewSH]

What create settings are you using? I'm currently using TypeScript and hot reload works for me.

[ronniechew]

@MatthewSH I've just created a new one but using Options API this time and it worked =)
The last few attempts all tried with Class based without success. Are you using Options API as well?

It failed when I selected class based component style.

Css Processor:
Sass with SCSS syntax
Features:
ESLint
TypeScript
Vuex
Axios
Component style:
Class based
ESLint preset:
Prettier
Package Manager:
Yarn

[MatthewSH]

I just created a project to confirm this. This issue that I experienced was in Quasar v2, not v1. Have no tested on v1.

Setup/Version Information

Create Options

CSS Preprocessor: None
Features: TypeScript
Component Style: Class
Dependency Management: NPM

Quasar Info

Node

NodeJS: 14.17.4

Global

NPM: 6.14.14
@quasar/cli: 1.2.1

Packages

quasar: 2.0.4
@quasar/app: 3.1.0
@quasar/extras: 1.10.12

I can confirm that with the class-based Vue/Quasar setup, the hot reload is not functioning correctly.

One thing for this:

It does detect changes and recompiles them, it does this every change I make. Upon further inspection with this, and I'll have to compare it to the functioning hot reload on another version but it is detecting the changes on the web end, just marking them as invalid?

Screenshots

[ronniechew]

Thanks @MatthewSH at least we know this is a genuine issue now and not just my laptop going crazy !
I'll just use Options API now and hope for this to be fixed soon.

cheers

[dickerpulli]

I can confirm that issue.
I also have created a new quasar app with typescript and class based.
Hot reload does not work in browser. The console (quasar dev) is fine, it recompiles, but the browser doesn't recognize.

Changes in the created Index.vue are not reloaded. Do the same change on an composition api based created app works well.

Maybe related to this?
vuejs/vue-class-component#521

[MatthewSH]

Thanks, @dickerpulli! Guess I missed it when I glanced through their repo, or I did miss it. I wasn't really looking though, just like scanning very quickly. That's on me.
Since this isn't a Quasar bug, it's probably not worth having open over here and everyone should move the conversation to vuejs/vue-class-component#521

However, it does look like the devs aren't acknowledging the issue so not sure how likely it is to be fixed.

[IlCallo]

Closing this in favor of #9302 which is where we're posting our findings on the problem

The invalid message into webpack dev server websocket is sent down both in Composition API and Class API, and it's probably meant to tell the frontend the current page is invalid/must be patched since there has been a change

The problem is related to Quasar interaction with Class API, eg. you won't get it into a Vue CLI project
We managed to pin point it to the usage of Quasar components in a component: it's probably a bug which affects our auto-loader, but we haven't been able to understand which weird interaction is causing it

We tried reaching for the core team, but the repo seems unmaintained since months

[IlCallo]

@ronniechew you wrote you're using Qv1, but we are aware these problems are only present on Qv2.
Can you check which version you're using?

[ronniechew]

@IlCallo I think that's the CLI version.

Here's my quasar info if that helps

Operating System - Windows_NT(10.0.18363) - win32/x64
NodeJs - 14.17.0

Global packages
NPM - 7.7.6
yarn - 1.21.1
@quasar/cli - 1.2.1
@quasar/icongenie - Not installed
cordova - 7.0.1

Important local packages
quasar - 2.0.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app - 3.1.0 -- Quasar Framework local CLI
@quasar/extras - 1.10.12 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.2.4 -- The progressive JavaScript framework for buiding modern web UI.
vue-router - 4.0.11
vuex - 4.0.2 -- state management for Vue.js
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@babel/core - 7.15.0 -- Babel compiler core.
webpack - 5.51.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.0.0 -- 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.2.2 -- TypeScript is a language for application scale JavaScript development
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed

Quasar App Extensions
None installed

[hawkeye64]

vuejs/vue-loader#1795

[IlCallo]

We found the culprit, a PR is under its way to vue-loader repo: vuejs/vue-loader#1897

[rstoenescu]

Seems that my PR has been merged and the vue-loader team has released a new version.
So upgraded to the new vue-loader in "@quasar/app" v3.1.9 -- highly recommended for those using the Class API.

Enjoy!

[rahimi-pouria]

Hi @dickerpulli, yes for me didn't work on Index.vue too, and that forced me to change the file name to be solved.