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

선요약

현재 켜져있는 vscode 작업영역 폴더 내에 다른 프로젝트가 존재할 경우 모종의 충돌이 생길 수 있는 것으로 보인다. 켜져있던 작업영역을 닫고 NextJS 프로젝트 폴더 하나만 띄우니 에러도 안뜨고 EsLint도 정상 작동했다. (.eslintrc.json 혹은 .babelrc 등 다른 설정 필요 없음)

첫 번째 에러

NextJS에 처음으로 입문하기 위해 $create-next-app@latest 명령으로 next 프로젝트를 생성했는데 프로젝트의 모든 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 을 불러오지 못하고 작동을 멈춰버리는 바람에 에러가 발생하지 않았고 문제가 해결된 것처럼 보인 것이다.

이에 대한 해결 방법을 열심히 찾아보았지만 모두 실패했고, 첫 번째 에러에 대한 해결 방법이 잘못된 것이었다는 결론을 내렸다.

해결

다시 첫 번째 에러를 해결하기 위해 이것저것 만져보던 도중, 타입스크립트 프로젝트에서도 같은 에러가 뜰지 어떨지 궁금해서 확인해 보았다.

확인 결과 ts파일에서는 parsing error가 뜨지 않았지만 js파일에는 parsing error가 뜨는 것을 확인했다. (여전히 EsLint는 작동하지 않았다.)

이러한 현상이 의미하는 바가 무엇일까 생각하던 도중 문득 현재 켜있는 vscode 작업영역 내의 여러 typescript, vue, react, webpack 등 다양한 프로젝트 설정들이 뭔가 충돌을 일으켜서 에러가 발생하는 것은 아닐까라는 생각이 들었다.

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

NextJS 공부하려다 에러 잡는데 하루를 다 보냈지만 스택오버플로우에 너무 의존하고 맹신하지 말아야겠다는 교훈을 얻은 하루였다. 스택오버플로우에 관련 답변이 하나 있기는 했지만 대부분이 .eslintrc.json 과 관련된 답변들 뿐이었다.

뭔가 급마무리 되는 것 같지만 결론은 다음과 같다.

1. .eslintrc.json 같은 설정 파일을 건드리지 않아도 vscode 작업영역에 현재 프로젝트 폴더 하나만 띄우면 에러도 뜨지 않고 EsLint도 정상 작동한다.

2. 스택오버플로우 너무 맹신하지 말자.