chore(deps): update [dev] minor and patch dependencies for gatsby-graphiql-explorer (#38279)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: LekoArts <[email protected]>

Author: renovate[bot]

packages/gatsby-graphiql-explorer/package.json

@@ -38,25 +38,25 @@
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@graphiql/plugin-code-exporter": "^0.1.2",
-    "@graphiql/plugin-explorer": "^0.1.20",
-    "@graphiql/react": "^0.17.6",
+    "@graphiql/plugin-code-exporter": "^0.2.0",
+    "@graphiql/plugin-explorer": "^0.2.0",
+    "@graphiql/react": "^0.18.0",
     "@graphiql/toolkit": "^0.8.4",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.1.2",
     "babel-preset-gatsby-package": "^3.12.0-next.0",
     "core-js": "^3.30.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "del-cli": "^5.0.0",
-    "graphiql": "^2.4.7",
-    "html-webpack-plugin": "^5.5.1",
+    "graphiql": "^3.0.0",
+    "html-webpack-plugin": "^5.5.3",
     "npm-run-all": "4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.11",
     "style-loader": "^3.3.3",
-    "webpack": "^5.85.0",
-    "webpack-cli": "^4.10.0"
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4"
   },
   "engines": {
     "node": ">=18.0.0"

packages/gatsby-graphiql-explorer/src/app.jsx

@@ -2,7 +2,7 @@
 import regeneratorRuntime from "regenerator-runtime"
 
 import * as React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { GraphiQL } from "graphiql"
 import { getIntrospectionQuery } from "graphql"
 import { useExplorerPlugin } from "@graphiql/plugin-explorer"
@@ -179,12 +179,12 @@ const App = ({ initialExternalFragments }) => {
   )
 }
 
+const container = document.getElementById(`root`)
+const root = createRoot(container)
+
 // crude way to fetch fragments on boot time
 // it won't hot reload fragments (refresh required)
 // but good enough for initial integration
 fetchFragments().then(initialExternalFragments => {
-  ReactDOM.render(
-    <App initialExternalFragments={initialExternalFragments} />,
-    document.getElementById(`root`)
-  )
+  root.render(<App initialExternalFragments={initialExternalFragments} />)
 })

packages/gatsby-graphiql-explorer/src/webpack.config.js

@@ -4,6 +4,7 @@ const webpack = require(`webpack`)
 
 const mode = `production`
 
+/** @type { import('webpack').Configuration } */
 module.exports = {
   entry: path.join(__dirname, `app.jsx`),
   mode,

packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts

@@ -449,11 +449,16 @@ export class PartialHydrationPlugin {
             }
           }
 
-          for (const cssModule of modulesToInsertIntoApp.sort(
-            (a, b) =>
-              compilation.moduleGraph.getPostOrderIndex(a) -
-              compilation.moduleGraph.getPostOrderIndex(b)
-          )) {
+          for (const cssModule of modulesToInsertIntoApp.sort((a, b) => {
+            const _a = compilation.moduleGraph.getPostOrderIndex(a)
+            const _b = compilation.moduleGraph.getPostOrderIndex(b)
+
+            if (!_a || !_b) {
+              return 0
+            } else {
+              return _a - _b
+            }
+          })) {
             compilation.chunkGraph.connectChunkAndModule(appChunk, cssModule)
 
             for (const group of appChunk.groupsIterable) {