[gatsby-image] Issue with SSR, expected server HTML to contain a matching <picture> in <div>

[Pustur]

Description

In the default starter, when using the FAST_DEV flag and running in development mode, the console shows an error:

index.js:2177 Warning: Expected server HTML to contain a matching <picture> in <div>.
    in picture (created by Image)
    in div (created by Image)
    in Image (at image.js:33)
    in Image (at pages/index.js:15)
    in div (at pages/index.js:14)
    in main (at layout.js:36)
    in div (at layout.js:29)
    in Layout (at pages/index.js:9)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (at query-result-store.js:90)
    in PageQueryStore (at root.js:58)
    in RouteHandler (at root.js:80)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at root.js:75)
    in ScrollHandler (at root.js:71)
    in RouteUpdates (at root.js:70)
    in EnsureResources (at root.js:68)
    in LocationHandler (at root.js:126)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:125)
    in Root (at root.js:134)
    in StaticQueryStore (at root.js:150)
    in ConditionalFastRefreshOverlay (at root.js:149)
    in _default (at app.js:165)

Steps to reproduce

Download the default starter and add the FAST_DEV flag in the gatsby-config.js file.
Then run the app in development mode with gatsby develop.
You will see an error in the console when navigating to http://localhost:8000/

Expected result

No errors should be logged in the console, the server and client HTML should match.

Actual result

An error is logged to the console, the server and client HTML don't match.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.3/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0
    Safari: 14.0.3
  npmPackages:
    gatsby: ^2.32.3 => 2.32.3 
    gatsby-image: ^2.11.0 => 2.11.0 
    gatsby-plugin-manifest: ^2.12.0 => 2.12.0 
    gatsby-plugin-offline: ^3.10.0 => 3.10.0 
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0 
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1 
    gatsby-source-filesystem: ^2.11.0 => 2.11.0 
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0 
  npmGlobalPackages:
    gatsby-cli: 2.19.1

EDIT: Posted here: #28138

[LekoArts]

Hi!

Please comment about this here: #28138
Thanks!