Hono on Vercel example throws 502 when running vercel dev #1240
Description
Context
The hono-on-vercel works as expected when using the 1-click "Deploy" button on Vercel. But pull down the repository, make no changes, run vercel dev, and then go to http://localhost:3000 and it immediately throws 502 Bad Gateway.
Response
502: BAD_GATEWAY
Code: NO_RESPONSE_FROM_FUNCTION
Error output
> Ready! Available at http://localhost:3000
/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:859
return new TSError(diagnosticText, diagnosticCodes, diagnostics);
^
TSError: ⨯ Unable to compile TypeScript:
error TS5023: Unknown compiler option 'verbatimModuleSyntax'.
at createTSError (/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:859:12)
at reportTSError (/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:863:19)
at createFromPreloadedConfig (/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:874:36)
at create (/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:624:10)
at Object.register (/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:591:15)
at Object.<anonymous> (/Users/lance/Library/pnpm/global/5/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/register/index.js:1:16)
at Module._compile (node:internal/modules/cjs/loader:1706:14)
at Object..js (node:internal/modules/cjs/loader:1839:10)
at Module.load (node:internal/modules/cjs/loader:1441:32)
at Function._load (node:internal/modules/cjs/loader:1263:12) {
diagnosticCodes: [ 5023 ]
}
Error: Function `src/index.ts` failed with exit code 1
Steps to reproduce
- Go to https://vercel.com/templates/backend/hono-on-vercel
- Click the black Deploy button in the upper right corner of the page next to the View Demo button
- Connect via a Provider (I used GitHub)
- Give the repo a name, select a Team, and click the Create button
- Watch Vercel build and deploy the project
- Continue to Vercel Dashboard, find the Domain, and open the hono app to verify it works as expected ✅
- Click the Repository button in the upper right
- Clone the git repo to local machine and
cdinto the project - run
vercel dev - Set up and develop: Y
- Select Vercel scope
- Link to the project it finds: Y
- Server starts up:
Ready! Available at http://localhost:3000 - Navigate to http://localhost:3000
- A 502 Bad Gateway response is served and the error above is logged
Possible Diagnosis
Why does Vercel 48.1.6 (latest) install typescript 4.9.5 despite package.json specifies "typescript": "^5.8.3". The TypeScript flag verbatimModuleSyntax is only available in v5+.
% pnpm why --global typescript
Legend: production dependency, optional only, dev only
/Users/lance/Library/pnpm/global/5
dependencies:
vercel 48.1.6
├─┬ @vercel/express 0.0.22
│ └─┬ @vercel/node 5.3.24
│ ├─┬ ts-node 10.9.1
│ │ └── typescript 4.9.5 peer
│ └── typescript 4.9.5
├─┬ @vercel/h3 0.1.2
│ └─┬ @vercel/node 5.3.24
│ ├─┬ ts-node 10.9.1
│ │ └── typescript 4.9.5 peer
│ └── typescript 4.9.5
├─┬ @vercel/hono 0.1.2
│ └─┬ @vercel/node 5.3.24
│ ├─┬ ts-node 10.9.1
│ │ └── typescript 4.9.5 peer
│ └── typescript 4.9.5
└─┬ @vercel/node 5.3.24
├─┬ ts-node 10.9.1
│ └── typescript 4.9.5 peer
└── typescript 4.9.5