SSR + <img/> + dangerouslySetInnerHTMl = problem

[ivan-kleshnin]

Bug report

I think I've found a bug with hydration. I believe it's a bug of NextJS because I didn't have it before I switched to NextJS (from my custom SSR implementation).

Describe the bug

The following renders normally

<div dangerouslySetInnerHTML={{__html: "<span>xxx</span>"}}>
</div>

The following fails

<div dangerouslySetInnerHTML={{__html: "<img src='xxx'/>"}}>
</div>

on client with message

Warning: Prop dangerouslySetInnerHTML did not match.
Server: "<img src="test" style="">"
Client: "<img src="test">"

Note the empty style tag which causes the mismatch.

System information

• Version of Next.js: 7.0.2

[ibmsoft]

same problem

[exogen]

Are you certain that's the only code necessary to reproduce, or is your real code something more complicated? Starting a new Next.js project with just a page that does this doesn't seem to be enough to repro (it's working OK for me w/ no warning):

export default () => {
  return <div dangerouslySetInnerHTML={{ __html: "<img src='xxx'/>" }} />;
};