Functions not executing with vite

Just running through the functions typescript docs when try to fetch my function fetch('/netlify/functions/products') it just dumps the raw typescript code instead of executing.

Using vite for the site and ntl dev to try and test locallly.

Just confirming if you’re using the correct code, the URL of the function is: /.netlify/functions/products/. Notice the dot before netlify.

Try that as well it makes no difference.

That seems a bummer. Is there somewhere we can test this? A repo probably?

Sure thing right here: https://github.com/unclejustin/fun-with-prisma

Thanks for taking a look @hrishikesh :bowing_man:

FWIW I suspect I’m missing something with Vite’s server configuration. I just don’t know enough about it to make an informed change.

HI @unclejustin

In your code you have

fetch('./netlify/functions/products')

but as @hrishikesh pointed out you need

fetch('/.netlify/functions/products')

If you take this a little further

fetch('/.netlify/functions/products')
    .then((res) => res.json())
    .then((out) => console.log(out.message))

You will see “Hello World” in your browser console.

Hope this helps.

Thanks @coelmay just noticed I had ./ instead of /. thanks to you :tada:

But, now I can’t even get ntl dev to finish :thinking:

It gets to the point where vite is done and says:

image

But never progresses to where localhost:8888 is available.

I’m seeing different results in the repo you shared. That doesn’t seem to be using Vite and Netlify Dev is working fine. Do you have a repo with your case that we can test?

Yeah sorry it’s definitely Vite. I deleted the repo and started over with Vue CLI because I do t have time to troubleshoot this right now.

FWIW Vite worked with netlify dev prior to version 4

If that’s the case, chances are there might be something that might need fixing. So, if we can get an error to reproduce, we can ask our developers to push an update.

I tested your code using netlify-cli/4.0.3 without issue.

Edit: Have upgraded to netlify-cli/4.1.12 and it now doesn’t work.

The plot thickens! Thanks for running with this @coelmay!

@coelmay,

Just to confirm. How did you test it? Did you create a function and add the JS to load fetch the function somewhere?

When you say it doesn’t work, what exactly happens?

I’m asking so that I can reproduce it for myself.

Apologies @hrishikesh, after a couple of failures, every attempt thereafter worked. And I’ve since deleted the local code & GitHub repo. But what happened was the same as @unclejustin’s image above in that it never reached the stage of ◈ Server now ready on http://localhost:8888.

No worried @coelmay, thanks for the info. I’ll recheck this in a while.

@unclejustin I’ll keep you posted with any updates related to this. Please, keep the above repo available for now.

Managed to reproduce @hrishikesh.

Using ntl dev. React on left works, Vite on right does not.

If you wish to test here are my steps. In neither case did I create a netlify.toml and in neither case did I have any functions.

Steps takes

For Vite:

$ yarn create @vitejs/app
# Select name (e.g. vite-project)
# Select `Vue` as framework
# Select `Vue` as variant
$ cd vite-project
$ yarn
$ yarn dev
# Check it runs;
# then initialise netlify
$ ntl init
# link to new site
$ ntl dev
# Does message "Server now ready on http://localhost:8888" appear?
# My experience (using `netlify-cli/4.1.12`) is **no**, only available on port 3000)

For React:

$ yarn create react-app <app-name>
$ cd <app-name>
$ yarn start
# Check it runs;
# then initalise netlify
$ ntl init
# link to new site
$ ntl dev
# Does message "Server now ready on http://localhost:8888" appear?
# My experience (using `netlify-cli/4.1.12`) is **yes*, available on port 8888)

Yes, I see the issue now. Thank you @coelmay and @unclejustin for reporting it.

Update: You all can track the issue here: Netlify Dev server doesn't start with Vite · Issue #2882 · netlify/cli · GitHub.

1 Like

Hi all :wave: Thank you for reporting this issue. A fix for it has been released in v4.1.14.

Please comment if the latest version doesn’t resolve the issue.

2 Likes

Might be useful
https://github.com/web2033/vite-vue3-tailwind-starter/discussions/113

2 Likes