@cloudflare/next-on-pages で async_hooks が見つからずビルドに失敗する [Techblog#43]

先日、このホームページを更新しようとしたところ、以下のようなエラーでデプロイに失敗しました

async_hooks が見つからないというエラーです

Node.js v22.11.0Error: R] Could not resolve "async_hooks"
    <stdin>:118:680:      118 │ ...:()=>N});var R=A(require("async_hooks")),S="@next/request-cont...          ╵                             ~~~~~~~~~~~~~  The package "async_hooks" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.Error: R] Could not resolve "async_hooks"    <stdin>:118:680:      118 │ ...:()=>N});var R=A(require("async_hooks")),S="@next/request-cont...          ╵                             ~~~~~~~~~~~~~
  The package "async_hooks" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
Error: Process completed with exit code 1.

根本の原因としては vercel が 39.1.2 にアップグレードしたことに依るもののようです

この問題はすでに GitHub の Issue でも議論されており、現在ではすでにパッチも提供されています

以下のようにして解決できます

1. package.json を書き換えて @cloudflare/next-on-pages を 1.13.6 以上にアップグレードする

   あるいは、npx や yarn dlx 等の実行時にバージョンを指定する

   npx @cloudflare/next-on-pages@1.13.6

   
   
   

2. Cloudflare のダッシュボードを開き Runtime の Compability date (互換性の日付) を 2024-11-11 以降に設定する

   

...なんですけど、デプロイはできるようになったのですが route.ts で構成される API が動作しなくなりました

500 Internal Server Error と応答していて、ダッシュボードから下のようなログが取れました

{  "logs": [    {      "message": [        "TypeError: Illegal invocation: function called with incorrect `this` reference. See https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors for details."      ],      "level": "error",    }  ]}

Edge Runtime を使ったページは閲覧できるので、Edge の機能が全てが使えないわけではなさそうですね

ただ API も使えないと困るので、暫定的な対応として vercel を 39.1.1 にダウングレードすることにしました...