Failed to resolve import @capacitor imports when building for other modes

[Excel1]

What happened?

1. Upgraded to Quasar v2 from v1
2. Run ">quasar dev"

ERROR

[plugin:vite:import-analysis] Failed to resolve import "@capacitor/preferences" from "src/boot/i18n.ts". Does the file exist?

1  |  import { defineBoot } from "#q-app/wrappers";
2  |  import { createI18n } from "vue-i18n";
3  |  import { Preferences } from "@capacitor/preferences";
   |                               ^
4  |  import messages from "src/i18n";
5  |  const { value } = await Preferences.get({ key: "locale" });

For my example Repo the same:

1. Create new Quasar App
2. Add capacitor mode
3. use capacitor package

What did you expect to happen?

That everything works as usual like if im using ">quasar dev -T mobile"

Reproduction URL

Edit by maintainers: removed as it does not reflecting the actual issue and is confusing

How to reproduce?

1. Create new Quasar App
2. Add capacitor mode
3. use capacitor package

(Just clone repo and run quasar dev)

Flavour

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

Areas

SPA Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(6.8.0-49-generic) - linux/x64
NodeJs - 18.18.2

Global packages
  NPM - 9.8.1
  yarn - Not installed
  pnpm - 9.5.0
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 2.5.4
  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 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.14 -- 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.0 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.0.2 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.16.0 -- 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 - Not installed
  register-service-worker - Not installed
  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
  *None installed*

Relevant log output

No response

Additional context

If you use capacitor dev for mobile it works as expected.

Workaround is to set an alias in quasar config:

      alias: {
        '@capacitor/preferences': '/src-capacitor/node_modules/@capacitor/preferences'
      },

Maybe related to: vitejs/vite#18790 (comment)

Thank you @yusufkandemir for figure it out!

[rstoenescu]

Hi,

This is expected. You are building all modes with that capacitor import statement.
What you should do instead is separate the capacitor stuff into a boot file that is only available for capacitor builds:

// quasar.config file
boot: [
  ctx.mode.capacitor
    ? 'my-boot-file'
    : null // or some non capacitor boot file
]

[yusufkandemir]

@rstoenescu it was working on app-vite v1. Let aside importing things with regular import, even dynamic import with conditionals is not working:

if (process.env.MODE === 'capacitor') {
  const { Preferences } = await import('@capacitor/preferences');
  const { value } = await Preferences.get({ key: 'locale' });
  currentLocale = value || currentLocale;
}

[rstoenescu]

It means it must be a change that was introduced in Vite 3/4/5 or 6.
Nothing we can do about it, unfortunately.

But the solution with the separate boot files will still work.

[rstoenescu]

Also, alias should use absolute paths, not relative. I think this is the real problem.

[Excel1]

@rstoenescu

I tried using alias and its works but not for sub-imported packaged.

I dont know, its related but in my case (the exact same configurations with this project: eslint config, packages and package versions, prettierrc) my IDE and eslint cant find $t from i18n but it builds without errors.

[rstoenescu]

So, to be more explicit. Only this is required in quasar.config file. Builds all modes correctly.
Will ponder on how to auto-manage this. But for now, the workaround:

import { fileURLToPath } from 'node:url'
// ....
build: {
  alias: {
    '@capacitor/preferences': fileURLToPath(new URL('./src-capacitor/node_modules/@capacitor/preferences', import.meta.url))
  },

[Excel1]

@rstoenescu

The workaround seems to work. Unfortunately, $t of i18n is supposedly non-existent. I can build it without problems but eslint/vue-tsc give me errors for it.

[yusufkandemir]

@Excel1 please create a separate issue for it with proper information. You have been saying the same things on Discord as well, but unfortunately, it's impossible to help without a reproduction.