Erreur Vue/Quasar : Cannot find module '#q-app/wrappers'
Cet article a été traduit de l’original coréen avec l’aide d’une IA. Les prix entre parenthèses sont des conversions approximatives. Lire l’original en coréen →
 |
| Aaaaarghhjdkslsdf |
Vous rencontrez probablement l'erreur suivante, ou bien celle juste en dessous.
Ou encore :
ERROR(vue-tsc) Cannot find module '#q-app/wrappers' or its corresponding type declarations.- vue 3.4.18
- quasar 2.16.0
- quasar/app-vite 2.1.4
Je ne sais pas exactement quand Quasar a changé sa façon de faire, mais dans la version que j'utilise actuellement, la méthode a évolué. Vous rencontrerez forcément ce problème si vous utilisez le CLI avec Vite. référence
import { defineConfig } from "@quasar/app-vite";Si c'était l'ancienne méthode, maintenant il faut faire :
import { defineConfig } from '#q-app/wrappers'C'est comme ça qu'il faut l'importer. Le problème, c'est que ça plante en disant qu'il ne trouve pas #q-app. Si vous demandez à ChatGPT ou Cursor.ai, ils vous diront de supprimer tout le dossier node_modules et de refaire un npm install, de lancer quasar clean --qconf, ou de revenir à l'ancienne méthode d'importation. Comme c'est un changement récent, ils ne l'ont pas encore assimilé.
Le problème de fond vient en fait d'un bug. Un correctif est sorti, mais ça ressemble plus à une solution de contournement temporaire qu'à une vraie réparation.
Si la valeur baseUrl est définie dans votre tsconfig.json, elle entre en conflit avec le tsconfig.json généré et utilisé en interne par Quasar (celui de Quasar se trouve dans /.quasar/tsconfig.json et est défini dans la clé extends).
La solution
Supprimez les propriétés baseUrl et paths de votre fichier tsconfig.json.
Voici à quoi ressemble le fichier tsconfig.json recommandé :
{
"extends": "./.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"
]
},À noter que vite.config.js possède des paramètres similaires, mais vous pouvez les ignorer car ce sont des chemins d'alias destinés à Vite. Seul le tsconfig pose un problème de conflit.