Bug : esModuleInterop: false -> true, dayjs is not function

[unchaptered]

한 일

현재 test/unit/modules/provider 브런치에서 DayjsProvider 를 테스트하고자 합니다.

에러 내용

DayjsProvider.prototype.getDayjsInstance() 에 대한 호출 테스트 실행 시 다음과 같은 에러가 발생합니다.

dayjs is not function

~/src/modules/providers/dajys.provider.ts 파일의 위 2 줄이 jest, esbuild-jest 와 충돌이 나고 있습니다.

import "dayjs/locale/ko";
import * as dayjs from "dayjs";

아마도, tsc tsconfig.json 과 esbuild-jest 이 컴파일 단계에서 다르게 작동하는 것 같습니다.

조치 사항

• TypeError: dayjs_1.default is not a function iamkun/dayjs#475

위 이슈에서 "esModuleInterop": true 를 사용하면 다음과 같이 변경시킬 수 있음을 알게 되었습니다.

• before : import * as dayjs from "dayjs";
• after : import dayjs from "dayjs";

TypeScript Compiler Configuration Options - esModuleInterop 에 따르면, 해당 옵션은 기본적으로 false 입니다.
또한 다음과 같이 설명 되어 있습니다.

Emit additional JavaScript to ease support for importing CommonJS modules. This enables allowSyntheticDefaultImports for type compatibility.

사실 해당 부분의 설명이 조금 명확하지 않은 것 같아서 더 구글링 해보니, TypeScript import 가 javascript 의 import 와 다르게 작동하는 것을 알게 되었습니다.

기본적인 tsc, TypeScript 에서의 import 에 대한 원리 ("esModuleInterop": false) 는 다음과 같습니다.

JavaScript CommonJS	TypeScript ES Module
const moment = require("moment")	import * as momment as "momment"
const moment = require("moment").default	import moment from "moment"

이러한 import 에 대한 구동 원리가 esbuild-jest 와 tsc 가 다르기 때문에 commonjs 와 동일하게 변경해야 합니다.
따라서, "esModuleInterop": true 로 설정하는 구문을 tsconfig.build.json 과 tsconfig.json 에 포함시키면 됩니다.

{
  "compilerOptions": {
    "esModuleInterop": true,
  }
}

그리고 src/**.ts 파일에 포함되어 있는 namespace import 구문을 전부 일반 import 구문으로 변경하는 것으로 문제가 해결되었습니다.

• Referecnes : Intro to the TSConfig Reference - ES Module Interop

환경 설정

OS: Windows 10
Node:  v16.15.1 (@unchaptered), v16.13.1(@axisotherwise)
npm : v8.11.0 (@unchaptered), v8.2.2 (@axisotherwise)

[unchaptered]

main 브런치로 병합하고 배포 전까지 지속적인 모니터링 기간 을 가지고 이상 행동이 식별되면 다시 이슈를 열겠습니다.

[axisotherwise]

평소 esModuleInterop 옵션에 대해 잘 모르고 무지성으로 사용하고있었는데 감사합니다!