ESLint 에러 - Must use import to load ES Module

ESLint를 설정하는데 Must use import to load ES Module와 같은 에러가 떠서 ESLint가 실행되지 않았다.

그 이유는 .eslintrc.json의 파일에서 "parser"의 값이 처음에 babel-eslint였다.

하지만 babel-eslint는 es6을 지원을 해주지 않기 때문에, ES6으로 작업하고 있기 때문에 ESLint설정이 되지 않았다.

그래서 필요한 파일을 설치하자

yarn add @babel/eslint-parser

해당 파일 설치 이후,

...
  "parser": "@babel/eslint-parser",
...

으로 parser키의 값을 바꿔주도록한다.

그래도 나는 import 에러가 뜨는 문제가 있었는데, 이 이유는

...  
    "plugins": ["react", "react-hooks", "prettier", "import"],
...

"plugins"의 값에 import부분을 추가해주어 해결하였다.

또한 babel을 사용해줄 때는 .babelrc파일 만드는 것을 잊지 말자 !

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