Qodana Error | Install the 'eslint' package (ESLint 패키지 미설치 에러)

< 목차 >

1. Qodana 에러 | ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생

2. 해결을 위한 시도 및 추측

3. 드디어 해결

4. Referenced UMD global variable 경고

 

 

1. Qodana 에러 | ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생

 

우리팀은 Qodana를 통해서 정적 코드 분석을 하고 있다.

GitHub Actions를 통해 Qodana를 실행시켜보니 위와 같은 에러가 발생했다.

 

위 에러는 ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생하는 에러로, 정적 코드 분석 도구에서 ESLint를 인식하지 못할 때 나타난다.

 

 

2. 해결을 위한 시도 및 추측

가장 먼저 원인을 예상해보았다.

 

1. ESLint 패키지 누락: 프로젝트에 ESLint 패키지가 설치되지 않았거나, 의존성이 손상되었을 가능성이 있음

2. Node.js 환경 문제: node_modules 폴더가 손상되었거나, pnpm, npm, yarn 등의 패키지 관리 도구로 의존성이 올바르게 설치되지 않았을 가능성이 있음

 

ESLint 설정 파일(.eslintrc.json, .eslintrc.js 등)을 확인해보니 잘못 작성된 부분은 없어서 위 두 항목이 문제인가 싶어 확인해봤다.

 

pnpm add eslint -D

 

우선, 프로젝트 루트 디렉토리에서 다음 명령어를 실행하여 ESLint 패키지를 다시 설치해봤다.

그리고 세팅 과정에서 node_modules가 손상되었을 수 있으므로, 의존성을 재설치했다.

 

 

1. 기존 node_modules와 pnpm-lock.yaml 제거

rm -rf node_modules pnpm-lock.yaml

 

 

2. 의존성 재설치

 

그러니 위와 같은 경고와 메시지가 떴다.

 

 

(1) eslint 버전 경고

 

- 경고 메시지: WARN deprecated eslint@8.57.0: This version is no longer supported

- 이유: eslint의 설치 버전(8.57.0)이 더 이상 지원되지 않는 상태다. 최신 버전(9.16.0)으로 업그레이드하는 것이 권장된다.

 

eslint를 최신 버전(현재 9.x)으로 업그레이드했다.

 

 

(2) Peer Dependency 경고

다음으로 Peer Dependency 충돌 해결을 진행했다.

eslint-config-airbnb와 일부 패키지의 버전 충돌 문제 해결을 위해 다음과 같은 시도를 하였다.

 

- 경고 메시지: Issues with peer dependencies found

- eslint-config-airbnb가 일부 패키지와 버전 충돌 문제를 나타내고 있음

   - eslint-plugin-react-hooks는 4.3.0을 요구하지만, 설치된 버전은 5.1.0

   - @typescript-eslint/eslint-plugin 및 @typescript-eslint/parser가 7.x 버전을 요구하지만, 설치된 버전은 8.17.0

 

 

eslint-config-airbnb를 최신 버전으로 업그레이드하여 충돌을 줄이고

 

 

버전 충돌을 해결하기 위해 충돌된 패키지의 요구 사항을 확인한 후, 해당 버전을 설치했다.

 

 

이런 과정을 거친 뒤, 의존성을 재설치하니 경고 메시지가 전혀 출력되지 않았다! 이렇게 모든 충돌과 경고를 해결하면 안정적인 환경을 유지할 수 있다.

 

얼른 Push 후, Qodana를 실행해보자!

해봤는데 또 똑같은 ESLint 에러가 떴다.

 

 

(3) react-hooks 플러그인 설정이 .eslintrc.json과 eslint-config-next/core-web-vitals 간의 충돌

 

pnpm run lint 명령어로 ESLint를 실행해보니 위와 같은 에러가 떴다.

 

Next.js가 자체적으로 사용하는 ESLint 설정(next/core-web-vitals)과 사용자 정의 ESLint 설정(.eslintrc.json)의 충돌로 인해 발생한다.

 

자세한 원인은 다음의 2가지와 같다.

 

1. next/core-web-vitals 설정: Next.js의 ESLint 설정이 이미 react-hooks 플러그인을 포함하고 있으며, 자체적으로 최적화된 설정 제공

2. 중복된 react-hooks 플러그인 설정: .eslintrc.json에 별도로 react-hooks 플러그인을 추가했기 때문에 Next.js 기본 설정과 충돌 발생

 

.eslintrc.json 에서 중복된 react-hooks 설정을 제거함

 

