Vue + Quasar 报错 Cannot find module '#q-app/wrappers' 解决方法

2025-03-20 · 韩语原文

本文由AI辅助翻译自韩语原文。括号中的价格为约合金额，仅供参考。阅读韩语原文 →

啊啊啊啊啊崩溃了

你可能会遇到下面这种报错，或者再下面那种报错。

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports"

或者

 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，肯定会遇到这个问题。参考链接

import { defineConfig } from "@quasar/app-vite";

如果说上面是以前的用法，那么现在

import { defineConfig } from '#q-app/wrappers'

必须像这样 import。这时候就会报找不到 #q-app 的错。如果你去问 ChatGPT 或者 Cursor.ai，它们会让你删掉整个 node_modules 重新 npm install，或者让你执行 quasar clean --qconf，要么就是让你用回以前的 import 方式。估计是因为这是最近才改动的东西，AI 还没学到。

根本原因其实是个 bug。虽然官方出了补丁，但看起来更像是临时救急，并不完美。

如果在 tsconfig.json 里定义了 baseUrl，就会和 Quasar 自己生成并使用的 tsconfig.json 发生冲突（Quasar 使用的是 /.quasar/tsconfig.json，定义在 extends 字段里）。

相关 GitHub Issue

解决方法

删掉 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 会发生冲突。