Turbopack에서의 Hot Module Replacement문제
어제 프로젝트를 수정하던 중, css가 제대로 적용되지 않는 문제를 발견했다. post의 미리보기 사진의 border radius를 수정하고 싶은데 적용이 되지 않았다. 그래서 tsx파일에서 직접 스타일을 지정해주었더니 또 즉시 적용이 되었다. 모든 css파일이 적용되지 않는 것은 아니고, 특정 파일에서의 css변경 내용이 특정 시점 이후로 적용되지 않는 것이었다. 그래서 css와 tsx파일 사이에서 어떤 문제가 발생하고 있을거라 추측했다. 적용 내용은 다음과 같다. 이제 dev에서 확인을 해보면 다음과 같이 적용된다. 이 내용은 내가 테스트를 하기 위해 이전에 적용시켜놨던 설정이다. 단순히 이전에 있던 설정이 캐시로 인해 업데이트 되지 않는 것인가? 라고 생각했지만 .title을 아예 빈칸으로 뒀을 때에는 정상적으로 적용이 되는 모습을 볼 수 있었다. 다음은 원인이 됐을법한 문제들이다. 1. .next 캐시 문제 간혹가다 .next 캐시를 지우지 않을때 css모듈 캐시가 꼬이는 경우가 있다고 한다. 하지만 위에서 확인했듯이 업데이트가 즉각적으로 될 때가 있는 것을 보면 기대는 하지 않았고, 역시 파일을 지워봐도 문제는 해결되지 않았다. 2.Tailwind CSS에서의 콘텐츠 경로 설정 인터넷에 나와 비슷한 문제를 겪은 사람이 있을까 싶어 검색을 해보았더니, tailwind의 config경로 문제로 인해 제대로 적용이 되지 않았다고 한다. 나는 Tailwind를 사용하진 않지만 설치는 되어있었는데, 해당 패키지를 지워보아도 문제는 해결되지 않았다. 3.Turbopack의 CSS 모듈 HMR(Hot Module Replacement) 버그 turbopack이 빠르다고 해서 쓰고 있었는데, 아직 Next.js에서 사용하기에 안정된 번들러가 아니라고 한다. package.json에서 다음 내용을 수정해주었다. webpack으로 실행 후 즉시 css가 적용되는 점을 볼 수 있었다. rebuild 속도에서 차이도 심하게 느껴지진 않았고, dev에서도 여러 이슈로 인해 turbopack이 안정되기 전까지는 webpack을 사용하기로 했다.
2026년 2월 8일