Cách sửa lỗi Cannot find module '#q-app/wrappers' khi dùng Vue + Quasar

2025-03-20 · Bản gốc (tiếng Hàn)

Bài viết này được dịch từ bản gốc tiếng Hàn với sự hỗ trợ của AI. Giá trong ngoặc là quy đổi gần đúng. Đọc bản gốc tiếng Hàn →

Á á á á á điên mất thôi

Có thể bạn sẽ gặp phải lỗi như thế này, hoặc lỗi ngay bên dưới.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports"

Hoặc

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

Môi trường mình đang sử dụng:

vue 3.4.18
quasar 2.16.0
quasar/app-vite 2.1.4

Mình không rõ Quasar đã thay đổi cách dùng từ bao giờ, nhưng ở phiên bản mình đang xài thì nó đã khác so với trước đây. Đặc biệt là nếu bạn dùng CLI kết hợp với Vite thì chắc chắn sẽ dính lỗi này. tham khảo

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

Nếu đây là cách viết cũ, thì bây giờ...

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

Bạn phải import theo cách này. Lúc này nó sẽ báo lỗi không thể import #q-app. Nếu bạn đem đi hỏi ChatGPT hay Cursor.ai thì tụi nó sẽ xúi bạn xóa sạch thư mục node_modules rồi chạy lại npm install, hoặc thử chạy quasar clean --qconf, hoặc bảo bạn quay lại cách import cũ. Chắc do đây là thay đổi mới nên AI chưa kịp cập nhật.

Nguyên nhân sâu xa của vấn đề này thực chất là do một con bug. Dù đã có bản vá lỗi nhưng trông nó giống một giải pháp tạm thời hơn là giải quyết triệt để.

Nếu bạn khai báo giá trị baseUrl trong file tsconfig.json, nó sẽ bị xung đột với file tsconfig.json mà Quasar tự động tạo ra (file của Quasar nằm ở /.quasar/tsconfig.json và được khai báo trong từ khóa extends).

Issue liên quan trên GitHub

Cách giải quyết

Hãy xóa các mục baseUrl và path trong file tsconfig.json của bạn đi.

Dưới đây là file tsconfig.json được khuyến nghị sử dụng:

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

Nhân tiện thì trong file vite.config.js cũng có một thiết lập tương tự, nhưng bạn cứ lờ nó đi vì đó chỉ là đường dẫn alias để Vite tham chiếu thôi. Chỉ có tsconfig là bị xung đột.