[Storybook] About Crash : Storybook-Tailwindcss

 

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes.

1️⃣ Vite환경에서의 Storybook과 Tailwindcss와의 충돌

 아래의 환경에서 생긴 충돌입니다.
Tailwindcss v.4.0.0
Storybook/react-vite v.8.5.2

 

Vite 환경에서 처음 개발을 하던 도중 아래의 사진과 같은 에러가 나타났습니다.(25.02.26 시점입니다.)

에러 코드명

tailwindcss가 postcss 기반에서 vite플러그인으로 v.4.0.0부터 바뀌게 되면서 생긴 문제였습니다. 혼자 트러블 슈팅을 해봤지만 잘 안되었는데요. tailwindcss 버전을 다운버저닝 하려던 찰나에 github issue 에서 v.4.0.9 를 쓰면 해결된다는 커멘트가 달렸어요.

 

2️⃣ 해결

[Bug]: Crash with "The argument 'path' must be a [...] without null bytes." with `@tailwindcss/vite` 4.0.8 · Issue #30626 · st

Release v4.0.9 · tailwindlabs/tailwindcss

 

이 Issue와 release가 저에게 도움을 주었습니다. 결론만 말하면 tailwindcss의 버전을 v.4.0.9로 맞추면 되는거였어요.

 

npm install tailwindcss@4.0.9 @tailwindcss/vite@4.0.9

 

이렇게 설정하면 해당 에러가 없어집니다.