Vue + Quasar 사용시 Cannot find module '#q-app/wrappers' 해결 방법

으아아앙아ㅓㄹ아러자ㅐㅔ덜잴ㄷ

아마 같이 에러가 발생하기도 하고 그 아래와 같이도 발생한다.

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 의 경우에는 이 문제를 반드시 겪게 될 것이다. reference

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

가 기존에 쓰던 방식이라면 지금은

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

이렇게 import 를 해야한다. 이 때 #q-app 을 import 못한다고 하는데 chatGPT 나 cursor.ai 등을 사용하면 node_module을 전부 삭제했다가 npm install 을 하라고 하거나 quasar clean --qconf 를 해보라고 하거나 이전 방식으로 import 하라고 한다. 최신에 변경된 사안이라 아직 학습을 못한 것 같다.

근원적인 문제는 버그로 인한 것으로 패치가 나오기는 했지만 완벽하다기 보다 임시방편으로 보인다.

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 만 충돌한다.