Cloudflare Pages で GatsbyJS を使って SSG する時の各バージョンの指定
Reactベースの静的サイトジェネレーターGatsbyを使ってCloudflare Pagesでビルドしてホスティングするときに、バージョンによる制限があって、ちょっとハマった。
※逆に自分がハマっていないところは書いていないが、おそらくバージョンを指定する必要があると思う。
Node.js のバージョン
Cloudflare Pages の Node.js のデフォルトバージョンは12.18.0。
Supported versions はAny version up to 17.xとあるので、17.xでバージョンを指定する。
（ここでv18を選択出来ない事がすべての問題の根源）
指定するファイルは.nvmrcか.node-version。
17.9.1
Gatsby のバージョン
gatsbyの最新版は2022年11月時点で5.x。
5.xでは Node.js 18 に依存しているため、最新の Gatsby は Cloudflare Pages でビルド出来ない。
そのため、最新ではない4.x系をインストールする必要がある。
npm install gatsby@4.x
gatsby-plugin-styled-components のバージョン
gatsby-plugin-styled-componentsの最新版は2022年11月時点で6.x。
6.xのgatsby-plugin-styled-componentsは、5.xのgatsbyに依存している為、これもバージョンを落とす必要がある。
こちらはリリースノートなどはなかったが、 GitHub の History から見た限り、5.x系にすれば良さそう。
npm install gatsby-plugin-styled-components@5.x
その他
Cloudflare Pages の Node 18 対応はちょくちょく話題に出ている模様。
これは new build image が出来たらサポートされますよ、とのこと。
（一体いつリリースされるのか。。）
Discussions では Gatsby 5 が node 18 required になったので問題になってるよ、との声がちらほらあります。
Discussion