Production 환경에서 @tailwindcss/postcss 모듈을 찾지 못하는 빌드 에러

문제상황

Nexts.js + Tailwind CSS 프로젝트를 Vercel을 통해 배포할 때, 로컬 환경과 development 환경에서는 정상으로 빌드되지만, production 모드에서만 빌드에러가 발생했습니다.

Error: Cannot find module ‘@tailwindcss/postcss’   

해결 과정

처음에는 코드 상에 문제가 있을 것이라 생각되어 많은 삽질을 했습니다..

1. yarn.lock 재설치

먼저는 yarn.lock 삭제 후 재설치를 해보았지만 동일한 오류가 계속되었습니다.

2. postcss.config.mjs 삭제

프로젝트 내에 postcss.config.js와 postcss.config.mjs 두 가지를 쓰고있어 mjs 파일 하나를 삭제해보았습니다.

그럼에도 불구하고 동일한 오류가 계속되었습니다.

3. 최종 해결: Yarn 기본 동작 설정

여기저기 찾아보니 Yarn은 NODE_ENV=production 일 때, 불필요한 용량과 보안 위험을 줄이기 위해 devDependencies를 설치하지 않는다는 것을 알게되었습니다.

postcss 관련 모듈은 전부 devDependencies에 설치 되어있었기 때문에 당연히 프로덕션 모드에서는 설치되지 않아 해당 모듈을 찾을 수 없던 것이였습니다.

따라서 아래와 같이 Vercel에서 yarn install을 진행할때 devDependencies도 함께 설치하도록 수정했습니다.

• 기존

• 수정 후

Install Command를 수정 후 다시 재배포를 진행하면 정상적으로 배포되는 모습을 볼 수 있습니다.

yarn install --production=false