TypeScriptのesModuleInterop忘れでimportエラー

エラー事象

Agora Web SDK(v4.12.0)でTypeScript＆webpack環境を作った時、importしたSDKがundefinedになってちょっとハマった。

index.ts

import AgoraRTC from 'agora-rtc-sdk-ng';
console.log('AgoraRTC:', AgoraRTC); // 'AgoraRTC: undefined'

同じようにハマってる人がいて、Agoraが提供してるReactサンプルではちゃんと動いていてなんでだろうと思ってた🤔

• "export 'default' (imported as 'AgoraRTC') was not found in 'agora-rtc-sdk-ng'

原因

tsconfig.jsonの esModuleInterop の指定漏れでした。
とりあえず、以下の指定でちゃんと読み込めました👍

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

• ソース全文

参考記事

• よく分からなかったのでCommonJSとTypeScriptのES Modulesinteropについて調べてみた