fix(gatsby-plugin-image): Check for render container (#30898) (#30943)

(cherry picked from commit 9ee366e) Co-authored-by: Matt Kane <matt@gatsbyjs.com>
gatsbyjs · Apr 19, 2021 · c753d9c · c753d9c
1 parent 2ee989c
commit c753d9c
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
@@ -85,10 +85,12 @@ export function lazyHydrate(
     </LayoutWrapper>
   )
 
-  // Force render to mitigate "Expected server HTML to contain a matching" in develop
-  const doRender = hydrated.current || forceHydrate.current ? render : hydrate
-  doRender(component, root.current)
-  hydrated.current = true
+  if (root.current) {
+    // Force render to mitigate "Expected server HTML to contain a matching" in develop
+    const doRender = hydrated.current || forceHydrate.current ? render : hydrate
+    doRender(component, root.current)
+    hydrated.current = true
+  }
 
   return (): void => {
     if (root.current) {