Next.js에서 기본적으로 제공하는 설정(next/core-web-vitals)을 활용하므로 .eslintrc.json에서 react-hooks 관련 설정을 제거했다.

 

"extends”에서는 "airbnb/hooks"를,

"plugins”에서는 "react-hooks"를 지웠다.

 

 

다시 ESLint를 실행해보면 문제가 없다고 뜬다!

eslint-config-next와 함께 사용하려면 Next.js의 기본 ESLint 설정(next/core-web-vitals)을 기반으로 최소한의 사용자 정의를 적용해야 한다.

 

불필요한 중복 설정을 피하기 위해 Next.js가 포함한 규칙이나 플러그인을 재정의하지 않도록 설정 파일을 간결하게 유지하자...

 

그래서 다시 돌려보면...

 

 

해결이 되지 않았다!!!!!!!!!!

 

어… 어째서..

 

 

3. 드디어 해결

이런저런 시도를 해보며 코드엔 문제가 확실히 없다고 느껴서 다시 구글링을 하기 시작했다.

 

설명은 아무도 못알아듣게 하셨지만 나의 구세주 (https://youtrack.jetbrains.com/issue/QD-6923/Qodana-ESLint-Install-the-eslint-package)

 

qodana Install the 'eslint' package 라고 검색하니 다음과 같이 나와 동일한 문제를 겪으신 분이 나왔다.

 

해결책을 정말 아무도 못알아듣게 작성하셨지만, install만 보고도 바로 ‘의존성 설치를 GitHub Actions에 작성해야 하는구나!’를 어림짐작할 수 있었다.

 

name: Qodana
on:
  workflow_dispatch:
  pull_request:
  push:
    branches: # Specify your branches here
      - main # The 'main' branch
      - 'releases/*' # The release branches

jobs:
  qodana:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write
      checks: write
    steps:
      - uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.sha }}  # to check out the actual pull request commit, not the merge commit
          fetch-depth: 0  # a full history is required for pull request analysis
          
      - name: 'Qodana Scan'
        uses: JetBrains/qodana-action@v2024.2
        with:
          pr-mode: false
        env:
          QODANA_TOKEN: ${{ secrets.QODANA_TOKEN_592621362 }}
          QODANA_ENDPOINT: '<https://qodana.cloud>'

 

기존의 위 yml 파일에 pnpm으로 의존성 설치하는 설정을 추가했다.

 

name: Qodana

on:
  workflow_dispatch:
  pull_request:
  push:
    branches: # Specify your branches here
      - main # The 'main' branch
      - 'releases/*' # The release branches

jobs:
  qodana:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write
      checks: write
    steps:
      - uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.sha }}  # to check out the actual pull request commit, not the merge commit
          fetch-depth: 0  # a full history is required for pull request analysis
          
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8
          run_install: false

      - name: Install dependencies
        run: pnpm install

      - name: 'Qodana Scan'
        uses: JetBrains/qodana-action@v2024.2
        with:
          pr-mode: false
        env:
          QODANA_TOKEN: ${{ secrets.QODANA_TOKEN_592621362 }}
          QODANA_ENDPOINT: '<https://qodana.cloud>'

 

추가하면 위와 같이 된다.

 

- name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8 # 원하는 pnpm 버전 명시
          run_install: false # 의존성 설치를 수동으로 실행

      - name: Install dependencies
        run: pnpm install

 

- name: Setup pnpm 부터 run: pnpm install 까지가 추가된 내용이다. 저렇게 하면 해결된다.

 

 

와! 해결됐다.

다른 문제가 하나 있긴 하지만 기존에 있던 문제는 깔끔히 해결된 것을 확인할 수 있었다.

 

Qodana는 ‘정적 코드 분석’ 도구이기 때문에 무조건 코드에만 문제가 있을 것이라고 생각했는데, GitHub Actions 워크플로우의 의존성 설치 누락 떄문이었다.

 

아무튼 새로 생긴 문제 하나도 빠르게 해결해보자.

 

 

4. Referenced UMD global variable 경고

React.ReactNode와 같은 타입을 사용할 때 React를 직접 import하지 않고 전역으로 참조했기 때문에 발생한다. TypeScript는 모듈 시스템을 사용하므로, 명시적으로 import하여 사용해야 한다.

 

import React from 'react'; // React import 구문 추가

children: ReactNode;

 

위처럼 React를 명시적으로 import하면 Referenced UMD global variable 경고가 해결된다.