Rehydration Error for NODE_IMAGE resolver

GavOutdoors commented 1 year ago

Hi, I'm using Next JS and decided to add an image resolver for my wrapper for the Next Image. However, I am getting rehydration errors even without using that component for the resolver.

render(blok.content,
                    {
                            nodeResolvers: {
                                [NODE_IMAGE]: (children, props) => <p>Image Placeholder</p>
                    },

If I remove the NODE_IMAGE node resolver, not React rehydration error.

Any ideas?

Cheers, Gav

claus commented 1 year ago

Hmm weird. Can you post the error log here?

GavOutdoors commented 1 year ago

I've just found the problem.

This is the image in the Storyblok Rich Text editor.

In my test for the image handler, I wrapped it in a

. [NODE_IMAGE]: (children, props) => <p>Image Placeholder</p>

Looking at one of the errors in the log, it says this:

If I look at the HTML source, I can see that the Storyblok editor has placed the img inside the paragraph, and so testing with a p creates a nested p ;-)

Replacing p with span in my test works without the rehydration error! :-D [NODE_IMAGE]: (children, props) => Image Placeholder

So, my quick little test turned into a head-scratcher!

claus commented 1 year ago

Ah yeah that once happened to me as well :) Glad you figured it out!

lemsdentsu commented 1 year ago

Having this problem as well, but not with a nested p element. I want to show the image in a figure element, so that I can add a figcaption, but they are always wrapped in p elements. I'm getting the following error:

Warning: validateDOMNesting(...): <figcaption> cannot appear as a descendant of <p>.

The issue seems to be that images are always wrapped in a paragraph, any way to circumvent this?

GavOutdoors commented 1 year ago

Hi Rene,

Thanks for letting me know and thanks for reaching out. I’ll be sure to try the feature soon, but unable to do so at the moment.

Thanks, Gav

From: René Lems @.> Date: Wednesday, 30 November 2022 at 15:18 To: claus/storyblok-rich-text-react-renderer @.> Cc: Gav Grayston (GOWTK) @.>, State change @.> Subject: Re: [claus/storyblok-rich-text-react-renderer] Rehydration Error for NODE_IMAGE resolver (Issue #25)

Having this problem as well, but not with a nested p element. I want to show the image in a figure element, so that I can add a figcaption, but they are always wrapped in p elements. I'm getting the following error:

Warning: validateDOMNesting(...):

cannot appear as a descendant of

.

The issue seems to be that images are always wrapped in a paragraph, any way to circumvent this?

— Reply to this email directly, view it on GitHubhttps://github.com/claus/storyblok-rich-text-react-renderer/issues/25#issuecomment-1332332982, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AS3KTXZ3UCIWHOGRKFT5BATWK5V23ANCNFSM6AAAAAARNV6UKU. You are receiving this because you modified the open/close state.Message ID: @.***>

claus / storyblok-rich-text-react-renderer

Rehydration Error for NODE_IMAGE resolver #25