【失敗】Cloudflare Pages上のRemixにChakra UIを適用したいので調査する

ピン留めされたアイテム

結論

Chakra UIはEmotionに依存している
Emotionは内部的にNode.js APIのBufferを参照している部分がある
Cloudflare PagesやCloudflare WorkersはV8をネイティブ実行しているため、Node.js APIを参照しようとすると未定義エラーを吐く
Chakra UIを利用したい場合はCloudflareを避けるしか現状では方法がない
Cloudflareを使うならEmotion依存のUIフレームワークは使えないものとしてUIデザインを組む

Vueで作っていたものをRemixに置き換えようと思い、移行先としてCloudflare Pagesを検討していた。

しかし、移行時に使おうと思っていたChakra UIが以下のエラーでデプロイできなかった。

Uncaught ReferenceError: Buffer is not defined

上記のリポジトリでは他にも色々と変更を加えていて、単純な調査には使えなさそうだったので、別個検証用のリポジトリを作成することにした。

比較用のRemix App Serverも加え、以下の3つで動作検証をする。

初期設定状態で動作するか確認し、すべて動作。

Remix App ServerでChakra UIが問題なく動作したことを確認。

Cloudflare PagesやCloudflare WorkersはV8がネイティブに実行されているため、Node.jsのAPIであるBufferが存在しない。

これを解決するための手段としてremix-esbuild-overrideが紹介されているが、Issue作成者のコメントを見る限りは動作しないよう。

変わらずエラーが出た。
ダメそう。

依存関係にNode.jsのBufferを読ませてglobalThis.Bufferに突っ込む荒業も紹介されていたが、これも動かなかった。
ダメそう。

今回、Chakra UIを使いたいモチベーションは一部のUI部品を置き換えたいというだけなので、採用せずTailwind CSSで部品を自作する方向に倒すことにする。

ということでダメでしたという話。