[NextJS] Parsing error: Cannot find module 'next/babel' 해결

해결 방법 선요약

vscode 작업 영역 내에 여러 프로젝트가 존재할 경우 프로젝트 사이에서 EsLint 설정의 충돌이 발생하는 것으로 보인다.

현재 작업영역에 NextJS 프로젝트 폴더 하나만 띄우면 에러도 안뜨고 EsLint도 정상 작동한다.
작업 영역에 여러 프로젝트를 띄워야 한다면 작업 영역 설정 파일에 EsLint를 실행할 프로젝트 경로를 명시하면 된다.
(.eslintrc.json 혹은 .babelrc 등은 건드릴 필요가 없었다.)

첫 번째 에러

NextJS에 입문하기 위해 설레는 마음으로 새 프로젝트를 생성했는데 프로젝트의 모든 js 파일에서 동일한 내용의 에러가 발생했다.

Parsing error: Cannot find module 'next/babel'

stackoverflow 등 여러 곳에서 대다수가 말하는 해결 방안은 .eslintrc.json 의 extends에 next/babel 혹은 prettier 등의 내용을 추가하고 .babelrc 파일을 생성하라는 내용이었다.

위 방법을 적용하니 parsing error 가 사라지기는 했다.

그래서 문제가 해결된 줄 알았지만 이번엔 EsLint 에러가 떠야할 곳에서도 뜨지 않는 문제가 발생했다.

두 번째 에러

첫 번째 에러를 해결하고 나니 EsLint의 작동이 아예 멈춰버렸다. 에러가 발생해야 할 부분인데도 에러가 발생하지 않았다.

원인을 찾기 위해 vscode 패널의 출력탭에서 EsLint 부분을 확인해보니 아래와 같은 에러 로그가 찍혀있었다.

Failed to load config "next/babel" to extend from.

.eslintrc.json 에 next/babel 을 추가해서 첫 번째 에러가 해결된 것이 아니라 EsLint가 next/babel 을 불러오지 못하고 작동을 멈춰버리는 바람에 에러가 발생하지 않았고 문제가 해결된 것처럼 보인 것이다.

두 번째 에러에 대한 해결 방안을 열심히 찾아보았지만 모두 실패했고, 결국 첫 번째 에러를 잡기 위해 .eslintrc.json 에 추가한 next/babel 이 잘못된 것이라는 결론을 내렸다.

다시 첫 번째 에러로, 그리고 해결

결국 다시 첫 번째 에러로 돌아와서 머리를 쥐어짜던 중 ts 파일에서도 에러가 발생할지 궁금해져 타입스크립트 프로젝트를 새롭게 생성하고 테스트해보았다.

확인 결과 해당 프로젝트에서 ts파일은 parsing error가 발생하지 않았지만 js파일에는 여전히 발생하는 것을 확인했다.

ts만 에러가 없는 이유를 알아내기 위해 tsconfig.json을 훑어보며 체크할 파일만 하나 늘었다고 생각하던 중 문득 작업영역 내 여러 프로젝트들의 구성 파일들이 눈에 들어왔고 혹시 이 구성 파일들 사이에서 충돌이 발생하는 것은 아닐까 하는 생각이 들었다.

확인을 위해 여러 프로젝트가 띄워진 현재 vscode 작업영역을 닫고 테스트 중이던 NextJS 프로젝트 폴더 하나만 작업영역에 띄워보았다. 어떤 구성 파일도 건드리지 않았지만 에러는 발생하지 않았고 EsLint도 정상적으로 작동했다!

이후 정확한 원인을 알기 위해 여기저기 검색해 보았는데, 문제를 해결하고 나서야 뒤늦게 나와 같은 방법으로 해결했다는 답변이 눈에 들어왔다.

답변에 따르면 원인은 내 예상대로 작업영역 내 EsLint 설정의 충돌 때문이 맞는 듯 보였다. 작업 영역의 설정 파일에 EsLint를 사용할 프로젝트의 경로를 명시하거나 혹은 내가 한 것처럼 하나의 프로젝트만 띄우면 충돌이 발생하지 않는다는 것을 알 수 있었다.

---

스택오버플로우의 많은 답변이 .eslintrc.json 파일 수정과 관련된 내용이었는데, 잘못된 내용은 아닐지라도 나에게는 해당되지 않는 해결 방법이었다. 다수가 말하는 원인과 해결 방법만 테스트하다 대부분의 시간을 보냈는데, 조금 더 유연하게 여러 의견을 체크했다면 덜 고생했을 것이라 생각한다.

NextJS 좀 공부 해보려다 에러 잡는데 하루를 다 보냈지만 그래도 고생 끝에 여러 깨달음을 얻을 수 있었으니 헛된 시간은 아니었다고 생각한다.