vercel / vercel/examples

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

Open
#1,240 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.2k
Forks
1.8k
Avg merge
3d 12h
Merged PRs (30d)
6

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/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/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/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/Users/lance/Library/pnpm/global/5/.pnpm/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/node_modules/ts-node/src/index.ts:863:19)
    at createFromPreloadedConfig (/Users/lance/Library/pnpm/global/5/.pnpm/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/node_modules/ts-node/src/index.ts:874:36)
    at create (/Users/lance/Library/pnpm/global/5/.pnpm/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/node_modules/ts-node/src/index.ts:624:10)
    at Object.register (/Users/lance/Library/pnpm/global/5/.pnpm/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/node_modules/ts-node/src/index.ts:591:15)
    at Object.<anonymous> (/Users/lance/Library/pnpm/global/5/.pnpm/ts-node@10.9.1_@types+node@16.18.11_typescript@4.9.5/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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with package.json and src/index.ts, then reproduce the failure with vercel dev using the hono-on-vercel example. Compare the TypeScript version and compiler options used locally with those used by the Vercel development runtime. Done means the example starts locally and http://localhost:3000 no longer returns a 502.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript
Domain
cloud, devtools
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.