Uncaught Error: Cannot find transform for node Node<"unknown">

[hai-qiu-bpc]

This error gets thrown when my node has no formatting.

With slate nodes that have formatting such as bold no error occurs.

Am I doing anything wrong?

I'm using it this way. slateResponse is the following arry/slate node.

[{"children":[{"text":"Das Passwort darf nicht mit dem Benutzernamen übereinstimmen"}]}]

Uncaught Error: Cannot find transform for node Node<"unknown">
i BaseError.ts:10
f NoMatcherError.ts:13
ee transformNodes.tsx:75
ne transformNodes.tsx:95
re transformNodes.tsx:113
oe transformNodes.tsx:156
se useSlateToReact.ts:19
React 3
se useSlateToReact.ts:19
ie SlateView.tsx:24
React 12
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
js scheduler.development.js:571
js scheduler.development.js:633
__require chunk-ROME4SDB.js:11
js index.js:6
__require chunk-ROME4SDB.js:11
React 2
__require chunk-ROME4SDB.js:11
js React
__require chunk-ROME4SDB.js:11
js React
__require chunk-ROME4SDB.js:11
react-dom_client.js:38

[octet-stream]

Hello, and thanks for reaching me out with your issue. Does this error appears if you add a type field for the most top-level node? Like this:

[
  {
    "type": "p",
    "children": [
      {
        "text": "Das Passwort darf nicht mit dem Benutzernamen übereinstimmen"
      }
    ]
  }
]

[hai-qiu-bpc]

I'm using payload cms, which has an integrated slate editor, i use to create my content/rich text.
I'm fetching that content in my frontend and want to use your library to convert those slate nodes to diplay them in my react component.

As far as I know the type node only gets added for Headings, see below, in the slate editor for payload.
That works if they have e.g. a heading formattig.
But other text without heading formating throw that error.
This one works because it ha type h3

[hai-qiu-bpc]

https://payloadcms.com/community-help/github/node-of-richtext-is-missing-type

I found this article in payload cms, by default payload doesn't set any type if no type is selected.
Is it possible to add in the library or can you show me how to add paragraph as fallback type if no type(like heading) is selected?

[octet-stream]

By default slate-to-react expects the type field always to be set for Element nodes, so when you pass an element without this field - you'll get an error. To fix this, you can create a fallback transform. All you need is a custom element matcher and a new transform:

import {createElementMatcher, createElementTransform} from "slate-to-react"

const isUnknownElement = createElementMatcher(node => "type" in node === false)

const FallbackElement = createElementTransform(isUnknownElement, ({key, attributes, children}) => (
  <p {...attributes} key={key}>
    {children}
  </p>
))

I should probably make an improvement upon this area.

[hai-qiu-bpc]

Where do I have to have insert this, would it be possible for you to create an update to your library?

[octet-stream]

As documentation says (see the 5th example), you can use custom transforms with SlateView, useSlateToReact and transformNodes. For SlateView that would be through the transforms property. This property takes a Transforms object that has two fields: elements and leaves (both are arrays of transforms). So, this element transform goes to the transforms.elements array, like this:

import type {FC} from "react"

import {SlateView, type Node} from "slate-to-react"

import {FallbackElement} from "./FallbackElement.js" // Previously created fallback element

interface Props {
  nodes: Node[]
}

export const MyComponent: FC<Props> = ({nodes}) => (
  <SlateView
    nodes={nodes}
    transforms={{elements: [FallbackElement]}}
  />
)

The whole point of this library is to have bunch of utilities to create customizable Slate views. So, you can and you likely will create your own transforms to keep the look of your slate views in touch with the styles of your application.

would it be possible for you to create an update to your library?

I think I will add support for generic Element nodes with the fallback elements. But I feel like this should be customizable too.