Slots within p use div, causing hydration errors

Question about the <div> that contains children in a component (that gets injected when we add a slot target). Is there any way that tag type can be changed?

I have a simple text component for which I want the root element to have a styled <p> tag, and I want to pass the text into it. But the <div> injected inside the <p> causes Next.js to give a bunch of hydration mismatch errors.

Hi Mike, when you convert a text element to a slot target, Plasmic will wrap that in a vertical stack (

) by default. If you want to change that tag back to a

, you can select the vertical stack and change the tag under “Custom Behaviours” in the right panel

image.png

Hi Kenny!

Thanks - that much I was able to do, but when inserting a slot inside of it, the slot creates a <div> that I can’t change. And Next.js freaks out when you put a <div> inside a <p>

Are you referring to this div: <div className="__wab_slot-string-wrapper">

oh I guess also possibly <div className="__wab_slot">

hmmm looks familiar but I can’t remember

Give me a few and I can find an example

Here’s one: <div class="__wab_slot TextParagraph__slotTargetChildren__xZsF8">

I have the same problem!