Skip to content

If markDefs is null, .find breaks #95

@ShiftaDeband

Description

@ShiftaDeband

Not sure what happened here, but we have a Sanity instance. Apparently occasionally after duplicating or copying a content block, like our 'rich text' (which is just the WYSIWYG editor), the 'markDefs' may be null.

I genuinely don't know why this happens, but when it does, I get this error:

TypeError: Cannot read properties of null (reading 'find')
    at buildMarksTree (file:///Users/.../web/node_modules/@portabletext/toolkit/dist/index.js:89:34)
    at serializeBlock (file:///Users/.../web/node_modules/@portabletext/react/dist/index.js:381:16)
    at renderBlock (file:///Users/.../web/node_modules/@portabletext/react/dist/index.js:319:29)
    at renderNode (file:///Users/.../web/node_modules/@portabletext/react/dist/index.js:225:323)
    at <unknown> (file:///Users/.../web/node_modules/@portabletext/react/dist/index.js:207:44)
    at Array.map (<anonymous>)
    at PortableText (file:///Users/.../web/node_modules/@portabletext/react/dist/index.js:207:23)
    at renderWithHooks (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderNode (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6270:12)
    at renderHostElement (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (file:///Users/.../web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5963:5)

So, for some reason:

Screenshot 2024-12-09 at 12 59 58 PM

I'm able to see where this is happening:

const markDef = markDefs.find((def) => def._key === markKey)

Not sure this is widespread or not, but in code, I've got this helper now:

  function sanitizeData(data) {
    return data.map((block) => ({
      ...block,
      markDefs: block.markDefs || []
    }));
  }

Either way, it seems that having that fall back or doing a check on markDefs may be the right call? Or this is an edge error in our editor.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions