Nested paragraph tags not rendering on server

[Ehesp]

Bug report

Describe the bug

I came across this "bug" when building out a website using a headless CMS. I injected my CMS content into my application via <p dangerouslySetInnerHTML={{ __html: externalHtml }} />, however the HTML output from the CMS also contains a nested <p> tag.

When I load the page from the server, the content does not show, when I navigate to a page via client routing, it shows.

To Reproduce

https://github.com/Ehesp/nextjs-html-rendering-issue

https://nextjs-html-rendering-issue.ehesp.vercel.app/

1. Load the page (no text shows)
2. Click the link to page 2, and then the link back to the root page
3. The nested text now shows

Expected behavior

Technically nested p tags are incorrect and I sorted this by adding the HTML to an article tag, however since the output is different on server vs client it seems to be a bug?

Screenshots

Server:

Client:

System information

• OS: macOS
• Browser: chrome
• Version of Next.js: v9.4.4
• Version of Node.js: v12.9.1

[fabrizzioalco]

I want to take a look at this

[patrick-mcdougle]

Nested <p> isn't allowed in the HTML specification, so I'd argue this is won't fix. <p> elements can only contain phrasing content (which <p> itself is not).

[fabrizzioalco]

@patrick-mcdougle HTML only have certain elements that can be nested.

is not one of those. Heres some information. https://stackoverflow.com/questions/9852312/list-of-html5-elements-that-can-be-nested-inside-p-element

[fabrizzioalco]

@patrick-mcdougle Thanks for the response and the help

[timneutkens]

Nested <p> isn't allowed in the HTML specification, so I'd argue this is won't fix. <p> elements can only contain phrasing content (which <p> itself is not).

This is correct, I think the issue can be closed.

[Ehesp]

Yeah I understand it's not correct HTML, however wouldn't it make more sense for the output to be consistent (not render anything)?

[timneutkens]

<p><p>Hello World!!!</p></p> It seems that it does output, just the browser does not display it, you can check here: view-source:https://nextjs-html-rendering-issue.ehesp.vercel.app/

[Timer]

This seems to be a no-fix from the Next.js side. Can you please file this upstream with the React team? This seems to be a difference between ReactDOM client and server.

[mattdell]

Also ran into this. Very peculiar behavior. It should just render the output, even if it isn't valid markup.

Or at least provide a warning.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.