Capacitor dependencies in ".quasar" removed after "quasar prepare" ("@quasar/app-vite": "^2.0.0-rc.4")

[loicngr]

What happened?

When I add Capacitor to my project with quasar mode add capacitor it adds new paths in ./.quasar/tsconfig.json.
Here is the file:

./.quasar/tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "esnext",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "module": "preserve",
    "noEmit": true,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable"
    ],
    "strict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitOverride": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true,
    "paths": {
      "src": [
        "./../src"
      ],
      "src/*": [
        "./../src/*"
      ],
      "app": [
        "./.."
      ],
      "app/*": [
        "./../*"
      ],
      "components": [
        "./../src/components"
      ],
      "components/*": [
        "./../src/components/*"
      ],
      "layouts": [
        "./../src/layouts"
      ],
      "layouts/*": [
        "./../src/layouts/*"
      ],
      "pages": [
        "./../src/pages"
      ],
      "pages/*": [
        "./../src/pages/*"
      ],
      "assets": [
        "./../src/assets"
      ],
      "assets/*": [
        "./../src/assets/*"
      ],
      "boot": [
        "./../src/boot"
      ],
      "boot/*": [
        "./../src/boot/*"
      ],
      "stores": [
        "./../src/stores"
      ],
      "stores/*": [
        "./../src/stores/*"
      ],
      "#q-app": [
        "./../node_modules/@quasar/app-vite/types/index.d.ts"
      ],
      "#q-app/wrappers": [
        "./../node_modules/@quasar/app-vite/types/app-wrappers.d.ts"
      ],
      "#q-app/bex/background": [
        "./../node_modules/@quasar/app-vite/types/bex/entrypoints/background.d.ts"
      ],
      "#q-app/bex/content": [
        "./../node_modules/@quasar/app-vite/types/bex/entrypoints/content.d.ts"
      ],
      "#q-app/bex/private/bex-bridge": [
        "./../node_modules/@quasar/app-vite/types/bex/bex-bridge.d.ts"
      ],
      "@capacitor/app": [
        "./../src-capacitor/node_modules/@capacitor/app"
      ],
      "@capacitor/app/*": [
        "./../src-capacitor/node_modules/@capacitor/app/*"
      ],
      "@capacitor/cli": [
        "./../src-capacitor/node_modules/@capacitor/cli"
      ],
      "@capacitor/cli/*": [
        "./../src-capacitor/node_modules/@capacitor/cli/*"
      ],
      "@capacitor/core": [
        "./../src-capacitor/node_modules/@capacitor/core"
      ],
      "@capacitor/core/*": [
        "./../src-capacitor/node_modules/@capacitor/core/*"
      ]
    }
  },
  "include": [
    "./**/*.d.ts",
    "./../**/*"
  ],
  "exclude": [
    "./../dist",
    "./../node_modules",
    "./../src-capacitor",
    "./../src-cordova",
    "./../quasar.config.*.temporary.compiled*"
  ]
}

On a new installation, after an npm install or quasar prepare it doesn't add new paths in the tsconfig.
Here's the tsconfig after an npm install or quasar prepare.

./.quasar/tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "esnext",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "module": "preserve",
    "noEmit": true,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable"
    ],
    "strict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitOverride": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true,
    "paths": {
      "src": [
        "./../src"
      ],
      "src/*": [
        "./../src/*"
      ],
      "app": [
        "./.."
      ],
      "app/*": [
        "./../*"
      ],
      "components": [
        "./../src/components"
      ],
      "components/*": [
        "./../src/components/*"
      ],
      "layouts": [
        "./../src/layouts"
      ],
      "layouts/*": [
        "./../src/layouts/*"
      ],
      "pages": [
        "./../src/pages"
      ],
      "pages/*": [
        "./../src/pages/*"
      ],
      "assets": [
        "./../src/assets"
      ],
      "assets/*": [
        "./../src/assets/*"
      ],
      "boot": [
        "./../src/boot"
      ],
      "boot/*": [
        "./../src/boot/*"
      ],
      "stores": [
        "./../src/stores"
      ],
      "stores/*": [
        "./../src/stores/*"
      ],
      "#q-app": [
        "./../node_modules/@quasar/app-vite/types/index.d.ts"
      ],
      "#q-app/wrappers": [
        "./../node_modules/@quasar/app-vite/types/app-wrappers.d.ts"
      ],
      "#q-app/bex/background": [
        "./../node_modules/@quasar/app-vite/types/bex/entrypoints/background.d.ts"
      ],
      "#q-app/bex/content": [
        "./../node_modules/@quasar/app-vite/types/bex/entrypoints/content.d.ts"
      ],
      "#q-app/bex/private/bex-bridge": [
        "./../node_modules/@quasar/app-vite/types/bex/bex-bridge.d.ts"
      ]
    }
  },
  "include": [
    "./**/*.d.ts",
    "./../**/*"
  ],
  "exclude": [
    "./../dist",
    "./../node_modules",
    "./../src-capacitor",
    "./../src-cordova",
    "./../quasar.config.*.temporary.compiled*"
  ]
}

I could be wrong, but I don't think this is intentional behavior.

What did you expect to happen?

After an npm install, it shouldn't delete the Capacitor “paths” in the tsconfig.json.

Reproduction URL

https://github.com/loicngr/quasar-rc-capacitor

How to reproduce?

• Clone project
• Do npm install
• Do quasar mode add capacitor
• Check ./quasar/tsconfig.json. There are Capacitor paths
• Do npm install again.
• Check ./quasar/tsconfig.json. There are not Capacitor paths

Flavour

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

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), TypeScript Support, Capacitor Mode

Platforms/Browsers

Chrome, Android

Quasar info output

Operating System - Linux(6.8.0-48-generic) - linux/x64
NodeJs - 22.6.0

Global packages
  NPM - 10.3.0
  yarn - Not installed
  pnpm - 9.12.3
  bun - 1.0.26
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-rc.4 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.13 -- 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.4.5
  pinia - 2.2.6 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.4.11 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.1 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.0 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.5.4 -- TypeScript is a language for application scale JavaScript development
  workbox-build - 7.3.0 -- A module that integrates into your build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - 6.2.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 6.2.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-unit-vitest - 1.1.0 -- A Quasar App Extension for running tests with Vitest

Networking
  Host - lwf
  wlp0s20f3 - 192.168.10.114
  br-ffd2d62ff870 - 172.18.0.1

Relevant log output

No response

Additional context

No response

[yusufkandemir]

It checks "is the active mode Capacitor" to decide whether it should add Capacitor deps. So, when you run quasar mode add capacitor, it runs as the active mode set to Capacitor and correctly generates them. But, if you run quasar prepare, it generates for SPA(default) mode. After seeing your issue, I thought of two cases:

1. If the user is only using Capacitor:

• quasar prepare doesn't accept a --mode/-m parameter, so the user can't really use quasar prepare. But, it should be fine otherwise with running quasar dev/build
• Since they don't use other modes, the deps will always be recognized.

2. If the user is using Capacitor and some other modes:

• quasar prepare will work fine when they are building for non-Capacitor modes
• Running dev/build for Capacitor will work fine. But, type-checking/linting scripts will fail on non-Capacitor modes as they won't recognize the deps and scan all the files. The build will also probably fail because TS won't care/detect whether you are importing/using the dependency only under certain conditions.

So, all in all, I think we should adjust the logic to always add aliases for Capacitor deps, if the user has Capacitor mode.