HMR Not Working When Using Pinia in a New Quasar Project

[bierdok]

What happened?

When creating a new Quasar project without Pinia, hot module replacement (HMR) works as expected. However, when creating a new Quasar project with Pinia, HMR does not function properly.

What did you expect to happen?

HMR should work seamlessly regardless of whether Pinia is included in the project or not.

Reproduction URL

https://codepen.io/rstoenescu/pen/xxEvBLR

How to reproduce?

1. Create a new Quasar project without Pinia:

   • Initialize a new Quasar project.
   • Do not select Pinia during the setup process.
   • Open the project and start the development server.
   • Expected result: HMR works as expected.

2. Create a new Quasar project with Pinia:

   • Initialize another new Quasar project.
   • Select Pinia during the setup process.
   • Open the project and start the development server.
   • Observed issue: HMR does not work properly.

3. Compare the differences between the two projects:

   • Check the package.json and yarn.lock files for differences.
   • Identify additional dependencies introduced by Pinia.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(6.6.51+rpt-rpi-2712) - linux/arm64
NodeJs - 20.18.2

Global packages
  NPM - 10.8.2
  yarn - 1.22.22
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.8 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.16 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - 2.3.1 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.0.11 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.18.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - talkops-pwa.picoux.com
  eth0 - 172.18.0.8

Relevant log output

yarn.lock
708c708
< "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
---
> "@vue/devtools-api@^6.6.4":
2548,2555d2547
< pinia@^2.0.11:
<   version "2.3.1"
<   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.3.1.tgz#54c476675b72f5abcfafa24a7582531ea8c23d94"
<   integrity sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==
<   dependencies:
<     "@vue/devtools-api" "^6.6.3"
<     vue-demi "^0.14.10"
< 
3444,3448d3435
< 
< vue-demi@^0.14.10:
<   version "0.14.10"
<   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
<   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==

Additional context

No response

[josepcrespo]

Good research. I too noticed the loss of HMR functionality but I didn't know at what point in the development of the project it happened or why (I also use Quasar CLI with Vite). It would be good to investigate the reason behind this conflict between Pinia/Quasar/HMR.