[error] Cannot find package 'prettier-plugin-tailwindcss’

❖ 에러 메세지

✖ prettier --write:
[error] Cannot find package 'prettier-plugin-tailwindcss' imported from /Users/jeongjiho/Desktop/boostcamp/membership/project/web14-boostproject/noop.js
husky - pre-commit script failed (code 1)

❖ 상황

prettier-plugin-tailwindcss 를 설치한 이후에 lint-staged 를 실행하면서 위와 같은 에러가 발생했다.

❖ 원인 분석 및 해결

위와 같은 오류가 발생한 원인은 lint-staged 는 루트에서 실행되는데, 내가 prettier-plugin-tailwindcss 를 frontend 폴더에 설치했고, 루트에 있는 .prettierrc 파일에 플러그인을 등록해두었기 때문이다. 이렇게 하면 prettier는 설정된 위치(현재는 루트)에서 플러그인을 찾기에 frontend 폴더에 설치된 prettier-plugin-tailwindcss 패키지를 찾지 못 해 Cannot find 오류가 발생하게 된다. 이는 Node.js의 모듈 로딩 방식과 관련이 있다.

Node.js 모듈 로딩 방식

Node.js는 모듈을 찾을 때 현재 디렉토리에서 시작해 상위 디렉토리로 거슬러 올라가며 node_modules 폴더를 탐색한다. 상위 폴더에서 하위 폴더를 탐색할 수는 없다. Node.js의 모듈 탐색 방식은 다음과 같다.

1. 현재 폴더에서 node_modules 탐색
2. 현재 폴더에 없다면 상위 폴더로 이동하여 탐색
3. 이 과정을 반복하여 루트 디렉토리(/)에 도달할 때까지 node_modules 를 찾음

이 때문에 prettier-plugin-tailwindcss 가 하위 폴더인 frontend 에 있는 것을 찾아낼 수 없었던 것이다.

이로 인한 권장 사항

이와 같은 모듈 탐색 규칙 때문에 공통으로 사용되는 플러그인이나 패키지를 프로젝트 루트에 설치하라고 하는 것이다. 이를 통해 프로젝트 내 모든 폴더에서 동일한 설정과 의존성을 사용할 수 있다.

고민

prettier-plugin-tailwindcss 는 프론트엔드에서만 필요한 패키지라 프론트엔드 폴더에 설치 했던 것인데, 이렇게 되면 프론트엔드만의 prettier 설정이 따로 필요한 것인가 고민되었다. 하지만 설정을 간소화하고 일관되게 유지하기 위해 프로젝트 루트에서 prettier를 통합 관리하는 것이 더 효율적일 것 같다는 생각이 들어, 루트 폴더에서 적용했다.