Hono on Vercel example throws 502 when running `vercel dev`

[lance-anderson]

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 cd into 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

[lance-anderson]

Apparently this is an outstanding issue. Consider fixing the example so it works out of the box and newbies don't waste time chasing down unresolved issues in the platform.

• https://github.com/vercel/vercel/issues/13212
• https://github.com/vercel/vercel/issues/12803
• https://github.com/vercel/vercel/issues/12682