旧notion-blogのアップデート

5月末にastro-notion-blogに移行した当ブログですが、元のnotion-blogの枠も、とりあえず残しておきたいなあ、と思いました。でもそのためには、ホスト先のvercel.comの方針により、8月15日で使えなくなるという14系のNode.jsを、いっきに18系に更新しなければなりません。試しにローカル環境でやってみると（nコマンドで18系をただインストールしました）、ターミナル（ちなみにchromeOS flexのLinux環境のものです）からnotion-blogのディレクトリに入って、”yarn dev”とコマンド打っても、そもそもローカルのサーバが起動しません。こんなわけで、いったんは保留にしていたのですが、意を決して更新作業をやり直してみることにしました。以下、その顛末のメモです。

切り分けでアップデート

まず、いったんNode.jsを14系に戻しました。ネットの投稿記事などをいくつか読み、どうやらインストールに同梱されるパッケージツールのnpmも大きく変わっていること、さらにいろいろ入っているツール群の依存関係に問題が出ることなどを知りました。たとえば、こちらの投稿が参考になります。

Node.js 14から18へアップデートする方法について

Corepackを使ってNode.jsをアップデートする ⬆️⬆️というタイトルで、Node.js 14からNode.js 18へのアップデートする方法について話した。

https://efcl.info

とりあえず、npmをアップデートして、その上でcorepackを使うか、関連ツールのインストール時に —legacy-peer-depsのオプションを添えることで、古いバージョンに即した振る舞いができるようです。というわけで、さっそくやってみました。ターミナルでもって同じくnotion-blogのディレクトリに入り、”npm install npm”として、npm自体を最新版にします（9.5.1）。続いて”npm -i —legacy-peer-deps”として、関連ツールをインストールします。

そこから、次にNode.js自体のアップデートです。nで管理していますので、LTS（ロングタイムサポート）の18.16.1に切り替えます。新規にLTSをインストールする場合には、”n —lts”ですね。

この時点で、yarnは使えなくなりました（同梱されていないんですね）。そんなわけで、ローカルでサーバを起動するには”npm run dev”、ローカルでビルドするには”npm run build”をそれぞれ使うことにします。

notion-blog本体の修正など

“npm run dev”でも、やはりサーバが起動しません。ここから先は、どうやらnotion-blogのコードをいじらなければなりません。エラーを確認すると、なにやらページネーションの処理のところで、変数Dateが不正になっているらしいことがわかりました。実はこれ、個人的なミスです。今回のアップデート作業のために、旧ブログの投稿のほとんどを、いったんアーカイブ（Notionで作っています）に移して、ほぼ空の状態にしていたのでした。そのため、そういった空の状態にコードが対応しておらず（投稿データがなくなっているなんて、設計上は完全に想定外ですからね）、エラーを吐いていたのでした。一部のデータを戻してみると、”npm run dev”でちゃんとサーバが立ち上がりました。やれやれ〜。

ローカルでサーバは立ち上がりますが、”npm run build”とすると、200個くらいのエラーが吐き出されてコンパイルができません。これを一つずつ潰していくのは途方もないな、大変だなあ、と思いつつ、主要なもの（出現回収の多いエラー）からちょっとだけ対応してみることにしました。

最初に目についたのは、 ’React’ must be in scope when using JSXという表示のエラーです。検索してみると、これはファイルの冒頭に” import React from 'react' "を入れることで、解決するという簡単なものでした。でもこれを各ファイルに書き込むという作業だけでも面倒です。なにかもっと効率の良い方法はないかな、と、さらに検索を続けてみると、次のようなことがわかりました。

エラーを表示しているのはeslintというツールですが、これがときに結構厳しすぎるようなことを言ってくるのです。「宣言したのに使ってない」みたいなものまでエラーになります。これなどはwarning程度で良いのでは、と思ってしまいますね。そんなのも含めて、エラーがある限り、コンパイルを通してくれません。うーん、なんとかならないか……。で、その方法がありました。

プロジェクトのディレクトリにある.eslintrc.jsの、”rules”:{} という項目に、エラーを吐いているルールを記入して、オフを指定しておければいいのです。こんな感じです。

"rules":{
	"react/prop-types": "off",
	"react/display-name": "off",
	"react/react-in-jsx-scope": "off",
	(...略...）
	"no-constant-condition": "off"
}

もちろん、あんまりやり過ぎてはまずいでしょうけれど、さしあたり、これで200くらいあったエラーは消え、eslintのチェックを無事通過し、コンパイルが完了しました。vscodeからgitのコミットをし、同期をかけてみると、本番環境のvercel.com（あらかじめ、プロジェクトのsettingで、18系のNode.jsを選択しておきます）でもコンパイルが通りました。いや〜、めでたい。これで8月15日以降も、notion-blogの枠が維持できます！