fix types

packages/gatsby-plugin-image/package.json

@@ -49,8 +49,8 @@
     "@types/fs-extra": "^9.0.13",
     "@types/node": "^14.10.2",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
     "ast-pretty-print": "^2.0.1",
     "babel-plugin-macros": "^2.8.0",
     "cross-env": "^7.0.3",

packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx

@@ -23,27 +23,30 @@ import { Layout } from "../image-utils"
 import { getSizer } from "./layout-wrapper"
 import { propTypes } from "./gatsby-image.server"
 import { Unobserver } from "./intersection-observer"
+import type { Root } from "react-dom/client"
 
 let reactRender
 if (HAS_REACT_18) {
   const reactDomClient = require(`react-dom/client`)
   reactRender = (
-    Component: React.Component,
+    Component: React.ReactChild | Iterable<React.ReactNode>,
     el: ReactDOM.Container,
-    root: any
+    root: Root
   ): unknown => {
     if (!root) {
       root = reactDomClient.createRoot(el)
     }
 
-    // @ts-ignore - React 18 typings
     root.render(Component)
 
     return root
   }
 } else {
   const reactDomClient = require(`react-dom`)
-  reactRender = (Component: React.Component, el: ReactDOM.Container): void => {
+  reactRender = (
+    Component: React.ReactChild | Iterable<React.ReactNode>,
+    el: ReactDOM.Container
+  ): void => {
     reactDomClient.render(Component, el)
   }
 }
@@ -93,9 +96,7 @@ class GatsbyImageHydrator extends Component<
   lazyHydrator: () => void | null = null
   ref = createRef<HTMLImageElement>()
   unobserveRef: Unobserver
-  // TODO fix typing
-  // @ts-ignore - ignore
-  reactRootRef: MutableRefObject<unknown> = createRef<unknown>()
+  reactRootRef: MutableRefObject<Root> = createRef()
 
   constructor(props) {
     super(props)

packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx

@@ -6,6 +6,7 @@ import { Placeholder } from "./placeholder"
 import { MainImageProps, MainImage } from "./main-image"
 import { getMainProps, getPlaceholderProps } from "./hooks"
 import { ReactElement } from "react"
+import type { Root } from "react-dom/client"
 
 type LazyHydrateProps = Omit<GatsbyImageProps, "as" | "style" | "className"> & {
   isLoading: boolean
@@ -19,27 +20,28 @@ let reactHydrate
 if (HAS_REACT_18) {
   const reactDomClient = require(`react-dom/client`)
   reactRender = (
-    Component: React.Component,
+    Component: React.ReactChild | Iterable<React.ReactNode>,
     el: ReactDOM.Container,
-    root: any
-  ): unknown => {
+    root: Root
+  ): Root => {
     if (!root) {
       root = reactDomClient.createRoot(el)
     }
 
-    // TODO fix typing
-    // @ts-ignore - React 18 typings
     root.render(Component)
 
     return root
   }
   reactHydrate = (
-    Component: React.Component,
+    Component: React.ReactChild | Iterable<React.ReactNode>,
     el: ReactDOM.Container
-  ): unknown => reactDomClient.hydrateRoot(el, Component)
+  ): Root => reactDomClient.hydrateRoot(el, Component)
 } else {
   const reactDomClient = require(`react-dom`)
-  reactRender = (Component: React.Component, el: ReactDOM.Container): void => {
+  reactRender = (
+    Component: React.ReactChild | Iterable<React.ReactNode>,
+    el: ReactDOM.Container
+  ): void => {
     reactDomClient.render(Component, el)
   }
   reactHydrate = reactDomClient.hydrate
@@ -63,7 +65,7 @@ export function lazyHydrate(
   root: MutableRefObject<HTMLElement | undefined>,
   hydrated: MutableRefObject<boolean>,
   forceHydrate: MutableRefObject<boolean>,
-  reactRootRef: MutableRefObject<unknown>
+  reactRootRef: MutableRefObject<Root>
 ): (() => void) | null {
   const {
     width,
@@ -120,8 +122,6 @@ export function lazyHydrate(
   if (root.current) {
     // Force render to mitigate "Expected server HTML to contain a matching" in develop
     if (hydrated.current || forceHydrate.current || HAS_REACT_18) {
-      // TODO fix typing
-      // @ts-ignore - React 18 typings
       reactRootRef.current = reactRender(
         component,
         root.current,

packages/gatsby/cache-dir/__tests__/static-entry.js

@@ -194,6 +194,7 @@ describe(`develop-static-entry`, () => {
     global.__BASE_PATH__ = ``
     global.__ASSET_PREFIX__ = ``
     global.BROWSER_ESM_ONLY = false
+    global.HAS_REACT_18 = false
   })
 
   test(`SSR: onPreRenderHTML can be used to replace headComponents`, done => {

packages/gatsby/src/services/initialize.ts

@@ -508,7 +508,9 @@ export async function initialize({
   const siteDir = cacheDirectory
   const tryRequire = `${__dirname}/../utils/test-require-error.js`
   try {
-    await fs.copy(srcDir, siteDir)
+    await fs.copy(srcDir, siteDir, {
+      overwrite: true,
+    })
     await fs.copy(tryRequire, `${siteDir}/test-require-error.js`)
     if (lmdbStoreIsUsed) {
       await fs.ensureDir(`${cacheDirectory}/${lmdbCacheDirectoryName}`)

yarn.lock

@@ -4567,10 +4567,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^16.9.8":
-  version "16.9.8"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
-  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
+"@types/react-dom@^17.0.13":
+  version "17.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
+  integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
   dependencies:
     "@types/react" "*"
 
@@ -4581,7 +4581,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.14.8", "@types/react@^16.9.56":
+"@types/react@*", "@types/react@^16.14.8":
   version "16.14.8"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.8.tgz#4aee3ab004cb98451917c9b7ada3c7d7e52db3fe"
   integrity sha512-QN0/Qhmx+l4moe7WJuTxNiTsjBwlBGHqKGvInSQCBdo7Qio0VtOqwsC0Wq7q3PbJlB0cR4Y4CVo1OOe6BOsOmA==
@@ -4590,6 +4590,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.40":
+  version "17.0.40"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.40.tgz#dc010cee6254d5239a138083f3799a16638e6bad"
+  integrity sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/readable-stream@^2.3.9":
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-2.3.9.tgz#40a8349e6ace3afd2dd1b6d8e9b02945de4566a9"