CommonJSとESModuleの設定ミスでSlackアプリを実行できなかった話

@slack/boltとchatgptを組み合わせて、Slackアプリを開発しようとしていた。

このときのtsconfig.jsonでは、moduleはCommonJSを示していて、targetはES2017を指していた。

tsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2017",
    ...
  },
  ...
}

そして、tscを使ってsrc/index.tsのビルドを行い、nodeを使って生成されたbuild/index.jsを実行しようとした。

ビルドは通ったものの、nodeでの実行に失敗した。

> tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json

/Users/takagimeow/example/build/index.js:9
const chatgpt_1 = require("chatgpt");
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/takagimeow/example/node_modules/chatgpt/build/index.js from /Users/takagimeow/example/build/index.js not supported.
Instead change the require of /Users/takagimeow/example/node_modules/chatgpt/build/index.js in /Users/takagimeow/example/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/takagimeow/example/build/index.js:9:19) {
  code: 'ERR_REQUIRE_ESM'
}

具体的にいうと、生成されたbuild/index.jsはCommonJSモジュールなのに、ESModuleであるnode_modules/chatgpt/build/index.jsを使おうとしているために発生したエラーだった。

そこで今度は、moduleをESNextに設定してみることにした。

tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2017",
    ...
  },
  ...
}

今度は、ESモジュールではないbuild/index.jsで、importを使っていたがためにエラーが発生した。

import bolt from "@slack/bolt";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1149:20)
    at Module._compile (node:internal/modules/cjs/loader:1190:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

これは、chatgptのリポジトリにもIssueとして上がっていたが、これはchatgpt特有の問題ではない。

この問題を解消するには実行対象のJavaScriptファイルの拡張子をjsからmjsに変更しないといけない。

なので、ビルド対象のsrc/index.tsの拡張子をsrc/index.mtsに変更した。これにより、生成されるbuild/index.jsはbuild/index.mjsとして生成されることになる。

そして、もう一度実行してみた。

$ tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && node ./build/index.mjs

...
[INFO]  socket-mode:SocketModeClient:0 Going to establish a new connection to Slack ...
⚡️ Bolt app is running!
[INFO]  socket-mode:SocketModeClient:0 Now connected to Slack

今度は成功した。

このあと、tsconfig.jsonのtargetもESNextに変更したが、きちんと動くことを確認できた。

---