What is happening such I receive dangerouslySetInnerHTML warning and empty content using Next.js?

Question

First-off, I do know I should not nest  tags.

So I created a Next.js application and I have a component that sets rich text html as follows:

    <Typography
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

The react component Typography is just a p tag in the end so this could simply be written as:

    <p
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

So when the browser loads the page, my content does not show up and I am left with the console warning:

Warning: Prop 'dangerouslySetInnerHTML' did not match. Server: "" Client: "<p>...</p>"

After a lengthy debugging session, during cleaning up, using the  instead of  was the solution

    <span
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

Nested p tags was a mistake, regardless, what is happening that makes Next.js not render this particular content resulting in the empty string Server: ""? Is Next.js just simply very sensitive to errors and warnings?

`Nested p tags was a mistake…` Thank you, solved my issue! — Scott Coates, Mar 30 '21 at 03:29

Barnee · Answer 1 · 2021-02-09T08:45:51.263

10

I've had the same problem because in the richtext I was getting  tags too, so when I switched my wrapping tag from  to <div> that error disappeared.

edited Feb 09 '21 at 08:45

answered Dec 16 '20 at 18:00

Barnee

3,212
8
41
53

score 2 · Answer 2 · answered Aug 18 '21 at 01:53

I had the same issue, I solved this using react useState and useEffect hooks. so it's not rendering in the server.

import { useState, useEffect } from 'react';

export default function ParentComponent({ content }) {
   const [render, setRender] = useState(false);
   
   useEffect(() => {
      setRender(true);
   }, []);

   return <Typography dangerouslySetInnerHTML={{ __html: render && content }} />
}

score 2 · Answer 3 · answered Sep 14 '22 at 09:08

2

Next.js will de-nest invalid html on the server so

<p> 
  <p>
     hello world
  </p>
</p>

becomes

<p></p>
<p> hello world </p>

so the HTML structure no longer matches the client rendered html hence rehydration fails

answered Sep 14 '22 at 09:08

Sid

846
3
12
25

Dipanjan Panja · Answer 4 · 2021-07-13T05:49:06.663

1

Material-UI have a prop called component. use component as div

<Typography {...other Typography Props} component="div" dangerouslySetInnerHTML={{
    __html: richText
  }}/>

edited Jul 13 '21 at 05:49

answered May 30 '21 at 21:03

Dipanjan Panja

396
4
12

score 0 · Answer 5 · answered Oct 07 '19 at 19:16

0

It depends on where richText is coming from. Is it possible that on the server-side render, richText = "", and then you make some API request on the front-end that sets the value of richText?

answered Oct 07 '19 at 19:16

Tilo Mitra

2,805
1
26
20

No, that was my initial thought too but `richText` is not an empty string on the server side. I make the call in `getInitialProps` and I am 100% sure it is not an empty string. – Karim Oct 08 '19 at 04:45

What is happening such I receive dangerouslySetInnerHTML warning and empty content using Next.js?

5 Answers5