Vue 3를 사용하는 프로젝트를 개발하다가
Vue 2를 사용하는 프로젝트를 실행하기 위해 npm install를 하고 npm run serve를 사용하여 프론트를 실행하니
아래와 같은 에러가 발생했습니다.
위 에러를 해결하기 위해 구글 검색전에 다음과 같은 시도를 해보았습니다.
시도 1.
- 리엑트 프로젝트를 만들었을 때 해당 프로그램의 run 명령어를 사용하는 위치가 달라서 비슷한 에러가 떴던 것 같은 기억이있어 터미널에서 cd 명령어를 통해 해당 프로젝트 위치로 이동하고 run 해보았지만 실패.
시도 2.
- 백엔드에서는 이전에 실행하던 프로세스가 완전히 종료되지 않아 문제가 발생하는 경우가 있어 프론트의 프로세스를 CMD 창에서 netstat -ao 명령어를 통해 찾아내어 종료해보았지만 실패.
시도 3.
- Vue버젼이 다른 파일에서 이동해왔기때문에 혹시나 버젼이 달라서 문제가 발생하는지 확인하기 위해 npm list vue 명령어를 통해 버젼을 확인했지만 해당문제는 아니었습니다.
결국 구글님의 집단지성을 이용하기로 하고 서칭을 했습니다..
문제발견
현재 프로젝트에서 HTML파싱에 cheerio 모듈을 사용 중인데 이 녀석에게서 문제가 발생한 것 이었습니다.
터미널에서 npm install을 수행하면 사용하고 있는 패키지가 전부 설치 및 업데이트를 수행하는데 이때 문제가 발생한 것이었습니다.
위 에러에서 ./node_modules/cheerio/node_modules/htmlparser2/lib/esm/index.js 라는 로그가 출력되는데 확인해본 결과 cheerio 의 11, 12버젼에서 발생하는 버그로써 버젼 업데이트를 진행한 사람들이 서버가 켜지지않은 버그가 발생하고있었습니다. (아래 링크는 참고한 글입니다)
https://github.com/cheeriojs/cheerio/issues/2545
해결방법
cheerio 버젼을 3로 변경하면 됩니다.
front의 package.json에 있는 dependencies부분을 “cheerio”:”^1.0.0-rc.3” 혹은 “cheerio”:”=1.0.0-rc.3” 으로 변경줍시다.
하지만 이것만 변경하면 동일한 오류가 발생하는데 정의(?)부분에 수정만 했을 뿐 아직 실제 모듈이 재설치 되지 않았기 때문에 에러가 발생합니다.
따라서 터미널을 열고 npm i cheerio@1.0.0-rc.3 명령어를 실행하여 모듈을 재설치 해주고 서버를 재실행하면 정상작동 하는 모습을 볼 수 있습니다.
(기존에 Vue2 프로젝트에서는 cheerio를 3버젼을 사용하고 있었기 때문에 업데이트 하지않으면
따로 버그가 발생하지 않았던 것이었습니다)