Skip to content

Commit

Permalink
fix(gatsby-plugin-image): Switch react-dom import to remove createRoo…
Browse files Browse the repository at this point in the history
…t warning (#32457) (#32458)

(cherry picked from commit 9595ccb)

Co-authored-by: Lennart <lekoarts@gmail.com>
  • Loading branch information
GatsbyJS Bot and LekoArts authored Jul 21, 2021
1 parent e77af12 commit a6fa7c7
Showing 1 changed file with 11 additions and 7 deletions.
18 changes: 11 additions & 7 deletions packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { MutableRefObject } from "react"
// @ts-ignore - react 18 has createRoot
import { hydrate, render, createRoot } from "react-dom"
import ReactDOM from "react-dom"
import { GatsbyImageProps } from "./gatsby-image.browser"
import { LayoutWrapper } from "./layout-wrapper"
import { Placeholder } from "./placeholder"
Expand Down Expand Up @@ -88,28 +87,33 @@ export function lazyHydrate(

if (root.current) {
// Force render to mitigate "Expected server HTML to contain a matching" in develop
if (createRoot) {
// @ts-ignore react 18 typings
if (ReactDOM.createRoot) {
if (!hydrated.current) {
hydrated.current = createRoot(root.current)
// @ts-ignore react 18 typings
hydrated.current = ReactDOM.createRoot(root.current)
}

// @ts-ignore react 18 typings
hydrated.current.render(component)
} else {
const doRender =
hydrated.current || forceHydrate.current ? render : hydrate
hydrated.current || forceHydrate.current
? ReactDOM.render
: ReactDOM.hydrate
doRender(component, root.current)
hydrated.current = true
}
}

return (): void => {
if (root.current) {
if (createRoot) {
// @ts-ignore react 18 typings
if (ReactDOM.createRoot) {
// @ts-ignore react 18 typings
hydrated.current.render(null)
} else {
render((null as unknown) as ReactElement, root.current)
ReactDOM.render((null as unknown) as ReactElement, root.current)
}
}
}
Expand Down

0 comments on commit a6fa7c7

Please sign in to comment.