🛬

Cloudflare Pages で GatsbyJS を使って SSG する時の各バージョンの指定

2022/11/23に公開

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。

.nvmrc

17.9.1

gatsbyの最新版は2022年11月時点で5.x。

5.xでは Node.js 18 に依存しているため、最新の Gatsby は Cloudflare Pages でビルド出来ない。

そのため、最新ではない4.x系をインストールする必要がある。

npm install gatsby@4.x

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 になったので問題になってるよ、との声がちらほらあります。