[ESlint] SyntaxError: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json 에러

hyejinJo·2024년 1월 21일

에러 처리

목록 보기

6/6

문제 상황

next 프로젝트를 시작하려 초기 세팅중, 다음과 같은 eslint 에러 문구가 떴다.

SyntaxError: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json » eslint-config-airbnb-typescript » /Users/johyejin/Desktop/2024-frontend-study/j-com/node_modules/eslint-config-airbnb-typescript/lib/shared.js': Unexpected token '||='

/Users/johyejin/Desktop/2024-frontend-study/j-com/node_modules/@typescript-eslint/scope-manager/dist/referencer/ClassVisitor.js:123
        withMethodDecorators ||=
                             ^^^

SyntaxError: Unexpected token '||='
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/johyejin/Desktop/2024-frontend-study/j-com/node_modules/@typescript-eslint/scope-manager/dist/referencer/Referencer.js:20:24)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
Process finished with exit code -1

첫번째 시도

초기 eslintrc.json 는 다음과 같이 자동으로 설정되어있던 상황이다.

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

next.js 초기 세팅(eslint, prettier) 관련 글을 서치하였는데, 위의 부분만으론 완벽하게 ESLint가 적용된 것이 아니고 별도로 추가의 설정을 두어야 한다는 것을 알게 되었다. eslint 의 부족한 설정때문에 에러가 발생했다 추측하여, eslintrc.json 파일에 추가적인 설정과 더불어 다른 라이브러리들도 같이 설치를 진행했다.

npm i

eslint-config-airbnb

eslint-config-airbnb-typescript

@typescript-eslint/eslint-plugin@^6.0.0

@typescript-eslint/parser@^6.0.0 -d

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

하지만 에러는 여전히 있었고, 표시가 eslint 의 설정에 있는 라이브러리의 이름으로만 바뀌었을 뿐이었다.

두번째 시도

@typescript-eslint/parser 가 로드되지 않는다는 문구를 확인 후 @typescript-eslint/parser 라이브러리를 설치했지만 여전히 에러문구가 남아있었다.

하지만 이내 그 해결책을 고맙게도 스택오버플로우에서 찾았다.

질문자는 나와 똑같은 상황이었고, 심지어 이분 역시 @typescript-eslint/parser 까지 깔은 상황에 에러 해결이 안된다는 내용이었다.

답변은 다음과 같았는데, 결론적으로 단순히 Webstorm IDE 의 node 버전에 대한 이슈였다

Ubuntu 22.04에 기본으로 설치된 Node.js를 제거하고, Node.js의 버전을 관리할 수 있는 nvm (Node Version Manager) 패키지를 설치
- Node.js 제거: sudo apt purge nodejs npm
- nvm 설치: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash (이미 있다면 해당 단계는 패스)
- WebStorm에서 Node.js 버전 선택: WebStorm에서 설정 > Languages & Frameworks | Node.js 로 이동하여 원하는 버전을 선택
- 프로젝트 루트에 .nvmrc 파일을 추가하여 사용하려는 Node.js 버전을 정의할 수 있음 (선택사항)
WebStorm에서 적절한 Node.js 버전을 선택