yarn berry pnp 모드에서 prettier plugin 을 resolve 시키자.

yarn berry의 pnp 모드는 node_modules 폴더 자체를 생성하지 않기때문에

node_modules에 의존성이 있는 외부 라이브러리의 경우에는 함께 사용시 문제가 발생할 수 있습니다.

---

통상적인 해결방법

yarn dlx @yarnpkg/sdks vscode

주로 pnp 호환이 되지 않는 모듈들을 호환시켜주기 위해 위 명령어를 사용하곤 합니다.

그러나 prettier plugin의 경우에는 의도대로 동작하지 않았습니다.

---

현재 해결방법

정확히 이야기하면 cli로 이용하는 prettier의 경우에는 효과가 있지만

vscode의 format on save 에서는 동작하지 않았습니다.

  plugins: ["@trivago/prettier-plugin-sort-imports"]

.prettierrc 에서 다음과 같은 설정을 통하여 플러그인을 사용하고 있었는데

모듈을 찾지 못하여서 실패하는 경우가 발생하게 된 것입니다.

 

보통 정상적으로 의존성에 설치를 마쳤음에도 불구하고 모듈을 찾지 못하는 경우는

node_modules이 없는 것에서 기인하는 문제일 확률이 높았습니다.

 

경로를 잘 resolve 시켜주기 위해서는 json 파일로 설정하는 것에 한계가 있었기에

.js 파일로 config 파일을 변경하는 전략이 유효합니다.

https://dev.to/javien/how-to-use-prettier-plugin-with-yarn-pnp-in-vscode-4pf8

How to use Prettier plugins with Yarn PnP in VSCode?

해당 글에서 크게 도움을 받았습니다.

위 글의 발상은 간단하다면 간단한데 pnp를 사용하기 때문에 리졸브하지 못하는 것이니

해당 플러그인만 unplug 명령어를 통하여 pnp에서 제외시키고

require.resolve를 통하여 해결을 시도합니다.

yarn unplug <your-plugin>

이렇듯 unplug를 시키고

  plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")],

require.resolve를 통하여 경로를 리졸브시킵니다.

 

---

레퍼런스

https://nodejs.org/api/modules.html#requireresolverequest-options

Modules: CommonJS modules | Node.js v21.7.1 Documentation