use:enhance with Netlify Forms not working?

[AutomateAaron]

I'm trying to setup a netlify form with sveltekit's progressive enhancement for forms. I have the following form setup:

<form
  use:enhance
  name="netlify-form-example"
  method="POST"
  netlify-honeypot="bot-field"
  data-netlify="true"
>
  <input type="hidden" name="form-name" value="netlify-form-example" />
  <label for="message">Message</label>
  <input
    name="message"
    id="message"
    required
    placeholder="Message"
    type="text"
  />
  <input type="submit" value="Submit" />
</form>

When I submit the form, it does successfully submit the form, but it doesn't return a success, but on the frontend it shows a 500 error saying: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Am I doing something wrong here? Is there a way to get the use:enhance to work without having to reimplement it?

[geoffrich]

use:enhance only works with form actions that are implemented by SvelteKit, since it expects a specific response back from the server.

You'll probably want to implement a custom submit handler that submits the form using AJAX. When JS is not enabled, the default HTML form should still work. With JS enabled, it can use the custom submit handler to submit client-side.

[AutomateAaron]

Awesome, thanks! Although, I feel it may be worthwhile to update the documentation to more clearly state that "use:enhance will emulate the browser-native behaviour" assumes the backend is a form action.

[AutomateAaron]

@geoffrich Okay, so I've gone down a rabbit hole.

Is there any reason this line couldn't be replaced with something like this to handle responses which aren't application/json:

const contentType = response.headers.get("content-type");

if (contentType && contentType === "application/json") {
  result = deserialize(await response.text());
  if (result.type === 'error') result.status = response.status;
} else {
  if (response.ok) {
    result = {
      type: "success",
      status: response.status,
      data: {
        "content": await response.text()
      }
    }
  } else {
    result = {
      type: "error",
      status: response.status,
      error: new Error(await response.text())
    }
  }
}

[dummdidumm]

It's an entirely different response. SvelteKit form actions return a specific shape, and Netlify forms (or anything else) could return a completely different shape, which breaks all expectations around the logic following.