[ Next.js ] next/babel 에러

Next.js 개발을 위해 파일 설치 후 아래와 같은 에러가 뜬다

 

Parsing error: Cannot find module 'next/babel'

 

 

npm run dev를 하면 실행은 되지만, 파일에 빨간 줄이 나타나는게 너무나도 신경이 쓰인다.

 

 

해결 방법

---

.babelrc file을 생성해 주고 아래와 같은 코드를 적고

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

 

.eslintrc파일 생성우 아래 코드를 적어주면  빨간 줄이 바로 없어진다. 

{
  "extends": ["next", "next/babel", "next/core-web-vitals"]
}

 

 

하지만 더 쉬운 방법!

---

새로운 파일 생성없이 기존에 존재하는 .eslintrc.json파일의 코드만 수정해주면 된다!

.eslintrc.json 파일에 아래와 같은 코드를

{
  "extends": "next/core-web-vitals"
}

 

아래와 같은 코드로 바꾸고 저장을 하면 빨간 줄이 바로 없어진다.

{
  "extends": ["next/babel","next/core-web-vitals"]
}