Serverless Functions not running locally with ViteJS (Vue 3)

[arhaanb]

Hi!

I created a ViteJS App with Vue 3 and deployed it to Vercel. I'm having issues developing Serverless Functions. I've added an API folder with a test.js file. The output that I should get while developing with vercel dev is this:

But this is what I get:

This issue isn't present on the deployed website, it only happens when I use vercel dev to develop these functions on my local machine.

• Deployed Site: vite-iss.vercel.app/api/test
• GitHub Repository: github.com/arhaanb/vite

Is there an issue in my configuration?

Any help is appreciated!
Thank you!

[KeramasWiguna]

I got some workaround

Just change the dev script on the package.json to something other than dev (eg: dev:vite). With that i can develop my function locally, but the trade off is I need to run 2 server, 1 for function development (vercel dev) and one for the front end.

[yurixcode]

The solution proposed by @KeramasWiguna does not work for me, when executing vercel dev, it stays stopped until skipping timeout ...

This "fix" does not work, the problem comes from that vercel dev uses webpack underneath, which when using Vite, it does not work as it should ...

I have looked for solutions and at the moment I have not found anything, a solution by Vercel would be fine on this, right now it is the only thing that prevents me from continuing to develop my serverless functions locally, is there anything I can do in the meantime?

[NuroDev]

Not sure if this is of any help @yurixcode, but the best I have found to work has been running vite build --watch along side vercel dev. That way you get hot-reloading of content that the Vercel dev server picks up.

[thisjeremiah]

Replacing the dev script with "vite --port $PORT" seems to solve the problem.

https://vercel.com/blog/vercel-dev#gatsby-and-node.js-functions

[NuroDev]

@thisjeremiah I tested this but wasn't able to get it to work. Got import errors (Also MIME type errors as I am loading sound files)

[thisjeremiah]

This reproduction of the original example might help:

Code:
https://github.com/thisjeremiah/vite

Website:
https://vite-psi.vercel.app/

[arhaanb]

I got the server to run but I'm still getting the same error where the API routes show the JavaScript code itself instead of the expected output.

[Guitouxx]

Hi,

I don't know if you find a solution for this issue @arhaanb, but did you try to change the build & development settings through your vercel project settings?

[m0o0scar]

@Guitouxx 's solution above works for me! Thanks a lot! I noticed that even I've changed the dev script locally in package.json, when I run vercel dev --debug, the console output shows that it's still using vite as dev command:

$ vercel dev --debug
> [debug] [2022-01-03T08:33:55.810Z] Found config in file ...
...
> Running Dev Command “vite”
...

I have to update the dev command from Vercel project setting to make it work.