Hono RPC + Azure Functionsを試したら型エラーでハマったメモ

概要

Hono Azure Functionsを試そうとしたらクライアント側のビルドでエラーになった。

エラーメッセージから解決が難しかったので備忘録を残しておく。

ソースコード

発生したエラー

$ npm run build

> @async-ttrpg/pl-app@0.0.0 build
> tsc -b && vite build

D:\projects\async-ttrpg\node_modules\typescript\lib\tsc.js:120127
      throw e;
      ^

TypeError: Cannot read properties of undefined (reading 'push')
    at addLazyProgramDiagnosticExplainingFile (D:\projects\async-ttrpg\node_modules\typescript\lib\tsc.js:121723:41)
    at checkSourceFilesBelongToPath (D:\projects\async-ttrpg\node_modules\typescript\lib\tsc.js:121142:11)

これはエラーが発生したtsconfig.app.tsbuildinfoが残っているときのエラー。
tsconfig.app.tsbuildinfoを削除するようにしたら解決した。

package.json

{
  "name": "@async-ttrpg/pl-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
+    "prebuild": "rm -rf ./node_modules/.tmp",
    "build": "tsc -b && vite build",
    "lint": "eslint",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "dotenv -e .env.local -- bash -c 'swa deploy ./dist --env production'"
  },
  "dependencies": {
    "hono": "^4.5.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@async-ttrpg/eslint-config-custom": "*",
    "@azure/static-web-apps-cli": "^1.1.10",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.7.0",
    "dotenv-cli": "^7.4.2",
    "typescript": "^5.5.3",
    "vite": "^5.3.4"
  }
}

tsconfig.app.json

{
  "extends": "@async-ttrpg/tsconfig/tsconfig.frontend",
  "compilerOptions": {
    "paths": { 
      "@pl-app/*": ["./src/*"],
      "@api/*": ["../api/src/*"],
     },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
  },
  "include": ["src", "../api/src"],
  "exclude": ["node_modules", "dist"]
}

型解決ができないエラー

const app = new Hono()
app
  .get('/', (c) => c.text('Hello Azure Functions!'))

この状態でクライアント側をビルドしようとしたら下記エラーが発生。

src/App.tsx:13:25 - error TS18046: 'client' is of type 'unknown'.

13       const res = await client.api.httpTrigger1.$get();
                           ~~~~~~

解決方法

const app = new Hono()
- app
  .get('/', (c) => c.text('Hello Azure Functions!'));

一度変数で受けるとうまくいかないようだった。const app = new Hono().get('/', (c) => c.text('Hello Azure Functions!'));のようにHonoをnewしてからメソッドチェーンを行うことで型エラーは解決された。

参考

Hono Example RPC