Netlify functions not found on dev server

Question

I have followed several blogs and questions related to the same problem I am having. It is exactly like this question. However, I am still having issues.

So, I am running netlify dev and trying to access my netlify functions. I have a function in /netlify/functions/ping. The function works as intended when I access the randomized port for the netlify functions (something like localhost:55832...).

However, using the localhost:8888/.netlify/functions/ping gives me a 404 error.

Here is my /netlify/functions/ping file:

import { Handler } from '@netlify/functions';

const handler: Handler = async (event, context) => {

  return {
    statusCode: 200,
    body: JSON.stringify({ data: "pong" }),
  };
};

export { handler };

here is where I am trying to call my function on a page

export default function HomePage() {

  useEffect(() => {
    async function pingpong() {
      const res = await fetch(`/.netlify/functions/ping`);
      console.log(res);
    }

    pingpong();
  }, []);

  return (
...

I have also tried to alter my netlify.toml with the following

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

The netlify functions also work when hosted on Netlify. Just not when running a local dev environment. — yankeedoodle, Mar 23 '22 at 20:01
I've decided to move everything to amplify instead and avoid Netlify Functions because they don't seem to work very well — yankeedoodle, Mar 29 '22 at 13:46

score 0 · Answer 1 · answered Oct 25 '22 at 05:17

what's start script you use in package.json?

Keep in mind that, to enable Netlify Functions you have to use netlify-cli, i.e. ntl command to run on local dev server.

No more specific configuration, just follow docs, and use that simple netlify/functions/hello.js example.

Then run using ntl dev, you function will be avaiable on /.netlify/functions/hello. easy.

Kuba Nowoszyński · Answer 2 · 2023-08-12T21:38:59.533

For anyone having similar issue apply everything listed below:

In [yourFunction].js use commonjs syntax - change export const handler = to exports.handler = and use require instead of import.
Put your function in the 'functions' directory in your root folder NOT 'netlify/functions' BUT keep fetching url the same.
Add netlify.toml file to your root directory and put this inside: [build] command = 'npm run build' functions= 'functions' publish = 'dist'.
Don't import Handler like shown in post. You actually don't need '@netlify/functions' to work. If you want to try out if everything works locally, install netlify globally and run command 'netlify login' (to verify your Netlify account) then 'netlify dev'.
Here's my example function:

import "dotenv/config";
        import Stripe from "stripe";
        const stripe = Stripe(process.env.STRIPE_SECRET_KEY);  
        
        exports.handler = async (event) => {
          try {
            const { amount } = JSON.parse(event.body);
        
            const paymentIntent = await stripe.paymentIntents.create({
              amount,
              currency: "usd",
              payment_method_types: ["card"],
            });
        
            return {
              statusCode: 200,
              body: JSON.stringify({ paymentIntent }),
            };
          } catch (error) {
            console.log({ error });
        
            return {
              statusCode: 400,
              body: JSON.stringify({ error }),
            };
          }
        };

Only this solution fixed my problem, hope that it will also fix yours:)

Netlify functions not found on dev server

2 Answers2