trpcで型エラーが起きたときはバージョンを揃えよう

TRPCはバージョンが異なるとエラーがたくさん発生して泣きそうになる

どういうときにバージョンが異なってしまうのか

基本的にはフロントエンドとバックエンドを同時に作成すると思います。そのときは動きますが、バックエンドでライブラリのバージョンだけ上げてフロントエンドを上げ忘れたりとか、共通のバックエンドで新しいフロントエンドを追加したときなどによくエラーが出て泣きそうになります。
よって、バージョンは固定しましょう。
おかしくなったらlockファイルを消してnode_modulesも消して入れ直しましょう。
それで大体治ります。

困ったらバージョンをしっかり指定してインストールです。
バージョンあげるときも一気にあげましょう。

TypeScriptのバージョンもあわせよう

trpcのバージョンは一緒でも、TypeScriptのバージョンが違ってエラーが出るときもあります。ここもちゃんと揃えましょう。また、VSCODEのTypeScriptのバージョンが違ってエラーが出るときもあります。そういうときはエディタ内蔵のTypeScriptを使ってみたり、自分のインストールしたTypeScriptのバージョンを下げてみたり試行錯誤してみましょう。

基本的にはモノレポでつくったほうが良い

別gitで、完全に別ディレクトリでも動きますけど、たまにわけわからんエラーになったりして泣きそうになるのでモノレポにしておいたほうが良いです。またべつでtrpcのモノレポ最小構成について記事を書きますが、こんな感じのpackage.jsonにしておくとよろしいかと思います。

package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "types": "src/index.ts",
}

index.ts

...etc
export * from "./appRouter";

バックエンド側はこんな感じでappRouterをmainに露出します。

フロントエンド側のpackage.jsonにdependenciesで足してあげます。

package.json

...etc,
 "dependencies": {
    "server": "workspace:*",

こうするとモノレポで良い感じに型がつきます。

superjsonのバージョンもあわせよう

いままでは上記3つでなんとかなっていたのですが、先日、transformerにsuperjsonを入れたとき、superjsonのバージョンが違うせいでなかなかエラーが解消されませんでした。ライブラリのバージョンもしっかりあわせておきましょう。

なにはともあれバージョンをあわせることが大事です。困ったらバージョンをあわせてみよう。それでもダメなら関数の返り値がおかしかったりするので、しっかり関数の型を明記してみたりしましょう。あとは普通にzodSchemaが間違ってたとか。

そんな感じ。