Vue + Quasar使用時の「Cannot find module '#q-app/wrappers'」エラー解決方法
この記事は韓国語のオリジナル記事をAIの支援で翻訳したものです。括弧内の価格はおおよその換算です。 韓国語の原文を読む →
 |
| うわああああああああああ |
おそらく次のようなエラーが発生するか、その下のようなエラーが発生すると思います。
または
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
Quasarがいつから使い方を変えたのか分かりませんが、現在私が使っているバージョンでは従来の使い方と異なっています。特にViteを一緒に使うCLIの場合は、この問題に必ず直面するはずです。reference
import { defineConfig } from "@quasar/app-vite";これが従来使っていた方式だとすると、今は
import { defineConfig } from '#q-app/wrappers'このようにimportする必要があります。この時、#q-appをimportできないというエラーが出るのですが、ChatGPTやCursor.aiなどに聞くと、node_modulesを全部削除してnpm installをやり直すように言われたり、quasar clean --qconfを試すように言われたり、以前の方式でimportするように言われたりします。最近変更された事項なので、まだ学習できていないようです。
根本的な問題はバグによるものです。パッチは出ているものの、完璧というよりは応急処置のように見えます。
tsconfig.jsonで定義した値のうち、baseUrlが定義されていると、Quasarが独自に作成して使用するtsconfig.jsonと衝突してしまいます（Quasarが使用するものは/.quasar/tsconfig.jsonで、extendsキーに定義されています）。
解決方法
tsconfig.jsonからbaseUrlとpathの項目を削除します。
以下は推奨されるtsconfig.jsonファイルです。
{
"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"
]
},ここでvite.config.jsの場合にも似たような設定がありますが、これはViteが参照するためのaliasパスなので無視して構いません。tsconfigだけが衝突します。