[Prettier] Next.js13 + Prettier 관련 에러 해결

Next.js13 프로젝트에 prettier, prettier 관련 플러그인 적용시 관련 에러를 해결한 과정을 작성한 글입니다.

이슈 1 - .prettierrc 파일 적용 안되는 경우

vscode 하단에는 prettier가 적용되고 있다는 표시가 있었지만 실제로는 prettier config 파일이 적용되지 않는 버그가 발생했습니다.

원인

 "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

위는 제 vscode의 settings.json 파일 중 일부로 vscode에서 prettier 설정시 파일별 적용 옵션이 누락되어 tsx, ts 파일에는 prettier가 적용되지 않았었습니다.

해결

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

현재 프로젝트에서는 typescript를 사용하고 있기에 ts, tsx 파일의 기본 formatter를 prettier로 설정했습니다.

---

이슈 2 - prettier-plugin-tailwindcss 플러그인 적용시 에러 발생하는 경우

작업중인 Next.js13 기반 프로젝트는 tailwind 라이브러리를 사용하고 있었으며 클래스명 정렬을 위해 prettier-plugin-tailwindcss 라이브러리 설치 후 공식 문서의 설명대로 prettier config 파일인 .prettierrc 파일 하단에 아래 코드를 추가했습니다.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

그랬더니 output에서 아래와 같은 에러 로그를 확인할 수 있었습니다.

["ERROR" - 오후 11:02:23] Error resolve node module 'prettier-plugin-tailwindcss'
Error: Error resolve node module 'prettier-plugin-tailwindcss'
	at n (/Users/XXX/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:2718)
	at /Users/XXX/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:3068

참고로 제가 사용하는 라이브러리 버전은 다음과 같습니다.

prettier: "3.0.3"
prettier-plugin-tailwindcss: 0.5.7
tailwindcss: 3.3.5
 
 prettier extension : 10.1.0

 

원인

다른 글들에서도 저와 비슷한 에러가 발생했으며  아무래도 prettier v3와 prettier-plugin-tailwindcss v5에서 많은 변화가 생기면서 prettier extension 버전과 충돌되는 문제로 파악되었습니다.

해결

prettier: 2.8.8
prettier-plugin-tailwindcss: 0.4.1

결론적으론 임시방편으로 prettier, prettier-plugin-tailwindcss 라이브러리의 버전을 위와 같이 downgrade 하는 방법으로 해결할 수 있었습니다.

prettier-vscode 라이브러리의 버그가 수정되면 위 2개의 라이브러리의 버전을 업그레이드해서 다시 적용하는 것이 좋을 것 같습니다.

---

참고 자료

https://github.com/prettier/prettier-vscode/issues/3104

prettier 3.0 and prettier-vscode v10.1.0 won't load plugins · Issue #3104 · prettier/prettier-vscode

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/191

Plugin not working · Issue #191 · tailwindlabs/prettier-plugin-tailwindcss