[StoryblokRichText] Rendering immutable richText object

[7alip]

Describe the issue you're facing

We encountered an issue where the StoryblokRichText and richTextResolver's render function do not support immutable Storyblok data.

Our setup uses Apollo GraphQL to fetch Storyblok content. In production, certain pages were throwing errors in specific languages. After investigation, we found that the issue likely stemmed from Apollo’s immutable response structure. We resolved this by wrapping all Storyblok content with cloneDeep.

To further diagnose the issue, we created a minimal reproduction and found that the error occurs when the rich text contains attributes.

Would it be possible for Storyblok to handle this internally to ensure compatibility with immutable data sources?

Reproduction

https://stackblitz.com/edit/bb-storblok

Steps to reproduce

No response

System Info

@storyblok/react@^4.4.0

Used Package Manager

yarn

Error logs (Optional)

storyblok-js.mjs:991 Uncaught TypeError: Cannot add property key, object is not extensible
    at eval (storyblok-js.mjs:991:24)
    at x (storyblok-js.mjs:1114:12)
    at Array.map (<anonymous>)
    at C (storyblok-js.mjs:1121:45)
    at eval (storyblok-rich-text.mjs:17:13)
    at renderWithHooks (react-dom.development.js:10707:18)
    at updateForwardRef (react-dom.development.js:14692:20)
    at beginWork$1 (react-dom.development.js:17392:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:19462:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:19511:16)
    at invokeGuardedCallback (react-dom.development.js:19586:29)
    at beginWork (react-dom.development.js:25724:7)
    at performUnitOfWork (react-dom.development.js:24553:12)
    at workLoopSync (react-dom.development.js:24269:5)
    at renderRootSync (react-dom.development.js:24224:7)
    at performSyncWorkOnRoot (react-dom.development.js:23701:20)
    at flushSyncWorkAcrossRoots_impl (react-dom.development.js:9975:13)
    at flushSyncWorkOnAllRoots (react-dom.development.js:9933:3)
    at processRootScheduleInMicrotask (react-dom.development.js:10077:3)
    at eval (react-dom.development.js:10248:7)

Validations

• Follow our Code of Conduct

[edodusi]

Hi @7alip, honestly I don't know if we should extend the base library to address this or just covering this with documentation, to help users in your situation. I see this as a limited case that can happen in specific conditions.

I will add this to an internal discussion and let you know if we decide to take a step in one direction.

Thank you for having reported this