[react/vite] Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=

vite 환경에서 토스트그리드(toast grid)를 사용하는데, 로컬에서는 잘 돌아가는데, 빌드 후 nginx에 올리니 위 제목과 같은 스크립트 에러가 발생하고 화면이 뜨질 않았다.
얼마간의 검색 후, 해결이라기 보다는 우회책을 찾게 되어 기록한다.

• Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=

  1. 페이지보다 선행되는 ajax call에 에러가 없는지 점검 (e.g. /api/v1/getMsgList)

  2. 1에 문제가 없다면

     • 일부 서드파티 라이브러리에서 ESM에 적합하지 않은 구조/패키징을 했기 때문에 vite 환경에서 에러 발생.

     • 이 에러는 로컬에서는 발생하지 않고 build 후 웹서버에서 실행시 발생한다.

     • 해결방법: import 문 수정 및 소량의 소스코드를 추가하여 우회한다.

     • 수정 전 예시

       import Grid from '@toast-ui/react-grid';
       ...
       return <>
        <Grid .../>
       </>

     • 수정 후 예시

       import G from '@toast-ui/react-grid';
       ...
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       const Grid = G.default ? G.default : G;
       ...
       const grid1 = useRef<typeof Grid>(null); // 스크립트 내에서 type으로 사용시
       ...
       return <>
        <Grid .../>
       </>

     • 참고

       • https://github.com/vitejs/vite/issues/2139