Vite 에서 commonjs build 관련 에러

이슈

개발시에는 문제 없지만 빌드 후 실행시 에러가 발생.
어떤 코드 중 기본 내보내기로 class가 있고 이 class는 정적 메서드를 가지고 있다.
정적 메서드를 호출할 때 에러가 발생한다.

에러 메시지

a.default.init is not a function

a가 바로 기본 내보내기 모듈이며 cjs 방식으로 트랜스파일되며 default를 통해서 실행되는 것을 볼 수 있다.
하지만 default에 값은 class가 아닌 모듈의 명명된 내보내기 값들이 정의되어 있다.
재미있는 점은 a.default.default에 class 가 할당되어 있다는 점이다.

근본적인 원인은 CJS를 이상하게 다루는데 있다.
문제가 되는 패키지의 package.json 의 조건부 내보내기 는 아래와 같다.

  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "module": "./dist/index.es.js",
      "default": "./dist/index.cjs.js"
    }
  },

어떤 이유에선지 module 속성을 vite 빌드시 처리하지 못하는 것으로 보이며 module을 browser로 변경하면 제대로 작동하는 것을 확인했다.

 

결국 vite config를 통해서 해결하는 방식으로 처리했다. 문제가 되는 패키지의 기본내보내기 처리 방식을 자동으로 처리하게끔 설정해주어 default 에 정상적으로 기본내보내기를 할당해주도록 만들었다.

 

vite.config.js

  build: {
    commonjsOptions: {
      requireReturnsDefault: (id) => {
        if (id.includes("node_modules/@walletconnect/sign-client")) {
          return "auto";
        }
        return false;
      },
    },
  },