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

[kesteinbakk]

I get this console warning when pulling data from Sanity to a React/Gatsby app:

react_devtools_backend.js:3973 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
    at p
    at normal (webpack-internal:///./node_modules/@portabletext/react/dist/react-portable-text.mjs:132:14)
    at PortableText (webpack-internal:///./node_modules/@portabletext/react/dist/react-portable-text.mjs:165:10)

Data looks like this (passed as value prop in <Portable Text value={data}/>:

{
  "_key": "422b2df8e2a1",
  "_type": "block",
  "children": [
    {
      "_key": "33d2dcb9b87f0",
      "_type": "span",
      "marks": [],
      "text": "Some text here."
    }
  ],
  "markDefs": [],
  "style": "normal"
}

Happens on all block content. This might not be judged as an error as things do work, but annoying to always have it in the console.

[swalker326]

What does your rendered html structure look like?

[kesteinbakk]

What does your rendered html structure look like?

Sorry, should have thought about including the output html to get a view on the nested <p>'s:

When exanimating this I see that it is MUI's Typography component that's making the trouble. I thought this was just a div, but it too renders a p, so combined with Portable text there will be a nested paragraph element.

So this:

                    <Typography variant="body1">
                      {content ? (
                        <PortableText
                          // Pass in block content straight from Sanity.io
                          value={content}
                          components={{
                            types: { image: ImageComponent },
                          }}
                        />
                      ) : `[${getLang('noContent')}]`}
                    </Typography>

Leads to this:

<p class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"><p>Test text</p></p>

My bad. Sorry. I'll close the issue. :-)