Closed5ヶ月前にクローズ1

TanStack Start/CF Pages, Error: Context is not available

Cloudflare Pages

nakasyou

経緯

Cloudflare Pages 上に TanStack Start (Solid.js) デプロイして変なエラー

Error: Context is not available at http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:70484 at Object.parse (http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:70248) at Object.<anonymous> (http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:69674) at JSON.parse (<anonymous>) at Object.parse (http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:69572) at http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:71684 at Array.forEach (<anonymous>) at Vs (http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:71387) at Xi (http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:4:15067) at http://127.0.0.1:8788/_build/assets/client-Dn_RA0k1.js:2:8930

HTML の中にエラーが書いてあって、ステータスは 200 OK

理由/修正

TanStack Start は Vinxi というフレームワークつくるフレームワークに依存していて、Vinxi は Nitro という Web アプリケーションフレームワークに依存指定いる。
Nitro は AsyncLocalStorage に依存していて、Cloudflare Workers の nodejs_compat の有無を見て AsyncLocalStorage の import を決めているっぽい。import しない場合、エラー吐く。

wrangler.toml に nodejs_compat があるかを自動的に読み取っているが、wrangler.toml が Cloudflare Pages のビルド環境になかったためエラー吐いた。

export default defineConfig({
  tsr: {
    appDirectory: 'src',
  },
  server: {
    preset: 'cloudflare-pages',
    cloudflare: { nodeCompat: true } // 追加
  },

参考

このスクラップは5ヶ月前にクローズされました