Problem with Vercel function with ElysiaJS

[wolfyuan]

Hello there,

I’m currently developing a API service using ElysiaJS. But I’m having trouble to get my code run on Vercel. Here’s what I’ve tried:

1. By following ElysiaJS’s official guide, which setup bundler to bundle whole code, then output to another folder. This config leads to this:
   
   
   
   In this case, I’ve setup build step and configured an output folder to dist or api. The output is being treated as static assets but not functions.
2. Use Vercel’s own build system. I removed every build command and output folder. Also package.json’s build script
   Vercel’s build system now automatically identify how to build the project. Results this output structure:
   
   
   
   Note that here Vercel now treated files as function. But Vercel it didn’t bundle it, which makes the function fail. Due to in my code, the main entrypoint references to another file in project.
3. I built it locally (running bundler on my end), then submit the bundled code inside folder named api to my git repository. Build command and build output folder is not configured.
   
   
   
   This time the function actually work and triggers by going to /api.

TL;DR, problem I’ve encountered:

• Vercel does not treat .js or .ts file as function if I manually set either build output folder OR build command.
• If build command does not output build with Build Output API to output the bundle, I assumes, none of the file will be treated as function.

The code is on GitLab (api subfolder): apps/api · main · Wolf Yuan / Where is my YouBike · GitLab

[wolfyuan]

Note that why I didn’t report this to ElysiaJS side is because I don’t think this only applies to it. I think this problem will occur on different framework as well.

[teyik0]

Somehow the same problem, nothings works.

• Setup myself the build command → deployment failed
• Default conf and no custom build command → deploy success but only one / function is deployed

On all test I made bun just crash with ResolveMessage {} 500 err. No meaningfull output logs during runtime I don’t know why it does not works.
Please help.

[wolfyuan]

Can you try to manually bundling your code with bun build (Documentation here: Bundler - Bun) and deploy that file to Vercel?

In my case it will work because imports to other file is now inside the code rather than on external filesystem. The issue looks like Vercel bundler and deployment system acting weird.

[pawlean (Pauline P. Narvas)]

Moving to a custom build command changes how Vercel treats your project. It essentially stops guessing and starts expecting you to follow the Build Output API format exactly.

When you let Vercel handle the build automatically, it might detect your files but fail to bundle their external dependencies. This is why you’re hitting runtime errors; the function is being deployed, but the supporting code it needs to actually run is missing.

To resolve this, you’ll need to configure your ElysiaJS bundler to output into the .vercel/output/ directory using this structure:

Plaintext.vercel/output/
├── functions/
│   └── api/
│       └── [your-function].func/
│           ├── .vc-config.json
│           └── index.js
└── config.json

By bundling your function into a self-contained .func folder with its own .vc-config.json, you ensure Vercel has all the dependencies it needs right there in the deployment.

Can you give that a go?

[wolfyuan]

I think that’s indeed the case. I’ll try to code a demo w/ Build Output API this weekend.

[wolfyuan]

It seems like Vercel has already implemented correct builder for ElysiaJS now. After testing my project today, I found out there’s a new option here:

After choosing Elysia, I can now build my project without additional build script.

But currently the typescript bundler or compile step still doesn’t transform TS into commonjs file. I need to use Bun runtime to run the file.

Adding following lines to vercel.json does the trick:

{
  "bunVersion": "1.x"
}