[Vite/React] Vite HMR 에러 (feat. ContextAPI)

에러 메시지

[hmr] Failed to reload {파일 경로}. This could be due to syntax errors or importing non-existent modules. (see errors above)

 

모든 파일이 아닌 일부 파일에서 변경 사항이 발생할 때마다 이런 에러가 발생했다.

단순히 HMR 문제라서 새로고침하면 되긴 하지만 너무 불편했다.

원인을 찾아보니 Vite에서 ContextAPI 관련한 이슈가 있는 것 같다.

 

React에서 Context와 Context의 Provider를 같은 파일 내에서 작성하면 해당 에러가 발생한다.

따라서, Context를 별도의 파일에서 작성 후, import해서 Provider를 사용하면 해결된다.

 

해당 이슈는 비교적 최근에 해결이 된 것으로 보인다. 최신 버전의 Vite를 사용하면 이 버그가 발생하지 않는다.

 

 

참고자료

https://github.com/vitejs/vite/issues/3301

HMR breaks when modifying React context provider · Issue #3301 · vitejs/vite