feat: support React 19

.circleci/config.yml

@@ -568,6 +568,20 @@ jobs:
       - e2e-test:
           test_path: e2e-tests/development-runtime
 
+  e2e_tests_development_runtime_with_react_19:
+    parameters:
+      node_version:
+        type: string
+      e2e_executor_suffix:
+        type: string
+    executor: e2e<< parameters.e2e_executor_suffix >>
+    steps:
+      # We use curl in this test suite but it isn't available in all images we use
+      - run: apt-get update && apt-get install -y curl
+      - e2e-test:
+          test_path: e2e-tests/development-runtime
+          react_version: "19.1.1"
+
   e2e_tests_production_runtime_with_react_18:
     parameters:
       node_version:
@@ -580,6 +594,30 @@ jobs:
           test_path: e2e-tests/production-runtime
           test_command: yarn test && yarn test:offline
 
+  e2e_tests_production_runtime_with_react_19:
+    parameters:
+      node_version:
+        type: string
+      e2e_executor_suffix:
+        type: string
+    executor: e2e<< parameters.e2e_executor_suffix >>
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/production-runtime
+          test_command: yarn test && yarn test:offline
+          react_version: "19.1.1"
+
+  e2e_tests_react_19:
+    parameters:
+      node_version:
+        type: string
+      e2e_executor_suffix:
+        type: string
+    executor: e2e<< parameters.e2e_executor_suffix >>
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/react-19
+
   themes_e2e_tests_development_runtime:
     parameters:
       node_version:
@@ -902,6 +940,12 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime_with_react_18:
           <<: *e2e-test-workflow
+      - e2e_tests_development_runtime_with_react_19:
+          <<: *e2e-test-workflow
+      - e2e_tests_production_runtime_with_react_19:
+          <<: *e2e-test-workflow
+      - e2e_tests_react_19:
+          <<: *e2e-test-workflow
       - themes_e2e_tests_production_runtime:
           <<: *e2e-test-workflow
       - themes_e2e_tests_development_runtime:

docs/contributing/code-contributions.md

@@ -64,6 +64,24 @@ If you're adding e2e tests and want to run them against local changes:
 - Run `gatsby-dev` inside your specific e2e test directory, for example `e2e-tests/themes/development-runtime`.
 - While the previous step is running, open a new terminal window and run `yarn test` in that same e2e test directory.
 
+### Testing with different React versions
+
+To test compatibility with different React versions, you can use the `upgrade-react.js` script to update the React version in a test directory, then run the tests:
+
+```shell
+REACT_VERSION=19.0.0 TEST_PATH=e2e-tests/production-runtime node ./scripts/upgrade-react.js
+cd e2e-tests/production-runtime
+yarn test
+```
+
+This will update the `package.json` file in the test directory to use the specified React version. This is useful for:
+
+- Testing React 19 compatibility
+- Verifying backwards compatibility with older React versions
+- Ensuring features work across React version boundaries
+
+The same approach works for any e2e test directory. The CI system automatically runs e2e tests against both React 18 and React 19 to catch compatibility issues.
+
 ### Troubleshooting
 
 At any point during the contributing process the Gatsby team would love to help! For help with a specific problem you can [open an Discussion on GitHub](https://github.com/gatsbyjs/gatsby/discussions/categories/help).

e2e-tests/development-runtime/cypress/integration/functionality/queries-in-packages.js

@@ -4,8 +4,10 @@ describe(`queries in packages`, () => {
   })
 
   it(`Should extract and run query from gatsby component`, () => {
-    cy.title().should(
-      `eq`,
+    // Note: in dev this may take a few ms to be populated due to the way the Gatsby Head API is
+    // implemented
+    cy.get("head > title").should(
+      `have.text`,
       `Testing queries in packages | Gatsby Default Starter`
     )
   })

e2e-tests/development-runtime/shared-data/head-function-export.js

@@ -14,6 +14,7 @@ const page = {
   deduplication: `${path}/deduplication/`,
   htmlAndBodyAttributes: `${path}/html-and-body-attributes/`,
   headWithWrapRooElement: `${path}/head-with-wrap-root-element/`,
+  withoutHead: `${path}/without-head/`,
 }
 
 const data = {

e2e-tests/development-runtime/src/pages/head-function-export/basic.js

@@ -14,7 +14,7 @@ export default function HeadFunctionExportBasic() {
       </Link>
       <Link
         data-testid="navigate-to-page-without-head-export"
-        to="/without-head"
+        to="/head-function-export/without-head"
       >
         Navigate to without head export
       </Link>

e2e-tests/development-runtime/src/pages/index.js

@@ -65,7 +65,11 @@ const IndexPage = ({ data }) => (
     <ul>
       {data.posts.edges.map(({ node }) => (
         <li key={node.id}>
-          <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
+          {node.fields?.slug ? (
+            <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
+          ) : (
+            <span>{node.frontmatter.title} (no slug)</span>
+          )}
         </li>
       ))}
     </ul>