[Bug]: Tiptap with NextJS 14 Server Action - Error: Only plain objects, and a few built-ins, can be passed to Server Actions.

[innonguyen]

Which packages did you experience the bug in?

core, starter-kit, @tiptap/react

What Tiptap version are you using?

2.1.16

What’s the bug you are facing?

I had a a Tiptap content and update it to my database through NextJS 14 Server Actions:

It throw the error:
Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

I tried to remove heading block => It worked
I tried to keep heading block => Error throw.

I think Tiptap should check for rendering of JSON output which is support on NextJS Server Action

{
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {
"level": 2
},
"content": [
{
"type": "text",
"text": "What is Lorem Ipsum?"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"marks": [
{
"type": "bold"
}
],
"text": "Lorem Ipsum"
},
{
"type": "text",
"text": " is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
}
]
}
]
}

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

JSON output can send complicated blocks (such as heading) to NextJS Server Action

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[nienkeboomsma]

For what it's worth, it seems to work if I use JSON.parse(JSON.stringify(content)) before passing the content to my server action.

[Iischeese]

Same issue! pls help

[nperez0111]

editor.getJSON() should return a plain JSON object, what method are you using for getting JSON?

[Iischeese]

editor.state

[nperez0111]

editor.state

Ok, & did editor.getJSON() work? The state is using prosemirror types that happen to be able to convert to JSON, but this method is made specifically for it