React 18.2.0
Toast Ui Grid 4.21.22
Zustand 4.5.2
vite 5.2.0
프로젝트를 진행하던 도중 상태관리가 필요하여 환경설정이 빠른 zustand를 사용하기로 하였다.
하지만 npm install zustand 부터 error가 뜨면서 ui가 아예 안 보이기 시작했다... error 코드를 읽어보면 gird 때문에 생기는 문제였다.
콘솔에 error는 아래와 같았다.
Uncaught ReferenceError: module is not defined at index.js?v=2404b468:19:3
문제의 index.js를 ctrl+클릭으로 타고 들어가보면 module 구문이 사용된 부분에서 error가 나고 있는 것을 확인할 수 있는데 이 프로젝트는 vite를 사용하고 있었기 package.json에 type:"module"을 안 해서 뜨는 문제라는 아니였다. 무엇보다 zustand를 새로 다운받으며 갑작스럽게 뜨기 시작한 에러였기 때문에 npm을 다운받는 와중에 문제가 생긴 것이라고 생각했다.
grid가 React 버전으로 인해 npm install로 다운받아지지 않아 --legacy-peer-deps를 쓴 것이 문제가 되었던 것을 추정된다.
해결방법을 서치하다가 React 버전을 17로 낮춘다고 해결되는 문제가 아니라는 게시글을 봤기 때문에 버전을 낮추기 보단 npm 캐시를 지우고 다시 다운받아 보기로 했다.
캐시 지우기
npm cache clean --force
zustand 설치
npm install zustand --force
다시 npm i
npm install --force
이후 프로젝트를 시작해 보면 정상적으로 작동하는 것을 확인할 수 있었다.
사실 grid를 안 쓰면 되는 문제이지만... 그럴 수 없는 상황이기 때문에 grid를 어찌저찌 조치할 수밖에 없었다.
