nextjs에서 eslint 세팅중 갑자기 Error: 'React' is not defined 등 각종 에러가 쏟아짐

nextjs 13 버전에 익숙해지고자 토이 플젝을 진행하고 있다.

초기 셋팅하는데부터 자꾸 문제가 터져서 매우 곤혹스러움..

 

근데 error ESLint: Failed to load config "prettier" to extend from. 이런 에러가 뜨길래 서칭해봤더니 eslint-config-prettier 라이브러리가 필요하대서 설치.

 

그랬더니만 이번에는 Error: 'React' is not defined, Error: 'Image' is defined but never used. 등등 아주 다양한 에러를 뱉기 시작했다..

 

webpack에 runtime: automatic을 설정해줘야 한다는 글들을 보고,

SWCplugin에서 설정도 추가해봤지만 달라지는 게 없음..

그래서 이것저것 eslint에서 설정을 바꿔보다가

 

module.exports = {
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:prettier/recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'prettier',
        'next/core-web-vitals',
    ],
}

extends 값에 이렇게 recommended 형태로 플러그인을 집어넣었더니, 에러가 사라졌다.

계속 작업해봐야 알겠지만 일단 에러가 안 뜨고 빌드가 잘 되는거로 봐서 더이상 헤집지 않고 작업 진행해보기로 했다.