Pinia 오류- 절대 경로 import 이슈

🚨 발생한 오류:

Uncaught (in promise) Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

컴포넌트가 렌더링되지 않으면서 위와 같은 오류가 발생했음. Pinia store를 초기화하기 전에 사용하려 한다는 내용의 오류였음.

🔍 원인 분석

문제의 원인은 import 구문에 있었음. 부모 View에서 모듈을 import 할 때 절대 경로로 잘못 참조되고 있었음... 내가 작성한 게 아닌데 어느 순간 이렇게 변해있었음. 

// 🔴 잘못된 import 방식
import { ref, watch } from "/node_modules/.vite/deps/vue.js?v=e026b806"
import { defineStore } from "/node_modules/.vite/deps/pinia.js?v=e026b806"
import axios from "/node_modules/.vite/deps/axios.js?v=e026b806"
import router from "/src/router/index.js"

 

이렇게 절대 경로로 모듈을 import하려고 하니 'Do not import modules using an absolute' 라는 경고 메시지도 함께 발생했음.

✨ 해결 방법 

모듈 import 구문을 상대 경로 방식으로 수정하여 해결했음.

// 🟢 올바른 import 방식
import { ref, watch } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'
import router from '@/router'

💡 참고사항

- Vue/Vite 프로젝트에서는 절대 경로 대신 상대 경로나 alias(@)를 사용하는 게 좋음
- node_modules 내부 경로를 직접 참조하는 건 피해야 함
- 특히 Pinia와 같은 상태 관리 라이브러리는 정확한 import가 중요함

이런 import 경로 이슈가 발생하면 먼저 import 구문을 체크해보는 게 좋을 듯