Solución: Cannot find module '#q-app/wrappers' en Vue + Quasar

2025-03-20 · Original (coreano)

Este artículo fue traducido del original en coreano con ayuda de IA. Los precios entre paréntesis son conversiones aproximadas. Leer el original en coreano →

¡Aaaah, qué frustración!

Probablemente te aparezca un error como este, o el que está justo debajo:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports"

O bien:

 ERROR(vue-tsc)  Cannot find module '#q-app/wrappers' or its corresponding type declarations.

Entorno que estoy usando actualmente:

vue 3.4.18
quasar 2.16.0
quasar/app-vite 2.1.4

No sé desde cuándo Quasar cambió su forma de uso, pero en la versión que estoy utilizando ahora, es diferente a como se hacía antes. Especialmente si usas el CLI junto con Vite, es casi seguro que te topes con este problema. Referencia

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

Si esta era la forma en que lo hacíamos antes, ahora...

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

...hay que importarlo así. El problema es que da un error diciendo que no puede importar #q-app. Si le preguntas a ChatGPT o a Cursor.ai, te dirán que borres todo node_modules y vuelvas a hacer npm install, que intentes con quasar clean --qconf, o que uses la forma antigua de importar. Como es un cambio reciente, parece que aún no lo han aprendido.

El problema de raíz se debe a un bug. Aunque ha salido un parche, parece más una solución temporal que algo definitivo.

Si se define baseUrl en tu tsconfig.json, entra en conflicto con el tsconfig.json que Quasar genera y usa internamente (el que usa Quasar está en /.quasar/tsconfig.json y se define en la clave extends).

Issue relacionado en GitHub

Solución

Elimina las propiedades baseUrl y path de tu tsconfig.json.

A continuación, te dejo el archivo tsconfig.json recomendado:

{
  "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"
    ]
  },

Por cierto, en vite.config.js también hay una configuración similar, pero como esa es una ruta de alias para que Vite la referencie, puedes ignorarla. El conflicto ocurre únicamente con tsconfig.