fix(gatsby-cli): add handling to ensure CLI uses same react instance across the board

packages/gatsby-cli/package.json

@@ -37,7 +37,7 @@
     "pretty-error": "^2.1.1",
     "progress": "^2.0.3",
     "prompts": "^2.3.0",
-    "react": "^16.12.0",
+    "react": "^16.8.0",
     "redux": "^4.0.4",
     "resolve-cwd": "^2.0.0",
     "semver": "^6.3.0",

packages/gatsby-cli/src/reporter/loggers/ink/cli.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "./react-instance-used-by-ink"
 import { Box, Static } from "ink"
 import isTTY from "../../../util/is-tty"
 import { trackBuildError } from "gatsby-telemetry"

packages/gatsby-cli/src/reporter/loggers/ink/components/develop.js

@@ -1,4 +1,8 @@
-import React, { useContext, useState, useEffect } from "react"
+import React, {
+  useContext,
+  useState,
+  useEffect,
+} from "../react-instance-used-by-ink"
 import { Box, Color, StdoutContext } from "ink"
 import StoreStateContext from "../context"
 

packages/gatsby-cli/src/reporter/loggers/ink/components/error.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "../react-instance-used-by-ink"
 import path from "path"
 import { Color, Box } from "ink"
 import { get } from "lodash"

packages/gatsby-cli/src/reporter/loggers/ink/components/progress-bar.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "../react-instance-used-by-ink"
 import { Box } from "ink"
 import calcElapsedTime from "../../../../util/calc-elapsed-time"
 

packages/gatsby-cli/src/reporter/loggers/ink/components/spinner.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "../react-instance-used-by-ink"
 import { Box } from "ink"
 import Spinner from "ink-spinner"
 

packages/gatsby-cli/src/reporter/loggers/ink/context.js

@@ -1,4 +1,8 @@
-import React, { useState, useEffect, createContext } from "react"
+import React, {
+  useState,
+  useEffect,
+  createContext,
+} from "./react-instance-used-by-ink"
 
 import { getStore, onLogAction } from "../../redux/index"
 

packages/gatsby-cli/src/reporter/loggers/ink/index.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext } from "./react-instance-used-by-ink"
 import { render } from "ink"
 import StoreStateContext, { StoreStateProvider } from "./context"
 

packages/gatsby-cli/src/reporter/loggers/ink/react-instance-used-by-ink.js

@@ -0,0 +1,16 @@
+const { createRequireFromPath } = require(`gatsby-core-utils`)
+
+const inkRequire = createRequireFromPath(`ink`)
+
+/* 
+Make sure we use same "react" instance as "ink" would use to prevent error:
+
+UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
+
+This should fix case 3. from that error.
+/*/
+module.exports = inkRequire(`react`)

renovate.json

@@ -11,6 +11,7 @@
   },
   "masterIssue": true,
   "rebaseStalePrs": false,
+  "excludePackageNames": ["react", "react-dom"],
   "rangeStrategy": "bump",
   "bumpVersion": null,
   "semanticCommitScope": null,