フロントエンドはいらなくてシンプルな Node.js だけを動かしたい。であれば、Vercel の Serverless Functions だけ使うのも良いかもな〜と思い、Vercel 公式サンプル
を動かしたかったんですが、2024-01-12 時点でそのままでは動かなかったので備忘録です。
$ ghq get https://github.com/vercel/examples
$ cd $HOME/dev/src/github.com/vercel/examples/solutions/node-hello-world
$ pnpm i
$ vercel dev
Vercel CLI 33.1.0
> Ready! Available at http://localhost:3000
http://localhost:3000/api/hello にアクセスすると、エラー。
ログを見ます。
Error: Cannot use import statement outside a module
node_modules/.pnpm/@types+node@17.0.42/node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.
72 declare var AbortSignal: {
~~~~~~~~~~~
../../../../../../../.nodenv/versions/20.11.0/lib/node_modules/vercel/node_modules/typescript/lib/lib.dom.d.ts:2071:13
2071 declare var AbortSignal: {
~~~~~~~~~~~
'AbortSignal' was also declared here.
Found 1 error in node_modules/.pnpm/@types+node@17.0.42/node_modules/@types/node/globals.d.ts:72
これは2つのエラーが表示されていて
Error: Cannot use import statement outside a module
と
node_modules/.pnpm/@types+node@17.0.42/node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.
72 declare var AbortSignal: {
~~~~~~~~~~~
../../../../../../../.nodenv/versions/20.11.0/lib/node_modules/vercel/node_modules/typescript/lib/lib.dom.d.ts:2071:13
2071 declare var AbortSignal: {
~~~~~~~~~~~
'AbortSignal' was also declared here.
Found 1 error in node_modules/.pnpm/@types+node@17.0.42/node_modules/@types/node/globals.d.ts:72
は別物です。
Error: Cannot use import statement outside a module
これは package.json に "type": "module" を追加すれば解消します。
"repository": "https://github.com/vercel/examples.git",
"license": "MIT",
"private": true,
+ "type": "module",
"devDependencies": {
"@types/node": "^17.0.42",
"@vercel/node": "^2.9.6",
再起動します。
$ vercel dev
Vercel CLI 33.1.0
> Ready! Available at http://localhost:3000
http://localhost:3000/api/hello にアクセスすると...動いた！
ですが、ログにはまだ AbortSignal の型が合わないというエラーが出ています。これはエラーメッセージのとおり @types/node と typescript のそれぞれの型が合っていないのでバージョンを揃えると直りそうです。
ここで私の手元の実行環境 node v20.11.0 と設定されていた "@types/node": "^17.0.42" もだいぶ乖離があることに気付きます。
であれば一気に最新バージョンに揃えてみます。
pnpm up --latest
pnpm up --latest
package.jsonで指定されたバージョン範囲を無視して、すべての依存関係を更新します。
これで一気に最新バージョンにしてみましょう。
$ pnpm up --latest
Packages: +81 -15
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------
Progress: resolved 165, reused 146, downloaded 0, added 0, done
devDependencies:
- @types/node 17.0.42
+ @types/node 20.11.0
- @vercel/node 2.9.6
+ @vercel/node 3.0.16
- typescript 4.9.5
+ typescript 5.3.3
Done in 5.1s
@types/node も 20.11.0 になりました。実際には本番環境に合わせて狙ったバージョンにアップデートするのが良いと思います。では、サーバーを再起動して再度アクセスしてみます。
$ vercel dev
Vercel CLI 33.1.0
> Ready! Available at http://localhost:3000
エラーが出なくなりました。
おわり
整理するとこれだけではあるのですが、試行錯誤中はなかなかにハマったのでこれは完全に備忘録です。あとは、 pnpm up --latest が地味に便利だったのでそれもメモということで。
それでは！
Discussion