lazysizes + React 16 - Expected server HTML to contain a matching <img> in <noscript>

[stephen-last]

Posted this issue over at React, but I'm not sure where the issue is, React 16 or lazysizes.

I'm using React Server Side Rendering (SSR).

I'm trying to use the "the noscript pattern" but I'm seeing this in the console:

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

My image component's 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>
    )
  }

Has anyone else seen this happening..?

[stephen-last]

Pretty sure this is a React thing...

[oliviertassinari]

So, React isn't supported?

[stephen-last]

@oliviertassinari Take a look here: facebook/react#11423