fix(gatsby): add runtime check for react 17 (#27468)

Author: wardpeet

packages/gatsby/src/utils/webpack-utils.ts

@@ -9,6 +9,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin"
 import OptimizeCssAssetsPlugin from "optimize-css-assets-webpack-plugin"
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
 import { getBrowsersList } from "./browserslist"
+import semver from "semver"
 
 import { GatsbyWebpackStatsExtractor } from "./gatsby-webpack-stats-extractor"
 import { GatsbyWebpackEslintGraphqlSchemaReload } from "./gatsby-webpack-eslint-graphql-schema-reload-plugin"
@@ -721,7 +722,13 @@ function reactHasJsxRuntime(): boolean {
     // Not every version of React has this jsx-runtime yet. Eventually,
     // it will be backported to older versions of react and this check
     // will become unnecessary.
-    return !!require.resolve(`react/jsx-runtime.js`)
+
+    // for now we also do the semver check until react 17 is more widely used
+    const react = require(`react/package.json`)
+    return (
+      !!require.resolve(`react/jsx-runtime.js`) &&
+      semver.major(react.version) >= 17
+    )
   } catch (e) {
     // If the require.resolve throws, that means this version of React
     // does not support the jsx runtime.