Using Typescript for a Vercel Function without a "Framework"

Help
1

I have a statically generated website that uses Astro, and i need a vercel function to submit a form.

image
image822Ă—84 9.45 KB

Im quite new to both Astro and Vercel, is there any way i can write my functions in TypeScript?
image
image1346Ă—346 45.1 KB

2

Hey @aryxstocratic.

If you add "type": "module" to the package.json file then the error will go away.

I just tested this with a new Astro example, and the type config was already included for me with the boilerplate starter app. :smile:

{
  "name": "astro-static",
  "type": "module",
  "version": "0.0.1",
 ...
3

i still get the error in the second picture

5

actually did not, sorry :sweat_smile:

Just published the repo on github if you want to take a look

6

Thanks for sharing the repo! After removing a duplicate file and making TS ignore a couple of its complaints, I was able to build and deploy the project.

I used the Astro preset for Build and Development Settings. I just used all of the default settings suggested when I created the new project. And I used Vercel CLI to test the build before deploying it.

Are you using different settings for the project?

7

No, I just created a brand new Astro project and haven’t edited any config files for Astro yet. Also, there are two submit routes in the API folder. I published both to show that they contained the same code.

So, did you manage to get the function to work with TypeScript? What changes did you make to address the “TS ignore a couple of its complaints” issue you mentioned?

8

Btw the error I’m getting (with the same code that is on github):
image

9

I found the issue, but I don’t know how to solve it. Basically, the API is referencing the root directory’s tsconfig instead of the one in the API folder. How can I overcome this?

10

Looking more closely at the API directory, this looks like a monorepo that would be deployed as two separate projects. By default, Vercel’s Node.js runtime builds and serves any function created within the /api directory of a project to Vercel (ref Using the Node.js Runtime with Serverless Functions).

Can you walk me through how you’ve configured the project and the steps you’re using to deploy it?

11

Really nothing:
I scaffolded the astro boilerplate, added some files in src with data to render, and added api folder in root.
The deployment is working out-of-the-box, i let vercel setup everything when i ran the first CLI command.

I just made a deployment with submit.js and not submit.ts and everything works.

https://everything-cnohx9epr-aryxstocratics-projects.vercel.app/
https://everything-cnohx9epr-aryxstocratics-projects.vercel.app/api/test

Its weird that the root tsconfig, that is for Astro, is interfering and overriding the one in the API folder

12

Can you help me understand why you’ve added separate package.json and tsconfig in the /api folder? That’s not a typical setup so I want to be sure I understand the goal.

13

Separating dependencies, i still get the error with removing them tho

14

It would help me to know how you’ve configured the project and the steps you’re using to deploy it. I’ve tried quite a few things and am unable to repro the error you’re seeing. I can get it to successfully deploy or I can get it to throw other errors.

I must be doing something differently from you.

15

“vercel dev” on wsl 2 using Debian, for deploying im using “vercel deploy”

16

What are the Build and Development Settings for the project?