fix(gatsby-plugin-image): don't show hydration warning (#28407)

Co-authored-by: Matt Kane <[email protected]> Co-authored-by: gatsbybot <[email protected]> (cherry picked from commit b6b5207)
gatsbyjs · Dec 7, 2020 · 0a49cef · 0a49cef
1 parent fe488d9
commit 0a49cef
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -143,9 +143,15 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
       const hasSSRHtml = root.current.querySelector(`[data-gatsby-image-ssr]`)
       // On first server hydration do nothing
       if (hasNativeLazyLoadSupport() && hasSSRHtml && !hydrated.current) {
+        hydrated.current = true
         return
       }
 
+      // When no ssrHtml is found (develop) we should force render instead of hydrate
+      if (!hasSSRHtml) {
+        hydrated.current = true
+      }
+
       import(`./lazy-hydrate`).then(({ lazyHydrate }) => {
         lazyHydrator.current = lazyHydrate(
           {