Netlify serverless functions work on development server but not production

Question 1

I’m just starting to explore the world of server less functions at Netlify, but I’ve run into a snag I just cant figure out. I have a function written to post an email to my mailchimp contact list. When I use the cli to run netlify dev, everything works exactly as expected. I can enter an email into the form and it is added to my contacts list in mailchimp on submit, yay!

The problem is however when I deploy to Netlify suddenly it doesn’t work and now returns a 404 with the error leading to the fetch that calls the function.

My fetch call is

    fetch('/api/subscribe', {
      method: 'POST',
      body: JSON.stringify(body),
     })

my netlify.toml is

[build]
  publish = "dist"
  functions="./functions/"
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

The path to the function is

root/functions/subscribe/subscribe.js

The error message reads:

POST https://eddie-traylor.netlify.app/api/subscribe 404 (Not Found)

I have tried many things to get this working, including changing the endpoint to various configurations, fiddling with cors headers, and adding a NODE_VERSION env variable to my netlify app with the same version I have locally, and ensuring that my env variables in Netlify were set correctly.

My app is deployed at: https://eddie-traylor.netlify.app/
The repo for the whole code base can be found at: GitHub – naughty-cat-team/eddie-traylor

Any help pointing me in the right direction would be very appreciated. Thanks in advance!

Question 2

In classic fashion, a sound night of sleep and fresh eyes was all I needed. I solved the problem by doing two things (actually I’m not sure both were necessary, but I will leave them here for anyone who is troubleshooting a similar problem.

The big detail was that in my lambda function, I was exporting incorrectly. Since the project is listed as type: module in package I needed to change my imports (which I had done) and my exports (which I had forgotten to do):

import fetch from 'node-fetch';
import base64 from 'base-64';

export const handler = async (event, context) =>

I also changed my file structure to:

root/netlify/functions/subscribe.js

And the netlify.toml file to match and add functions info:

[build]
  publish = "dist"
  functions = "netlify/functions"
[functions]
  node_bundler = "esbuild"

Now the fetch can be made like this successfully on production and development servers:

    fetch('/.netlify/functions/subscribe', {
      method: 'POST',
      body: JSON.stringify(body),
     })

Hopefully this info will be useful for someone else in the future!

Leave a Comment Cancel reply