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? https://github.com/vuejs/vue-class-component/issues/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 https://github.com/vuejs/vue-class-component/issues/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 https://github.com/quasarframework/quasar/issues/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]

https://github.com/vuejs/vue-loader/issues/1795

[IlCallo]

We found the culprit, a PR is under its way to vue-loader repo: https://github.com/vuejs/vue-loader/pull/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.