Cara Mengatasi Error Cannot find module '#q-app/wrappers' di Vue + Quasar

2025-03-20 · Asli (bahasa Korea)

Artikel ini diterjemahkan dari tulisan asli berbahasa Korea dengan bantuan AI. Harga dalam tanda kurung adalah konversi perkiraan. Baca tulisan asli bahasa Korea →

Aaaaaarghh

Mungkin kamu mengalami error seperti ini, atau yang di bawahnya.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports"

Atau

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

Lingkungan yang saya gunakan saat ini

vue 3.4.18
quasar 2.16.0
quasar/app-vite 2.1.4

Saya tidak tahu sejak kapan Quasar mengubah cara penggunaannya, tetapi di versi yang saya pakai sekarang, caranya sudah berbeda dari sebelumnya. Terutama jika kamu menggunakan CLI bersama Vite, kamu pasti akan menemui masalah ini. referensi

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

Jika ini adalah cara lama, sekarang menjadi

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

Kamu harus melakukan import seperti ini. Saat ini terjadi error karena tidak bisa meng-import #q-app. Kalau kamu bertanya ke ChatGPT atau Cursor.ai, mereka akan menyuruhmu menghapus semua node_modules lalu melakukan npm install lagi, atau mencoba quasar clean --qconf, atau kembali menggunakan cara import yang lama. Sepertinya karena ini perubahan baru, mereka belum mempelajarinya.

Akar masalahnya sebenarnya adalah bug. Memang sudah ada patch yang dirilis, tapi sepertinya itu lebih ke solusi sementara daripada perbaikan yang sempurna.

Jika baseUrl didefinisikan di dalam tsconfig.json, ini akan bentrok dengan tsconfig.json yang dibuat dan digunakan sendiri oleh Quasar (yang digunakan Quasar didefinisikan di kunci extends sebagai /.quasar/tsconfig.json).

Issue GitHub terkait

Cara Mengatasi

Hapus bagian baseUrl dan path dari tsconfig.json.

Berikut adalah file tsconfig.json yang direkomendasikan.

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

Di sini, untuk vite.config.js juga ada pengaturan serupa, tapi karena itu adalah path alias untuk referensi Vite, kamu bisa mengabaikannya. Hanya tsconfig yang mengalami konflik.