Uncaught (in promise) TypeError: hoge is not a function エラー

webpack等を使用したTypeScript環境で 、wasm-pack build で生成された pkg を import してwasmの関数を使おうとしても、なぜかis not a function というエラーが出てしまう。

以下では、oxgame.make_initialized_grid というwasmの関数を呼び出しているが、「oxgame.make_initialized_grid is not a function」というエラーが発生してしまっている。

import * as oxgame from "../pkg/oxgame";

const entry_point = async () => {
    console.log("entry_point");

    let grid = oxgame.make_initialized_grid();
    console.log(grid);
}

window.onload = () => {
    entry_point();
}

consoleに出力されたエラー内容

TypeScriptを使わない生のJavaScript環境ではwasmの関数を呼び出せているので、webpackでトランスパイルするときに関数の実体が紐付かれてなさそう？とにかくwebpackの設定が悪いだろうとあたりを付ける。

ごちゃごちゃした結果、webpack.config.jsとtsconfig.jsonの2つの設定を追加すると正しく呼び出せるようになった。

webpack.config.js に asyncWebAssembly: true を追加

// webpack.config.js
module.exports = {
    ...
    experiments: {
        asyncWebAssembly: true,
    },
}

参考：Experiments | webpack

tsconfig.json の module を ESNext にする

{
  "compilerOptions": {
    "module": "ESNext", //"commonjs", 
    ...
  }
}

参考：Typescript + WebAssembly(Rust)の環境設定 - Qiita

すると

import * as oxgame from "../pkg/oxgame";

const entry_point = async () => {
    console.log("entry_point");

    let grid = oxgame.make_initialized_grid();
    console.log(grid);
}

/* module を ESNext にしたら window.onload が呼ばれなくなったよ */
// window.onload = () => {
//     entry_point();
// }
entry_point();

エラーは消えてちゃんと動いている

wasmの関数呼び出しに成功しました。

正直よくわかってないです。