forms + enhance: serialization issue of returned data from +page.server.js

[0gust1]

Describe the bug

Let say we have an action in a +page.server.js (here, in src/routes/project/truc )

export const actions = {
  default: async () => {
    const date = new Date();
    console.log(date)
    return {
      myObj:{
        createdAt: date 
      }
    }
  }
}

And the corresponding form in +page.svelte

<script>
  export let form;
</script>
<form method="POST">
  <button>Add</button>
</form>
{form?.date}

It just works as expected.

Now, if we change the form to use enhance:

<script>
  import { enhance } from '$app/forms';
  export let form;
</script>
<form use:enhance method="POST">
  <button>Add</button>
</form>
{form?.date}

It breaks with a stacktrace which likes:

data.myObject.createdAt returned from action in project/truc cannot be serialized as JSON
Error: data.myObject.createdAt returned from action in project/truc cannot be serialized as JSON
    at check_serializability (file:///<PROJECT_PATH>/node_modules/@sveltejs/kit/src/runtime/server/page/actions.js:242:8)
    at check_serializability (file:///<PROJECT_PATH>/node_modules/@sveltejs/kit/src/runtime/server/page/actions.js:236:5)

Reproduction

(I'm unsure if stackblitz runs correctly, as I don't get the stacktrace reported above, but it still breaks).

edit: on stackblitz, there is a cross-origin issue on stackblitz side (Cross-site POST form submissions are forbidden)

https://stackblitz.com/edit/sveltejs-kit-template-default-fuvf3t?file=src/routes/form/+page.server.js

Logs

data.myObject.createdAt returned from action in project/truc cannot be serialized as JSON
Error: data.myObject.createdAt returned from action in project/truc cannot be serialized as JSON
    at check_serializability (file:///<PROJECT_PATH>/node_modules/@sveltejs/kit/src/runtime/server/page/actions.js:242:8)
    at check_serializability (file:///<PROJECT_PATH>/node_modules/@sveltejs/kit/src/runtime/server/page/actions.js:236:5)

### System Info

```shell
System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 105.58 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 105.0.2
    Firefox Developer Edition: 102.0
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.96 
    @sveltejs/kit: next => 1.0.0-next.511 
    svelte: ^3.48.0 => 3.50.1 
    vite: ^3.1.0 => 3.1.6

Severity

blocking all usage of SvelteKit

Additional Information

It could be worked around by migrating the action code to an endpoint (but doing so would be a shame :-) )

It seems that devalue is not used by action responses.

[dummdidumm]

This is working as intended, because Date objects aren't serializable without losing their type - it's a string on the client. If you don't care about lossy serialization, you can call JSON.stringify yourself before returning the result. If #7177 lands (no promises) we could look into using devalue for form actions, too.

[0gust1]

Ok, thanks.

For now, I'll migrate my code to an endpoint and will hope that #7177 will find its way to master.

(In my case, I would like to keep the type of the returned data, as we use an ORM and we made sure it returns devalue-compatible things). It was our first attempt with forms action and enhance.

edit:
On user-developer side, it's imho confusing/inconsistent that adding the use:enhance directive would break (on server-side) a form that works fine without it.
I still understand the challenges behind, having read/followed the tedious issues about data-serialization (just before devalue introduction), and felt bad for the maintainers. No hard feelings here, on the contrary.

[0gust1]

@dummdidumm feel free to tell if help is needed/possible on #7177