[트러블슈팅] Vite프로젝트에서 react-virtualized 사용 시 문제

Vite 프로젝트에서 react-virtualized 라이브러리를 사용하면 아래와 같은 컴파일 에러가 발생한다.

X [ERROR] No matching export in "node_modules/.pnpm/react-virtualized@9.22.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-virtualized/dist/es/WindowScroller/WindowScroller.js" for import "bpfrpt_proptype_WindowScroller"

    node_modules/.pnpm/react-virtualized@9.22.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js:74:9:
      74 │ import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
         ╵          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  vite:deps removing cache dir C:/Users/INNOGRID/Desktop/dev/cmp-frontend/node_modules/.vite/deps_temp_ecd1a58f +735ms

 

라이브러리에서 아직 픽스를 못한 것 같다. 어떤 친절한 개발자가 에러를 해결하기 위해 Vite 플러그인을 만들어서 배포해줬다.

pnpm install -D esbuild-plugin-react-virtualized

 

라이브러리를 dev-dependency로 설치한 후 Vite 설정 파일에 plugin으로 등록해준다.

import fixReactVirtualized from 'esbuild-plugin-react-virtualized';

...
   optimizeDeps: {
      esbuildOptions: {
         plugins: [
            fixReactVirtualized,
         ],
      },
   },
...