DEVOCEAN

안녕하세요. 프로젝트 마무리 후에 시간이 되서 Nuxt를 최신 3.6.1로 업데이트 하면서 하루 종일 삽질 하게 만든 에러를 공유 합니다.

업데이트를 결정적으로 하게 된 이유는 3.3.1 에서 많은 업데이트가 있었고 성능도 많이 올렸다고 릴리즈 노트에 써져 있었습니다.

버전 차이가 나면 날수록 최신 버전으로 업데이트 하기 더욱 어렵기에 지금이라도 올려야 겠다고 생각했습니다.

package.json 파일의 nuxt 버전을 3.6.1 변경하고 npx nuxi upgrade 명령어를 사용해서 업데이트 했습니다.

npx는 npm 5.2부터 포함되어 설치 되어 있습니다.

해당 명령어를 실행하면 yarn을 실행하는데 에러가 발생 하더군요.

그래서 찾아보니 corepack enable 명령어로 yarn 활성화 시켜 줘야 합니다.

다시 실행하면 정상적으로 업데이트가 됩니다.

올리는 김에 Vuetify(Vue UI Framework)랑 다른 라이브러리도 업데이트 했습니다.

그리고 npm run dev 실행 했더니 다음과 같은 에러가 발생합니다.

"error Vue app aliases are not allowed in server routes" 키워드로 구글링 및 ChatGPT 에게도 질문 했는데 쉽사리 해결방법을 찾을수 없었습니다. Nuxt issues에서 약간의 힌트를 얻었습니다.

결로 부터 말씀 드리면 app.config.ts 파일에 아래 코드가 있는데 import 코드를 삭제 하는것으로 해결 됐습니다.

import { defineAppConfig } from 'nuxt/app'

export default defineAppConfig({
...
}

import 자동으로 되는 부분이라 필요 없는 코드라고 판단했고 실제로 삭제 해보니 에러가 수정되었습니다.

저의 프로젝트의 경우tsconfig.json 파일이 존재하는데 내용을 보면

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

./.nuxt/tsconfig.json 파일를 가져다 쓰고 있었고 해당 파일을 열어 보면 alias 목록을 확인해 볼수 있는데 이쪽과 충돌나는거 같았습니다.

"#app": [
        "/Users/..생략.../project/node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "/Users/..생략.../project/node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "/Users/..생략.../project/node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "pinia": [
        "/Users/..생략.../project/node_modules/pinia/dist/pinia"
      ],
      "#vue-router": [
        "/Users/..생략.../project/.nuxt/vue-router"
      ],
      "#imports": [
        "/Users/..생략.../project/.nuxt/imports"
      ],
      "#build": [
        "/Users/..생략.../project/.nuxt"
      ],
      "#build/*": [
        "/Users/..생략.../project/.nuxt/*"
      ],
      "#components": [
        "/Users/..생략.../project/.nuxt/components"
      ]

매번 업데이트 할때마다 느낍니다. 빨리 빨리 업데이트 해야 문제를 바로 잡기 쉽다.

어느 버전부터 문제인지 몰라서 버전을 1개씩 올려보면서 테스트를 해보면 문제 버전을 찾았습니다.

이유를 알수 없어서 하루 종일 해결 방법을 찾았습니다. 에러 내용을 좀 친절하게 알려줬으면...

누군가에게는 도움이 되길 바라며 글을 마칩니다.