fix: compatibility with react rc 2 (#35108)

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: wardpeet

packages/gatsby-link/package.json

@@ -21,8 +21,8 @@
   },
   "peerDependencies": {
     "@gatsbyjs/reach-router": "^1.3.5",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link#readme",
   "keywords": [

packages/gatsby-plugin-cxs/package.json

@@ -28,8 +28,8 @@
   "peerDependencies": {
     "cxs": ">=5.0.0",
     "gatsby": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-plugin-feed/package.json

@@ -33,8 +33,8 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-plugin-fullstory/package.json

@@ -34,8 +34,8 @@
   },
   "peerDependencies": {
     "gatsby": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=14.15.0"

packages/gatsby-plugin-google-analytics/package.json

@@ -28,8 +28,8 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-plugin-google-gtag/package.json

@@ -27,8 +27,8 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "repository": {
     "type": "git",

packages/gatsby-plugin-google-tagmanager/package.json

@@ -28,8 +28,8 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "repository": {
     "type": "git",

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",
@@ -60,6 +60,7 @@
     "microbundle": "^0.13.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.9",
+    "semver": "^7.0.0",
     "terser": "^5.3.8",
     "typescript": "^4.5.5"
   },
@@ -68,8 +69,8 @@
     "gatsby": "^4.0.0-next",
     "gatsby-plugin-sharp": "^4.0.0-next",
     "gatsby-source-filesystem": "^4.0.0-next",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "@babel/code-frame": "^7.14.0",

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

@@ -3,9 +3,9 @@
  */
 
 import React from "react"
-import { GatsbyImage, IGatsbyImageData } from "../gatsby-image.browser"
 import { render, waitFor } from "@testing-library/react"
 import * as hooks from "../hooks"
+import type { IGatsbyImageData } from "../gatsby-image.browser"
 
 // Prevents terser for bailing because we're not in a babel plugin
 jest.mock(
@@ -20,15 +20,16 @@ jest.mock(
 describe(`GatsbyImage browser`, () => {
   let beforeHydrationContent: HTMLDivElement
   let image: IGatsbyImageData
+  let GatsbyImage
 
   beforeEach(() => {
     console.warn = jest.fn()
     console.error = jest.fn()
     global.SERVER = true
     global.GATSBY___IMAGE = true
-  })
+    global.HAS_REACT_18 = false
 
-  beforeEach(() => {
+    GatsbyImage = require(`../gatsby-image.browser`).GatsbyImage
     image = {
       width: 100,
       height: 100,
@@ -80,6 +81,7 @@ describe(`GatsbyImage browser`, () => {
     jest.clearAllMocks()
     global.SERVER = undefined
     global.GATSBY___IMAGE = undefined
+    global.HAS_REACT_18 = undefined
     process.env.NODE_ENV = `test`
   })
 

packages/gatsby-plugin-image/src/components/__tests__/hooks.ts

@@ -1,12 +1,6 @@
 import { Node } from "gatsby"
-import {
-  getSrc,
-  getSrcSet,
-  getImage,
-  IGatsbyImageData,
-  IGetImageDataArgs,
-} from "../../"
-import { getImageData } from "../hooks"
+import { getImageData, getSrc, getSrcSet, getImage } from "../hooks"
+import type { IGatsbyImageData, IGetImageDataArgs } from "../../"
 
 const imageData: IGatsbyImageData = {
   images: {