[VS Code] Cannot find module 'next/babel' 오류 해결하기 (Next.js)

Cannot find module 'next/babel' 오류 해결하기 (Next.js)

들어가며

• VS Code에서 Next.js 프로젝트를 작업할 때 아래와 같이 오류가 발생할 경우 해결하는 방법을 정리해본다.

 

방법

• 프로젝트의 최상위 경로에 @.babelrc@ 파일을 생성하고, 파일 안의 내용을 다음과 같이 작성한다.

 

/.babelrc

{
  "presets": ["next/babel"],
  "plugins": []
}

 

• 그리고 프로젝트의 최상위 경로에 있는 @.eslintrc.json@ 파일을 열고 다음과 같이 내용을 수정해준다.

 

/.eslintrc.json

• @extends@의 값(Value)을 배열(Array) 형태로 만들어주고, @"next/babel"@ 값을 배열에 넣어준다.

{
  "extends": ["next/babel", "next/core-web-vitals"],
  "rules": {
    "@next/next/no-img-element": "off"
  }
}

 

• 해당 오류가 없어졌음을 확인할 수 있다.

 

참고 사이트

Parsing error : Cannot find module 'next/babel'