Error following the Astro guide

[fossil cypress]

Hi there!

I was following the guide https://docs.astro.build/en/recipes/build-forms-api/

Deployed it to https://f00.netlify.app/one

And upon form submission I am getting this in the console:
Failed to load resource: the server responded with a status of 404 () https://f00.netlify.app/api/feedback.

Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern. https://f00.netlify.app/_astro/FeedbackForm.CcHut44J.js

red })).json(); this part of the anonymous function has error message: unhinged Promise Rejection: SyntaxError: The string did not match the expected pattern.

Here is the function itself:

import { h as d } from "./hooks.module.LmwmkJtO.js";
import { l as f } from "./preact.module.B_Hg0Uo-.js";
var c = 0;
function n(t, r, i, s, l, u) {
    r || (r = {});
    var a,
        e,
        o = r;
    if ("ref" in o)
        for (e in o = {}, r)
            e == "ref" ? a = r[e] : o[e] = r[e];
    var m = {
        type: t,
        props: o,
        key: i,
        ref: a,
        __k: null,
        __: null,
        __b: 0,
        __e: null,
        __c: null,
        constructor: void 0,
        __v: --c,
        __i: -1,
        __u: 0,
        __source: l,
        __self: u
    };
    if (typeof t == "function" && (a = t.defaultProps))
        for (e in a)
            o[e] === void 0 && (o[e] = a[e]);
    return f.vnode && f.vnode(m), m
}
function b() {
    const [t, r] = d("");
    async function i(s) {
        s.preventDefault();
        const l = new FormData(s.target),
            a = await (await fetch("/api/feedback", {
                method: "POST",
                body: l
            })).json();
        a.message && r(a.message)
    }
    return n("form", {
        onSubmit: i,
        children: [n("label", {
            children: ["Name", n("input", {
                type: "text",
                id: "name",
                name: "name",
                required: !0
            })]
        }), n("label", {
            children: ["Email", n("input", {
                type: "email",
                id: "email",
                name: "email",
                required: !0
            })]
        }), n("label", {
            children: ["Message", n("textarea", {
                id: "message",
                name: "message",
                required: !0
            })]
        }), n("button", {
            children: "Send"
        }), t && n("p", {
            children: t
        })]
    })
}
export { b as default };

I am using preact, netlify adapter, static mode. I was trying to add server:defer to the component, did not help

[analog plaza]

are you able to share your project? or the the source file for the api endpoint and your component?

[fossil cypress]

sure, here is my repo https://github.com/my-astro/copy-of-s6

Also I would try this method on a freshly created project and report back

[analog plaza]

the repo is empty

[fossil cypress]

pardon, forgot the template https://github.com/my-astro/for-reuben

[analog plaza]

Ahh, I found the issue. You have trailingSlash: "always" in your Astro config, but the fetch call doesn't include a trailing slash. Updating the fetch request to include a trailing slash should fix it

    const response = await fetch("/api/feedback/", {
      method: "POST",
      body: formData,
    });

[fossil cypress]

I am so happy🎉 thank you so much🙈