404 Error when accessing Netlify Function from Nuxt 3 application

Hi everyone,

I’m experiencing a 404 error when trying to access a Netlify Function from my Nuxt 3 application. The function is properly set up in the netlify/functions directory but returns a 404 Not Found error when called.

Project Setup:

  • Nuxt 3 application
  • Netlify Functions
  • Using Resend for email sending

Directory Structure:
/netlify
/functions
/email
email.ts
package.json

netlify.toml configuration:

[build]
  command = "npm run generate"
  publish = "dist"
  functions = "netlify/functions"

[functions]
  directory = "netlify/functions"
  node_bundler = "esbuild"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200
  force = true
  headers = {Access-Control-Allow-Origin = "*"}

Error:
When making a POST request to /.netlify/functions/email, I get a 404 Not Found error. The function code is correct and the directory structure follows Netlify’s documentation.

Console Error:
POST https://delightful-mooncake-613021.netlify.app/.netlify/functions/email 404 (Not Found)

Client Code:
const { error: emailError } = await $fetch(‘/.netlify/functions/email’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: {
type: ‘artist_application’,
data: {
// …data
}
}
})

I’ve verified that:

The function directory is correctly set in netlify.toml
The function file is in the correct location
The build command is correct
The redirects are properly configured

Any help would be greatly appreciated!

@jbdev are you using npm locally?

does netlify dev work locally?

Hi, thanks for the response. Yes, I’m using npm locally. I haven’t tried netlify dev yet - should I install the Netlify CLI and test that first?

Currently when I try to access the function endpoint at /.netlify/functions/email I get a 404 error. The function exists in the correct location at netlify/functions/email/email.ts and I have the proper netlify.toml configuration:

[functions]
  directory = "netlify/functions"
  node_bundler = "esbuild"

@jbdev, was mainly checking you’re not using pnpm locally as it has issues deploying (at least it does on my astro site)

but yes I think checking it’s working with netlify dev first may eliminate whether it’s a problem with your code setup rather than the deployment

Thanks for the follow-up @codemonkeynorth. I’ve identified the issue - I’m trying to use a Netlify Function for email handling, but I’m getting 404 errors when accessing /.netlify/functions/email in production. Here’s my current setup:

  1. Function structure:
netlify/functions/email/
  ├── email.ts
  ├── package.json
  └── package-lock.json
  1. netlify.toml configuration:
[build]
  command = "npm run generate"
  publish = "dist"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200
  force = true

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  1. I get a Edge Functions error during deployment but that seems to be a red herring - I don’t actually need Edge Functions for this use case, just regular Netlify Functions.

The main issue is that the function endpoint returns 404 in production despite being in the correct location. I’ve verified that:

  1. The function files are being included in the deployment
  2. The function dependencies (Resend) are properly specified in the function’s package.json
  3. The RESEND_API_KEY environment variable is set in Netlify

Could this be related to:

  1. Function bundling configuration?
  2. The way I’m deploying from StackBlitz’s WebContainer environment?
  3. Or do I need additional configuration to expose the function endpoint?

Hi @jbdev,

Thanks for reaching out! Sorry to hear about the issue.

If I’m looking at the correct deploy here (also here), it doesn’t appear that the Function is being detected.

Note within the function log page it mentions:

This feature requires either continuous deployment or manual deploys with Netlify CLI. If you’re not using Netlify CLI, we recommend connecting a Git repository for continuous deployment.

I can see it’s a manual deploy, are you using Netlify CLI or did you use Netlify’s Drag and Drop?

If you’re using Netlify CLI, this section should help:

You may need to add under [build] within the netlify.toml the following:

functions = "netlify/functions"

His file is at the top of this post and that line is included, so it’s not that

Thanks @codemonkeynorth!

Looking at the latest deploy logs, in the Deploy file browser, I see that the netlify.toml file isn’t included which could be the issue. The netlify.toml file should be in the root of the project directory.