storybook + vite import.meta.url 경고문 (Vite가 동적 import를 분석할 수 없는 문제)

History

• storybook + vite 실행 시, 경고 문이 발생한다.

Issue

/Users/user/Documents/workspace/ladb-slot-booking-frontend/packages/ui/src/styles/StyleProvider.tsx
51 |    window.$RefreshReg$ = prevRefreshReg;
52 |    window.$RefreshSig$ = prevRefreshSig;
53 |    import(import.meta.url).then((currentExports) => {
   |           ^
54 |      RefreshRuntime.registerExportsForReactRefresh("/Users/user/Documents/workspace/ladb-slot-booking-frontend/packages/ui/src/styles/StyleProvider.tsx", currentExports);
55 |      import.meta.hot.accept((nextExports) => {
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

• Vite가 동적 import를 분석할 수 없는 문제로 발생하였다.

Solution

• Q. 왜 이러한 문제가 발생하는 걸까?
• 동적 import 구문이 Vite의 정적 분석을 방해하고 있기 때문
• @vitejs/plugin-react 내부 내장되어 있는 react-refresh 플러그인은 React 컴포넌트의 상태를 유지하면서 빠른 새로고침(Hot Module Replacement, HMR)을 가능하게 하는 역할을 한다. 하지만 때때로 다른 플러그인의 설정과 충돌을 일으킬 수 있다. ⇒ 'react-refresh' 플러그인이 동적 import와 관련된 코드를 주입할 수 있기 때문 ⇒ 스토리북 환경에서 해당 플러그인을 제거함으로써 동적 import와 관련된 경고 방지가 필요함