ESLint

React & Webpack 환경에 npm으로 ESLint를 설치했는데 문제가 발생했다.

처음에는 아무 에러도 없어서 정상적으로 설치가 완료된 듯 싶었으나 코드 규칙에 어긋나게 작성해도 아무런 경고가 출력되지 않았다.

$ npx eslint --init 명령으로 ESLint의 초기화를 다시 진행해 보았지만 결과는 마찬가지였다.

대신 ESLint의 output으로 이런 메세지가 출력되고 있었다.

[Info  - 4:04:59 PM] Failed to load plugin 'react' declared in 'test/webpack-react-template-test/.eslintrc.js': Cannot find module 'eslint-plugin-react' Require stack: - /test/webpack-react-template-test/__placeholder__.js Referenced from: /test/webpack-react-template-test/.eslintrc.js

대충 읽어보니 eslint-plugin-react 모듈을 못찾겠다는 말인 것 같아서 package.json을 확인해보니 설치되어 있지 않은 상태였다.

분명 $ npx eslint --init 명령으로 초기화를 진행하며 React 환경임을 명시했고 초기화 마지막 단계에서 해당 모듈도 설치가 진행되었던 것으로 기억하는데 제대로 확인해보지 않은 것이 화근이었다.

어쨌거나 원인은 찾았고 npm으로 모듈을 직접 설치하여 문제를 해결해보려 했으나 이 과정에서도 에러가 발생했다. 현재 설치된 eslint 8버전과 eslint-plugin-react가 호환되지 않다는 이야기인 것 같았다. 아무래도 이 문제 때문에 eslint의 초기화 과정에서 모듈이 제대로 설치되지 않은 듯 했다.

eslint를 한 단계 아래인 7버전으로 내리니 모듈의 설치가 제대로 진행되었고, eslint도 완벽하게 작동하는 것을 확인하였다.