Ignore <noscript> content on the client and don't warn about mismatches

[stephen-last]

React 16.0.0 with SSR & lazysizes 4.0.1.

Trying to use the "the noscript pattern" to lazy load images with lazysizes but I'm seeing this:

Warning: Expected server HTML to contain a matching <img> in <noscript>.

Image component render method:

render () {
    const { cdn, url, width, height } = this.props

    if (!url) return null

    const noScriptImgProps = {
      src: `${cdn}${url}`,
      className: classNames('product-image'),
      width,
      height
    }

    const imgProps = {
      'data-src': `${cdn}${url}`,
      className: classNames('product-image', 'lazyload'),
      width,
      height
    }

    return (
      <span>
        <noscript>
          <img {...noScriptImgProps} />
        </noscript>
        <img {...imgProps} />
      </span>
    )
  }

Does React have an issue with noscript tags..?

[Imundy]

I think that warning should be a result of the client failing to match the server side rendered content when it tries to hydrate HTML.

[stephen-last]

Ok... I've tried removing lazysizes and just adding a simple <noscript> via a wrapper component:

function NoScript (props) {
  const staticMarkup = ReactDOMServer.renderToStaticMarkup(props.children)
  return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />
}

return (
      <span>
        <NoScript>
          <p>.</p>
        </NoScript>
        <img {...props} />
      </span>
    )

Now I get:

Warning: Prop dangerouslySetInnerHTML did not match. Server: "&lt;p&gt;.&lt;/p&gt;" Client: "<p>.</p>"

So the server has encoded HTML, the client doesn't.

Why would that be..?

[gaearon]

Warning: Prop dangerouslySetInnerHTML did not match. Server: "&lt;p&gt;.&lt;/p&gt;" Client: "<p>.</p>"

This is a bug in 16.0.0: #11103. It was fixed in master via #11119 and will be released in the next update.

[stephen-last]

@gaearon Thanks for the update, and fix... I'll ignore the warning for now.

Any idea when you're likely to release the next update..?

[gaearon]

This or next week. But I've said this a few times in the past...

[gaearon]

React 16.1.0-beta has been released. Please update react, react-dom, and react-test-renderer (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get 16.1.0 out.

[stephen-last]

@gaearon Testing now...

With 16.1.0-beta installed for both react and react-dom the NoScript functional component mentioned previsously now works, that is, I no longer see this:

Warning: Prop dangerouslySetInnerHTML did not match. Server: "&lt;p&gt;.&lt;/p&gt;" Client: "<p>.</p>"

However, and this maybe a separate thing, I still seem to have an issue using <noscript> directly. If I use:

      <span>
        <noscript>
          <img {...props} />
        </noscript>
        <img {...props} />
      </span>

I see this:

Warning: Expected server HTML to contain a matching <img> in <noscript>.

The HTML from the SSR (via view -> source)...

<span>
  <noscript>
    <img src="https://d3iq5gspowosu2.cloudfront.net/dev/gifts/images/categories/483/1-300x300-beatrix-potter.jpg" class="product-image"/>
  </noscript>
  <img src="https://d3iq5gspowosu2.cloudfront.net/dev/gifts/images/categories/483/1-300x300-beatrix-potter.jpg" class="product-image"/>
</span>

The HTML in Chrome DevTools...

[gaearon]

Can you please provide a reproducing project?

[stephen-last]

@gaearon Ok... I'm a github rookie, but how is this..?

https://github.com/stephen-last/react-16-noscript

It's a basic app using SSR with a <noscript> tag.

The only difference I can see between the server generated HTML and that shown in the DevTools, is that the img tag is closed with /> in the page source, but DevTools shows >. I guess that could just be how DevTools shows it though.