ブログがデプロイできなかったので直した

原因はよくわからないが壊れたので直した。

何もしていないのに壊れた

このブログは Gatsby で作っており、ホスティングには Vercel を使っている。ある日から、Vercel 側の変更の影響を受けたのか、デプロイが失敗する（デプロイに成功したものを再デプロイしても失敗）ようになった。色々試行錯誤していたせいで、何が原因なのかよくわからない。そこで、頑張って直すのではなくえいやと一から作り直すことにした。

やったこと

作り直すといってもコードはそのまま使うのでそんなに時間はかからない、はずだったがかなり時間がかかった。

初期化してファイルを移動する

まず、TypeScript and Gatsby | Gatsby を参考に雛形を作る。npm init gatsby -ts をするだけで良い。雛形が正しく動くのを確認できたら、壊れているブログのファイルを全部移動させる。

次にビルドしてみるが、エラーが出てうまくいかない。原因は gatsby-config.ts などの設定ファイルが読み込まれていないことだった。gatsby-plugin-typescript | Gatsby をインストールすると .ts の設定ファイルが読み込めた。npm init gatsby -ts で gatsby-config.ts が作成されるので当然 .ts を読み込んでいると思っていたが、プラグインが必要らしい。

この辺りはよくわかっていない。

TypeScript integration for pages is supported through automatically including gatsby-plugin-typescript.
TypeScript and Gatsby | Gatsby

自作プラグインを追加する

./plugins/gatsby-xxx 以下の自作プラグインを読み込むようにした。プラグインは TypeScript で書いている。gatsby build するときに TypeScript で書かれたプラグインもよしなにやってくれるかと期待したがそんなことはなかったのでコンパイルする必要がある。

コンパイルして gatsby build するがどうにもうまくいかない。CommonJS と ES Modules が混ざっているといういつものやつである。

関係があるかはわからないが、gatsby-config/node.js doesn't support ESM import/export · Issue #23705 · gatsbyjs/gatsby という話題を見つけたので、プラグインで使っている syntax-tree/unist-util-visit: utility to visit nodes のバージョンを 2.0.3 に下げた。そして、package.json と tsconfig.json は初期状態（必要なライブラリは追加した）でコンパイルすると、gatsby build が成功した。gatsby build するための設定とプラグインをコンパイルするための設定は異なるらしい。

感想

エラーの解消にかなり時間がかかった。gatsby build は完全にブラックボックスで使っているので、エラーが出たときにどこが問題なのかさっぱりわからなかった。

モジュールに関してもよくわかってないまま適当にいじって通れば OK とやっているので毎回時間がかかっている。とりあえずタスクに積もう。