Would it be possible to run Hydrogen with React 19 beta?

[ataias]

I have been analyzing some hydration issues in a live website that recently migrated from Shopify Themes to Hydrogen and those issues seem to have been known for a while. I have investigated a couple options on how to address them and reached the following options:

1. remix-island : would allow hydrating the body instead of the whole document, but seems to have limitations on using loader data (at least I couldn't find a way around it yet) and such approach is not recommended in the long term (Bug: Hydration mismatch error due to plugins generating script tag on top facebook/react#24430 (comment))
2. MutationObserver: this approach didn't work well when I tested; react hydration probably detects the changes from the browser extensions anyway
3. React 19 (beta): NextJS has been using Canary versions of React as the official ones for a while now and so the option of already bumping to React 19-beta seemed promising. I imagine there might be some extra validation required to validate all packages work adequately, but if I can override the versions and test, then that can be a start.

Option 3 is the most promising, but I couldn't even open the website because of the following error:

[1] ╭─ error ──────────────────────────────────────────────────────────────────────╮
[1] │ │
[1] │ Cannot read properties of undefined (reading 'ReactCurrentOwner') │
[1] │ │
[1] │ To investigate the issue, examine this stack trace: │
[1] │ at $$$reconciler │
[1] │ (react-reconciler/cjs/react-reconciler.development.js:491) │
[1] │ at (... │
[1] │ /node_modules/ink/build/reconciler.js:59) │
[1] │ │
[1] ╰──────────────────────────────────────────────────────────────────────────────╯

The failing package is called "react-reconciler" and it is not a part of the project direct dependencies. It is actually used by @shopify/cli-kit:

❯ npm why react-reconciler
react-reconciler@0.29.2
node_modules/react-reconciler
  react-reconciler@"^0.29.0" from ink@4.4.1
  node_modules/ink
    ink@"4.4.1" from @shopify/cli-kit@3.59.2
    node_modules/@shopify/cli-kit
      @shopify/cli-kit@"3.59.2" from @shopify/cli-hydrogen@8.0.3
      node_modules/@shopify/cli-hydrogen
        @shopify/cli-hydrogen@"^8.0.3" from the root project
      peer @shopify/cli-kit@"^3.58.0" from @shopify/oxygen-cli@4.4.4
      node_modules/@shopify/oxygen-cli
        @shopify/oxygen-cli@"~4.4.0" from @shopify/cli-hydrogen@8.0.3
        node_modules/@shopify/cli-hydrogen
          @shopify/cli-hydrogen@"^8.0.3" from the root project
      @shopify/cli-kit@"3.59.2" from @shopify/plugin-cloudflare@3.59.2
      node_modules/@shopify/plugin-cloudflare
        @shopify/plugin-cloudflare@"3.59.2" from @shopify/cli-hydrogen@8.0.3
        node_modules/@shopify/cli-hydrogen
          @shopify/cli-hydrogen@"^8.0.3" from the root project

So, from what I understand there is no support for React 19 by Hydrogen yet. Is there some workaround or timeline for that? Or am I misunderstand something?

For reference, the command being called is shopify hydrogen dev --codegen and I did the following changes to upgrade the packages:

diff --git a/package.json b/package.json
index 3b3b7f3f..bfaf581e 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
     "@builder.io/utils": "^1.1.20",
     "@remix-run/css-bundle": "^2.1.0",
     "@remix-run/react": "^2.1.0",
-    "@shopify/cli": "3.51.0",
-    "@shopify/cli-hydrogen": "^6.0.2",
+    "@shopify/cli": "3.59.2",
+    "@shopify/cli-hydrogen": "^8.0.3",
     "@shopify/hydrogen": "^2024.4.0",
     "@shopify/remix-oxygen": "^2.0.2",
     "@types/react-gtm-module": "^2.0.3",
@@ -43,10 +43,10 @@
     "isbot": "^3.6.12",
     "jwt-decode": "^3.1.2",
     "postcss-cli": "^10.1.0",
-    "react": "^18.2.0",
+    "react": "19.0.0-beta-94eed63c49-20240425",
     "react-compare-image": "^3.4.0",
     "react-country-flag": "^3.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "19.0.0-beta-94eed63c49-20240425",
     "react-flickity-component": "^4.0.7",
     "react-gtm-module": "^2.0.11",
     "react-intersection-observer": "^9.5.3",
@@ -60,6 +60,10 @@
     "unlighthouse": "^0.10.0",
     "yup": "^1.2.0"
   },
+  "overrides": {
+    "react": "19.0.0-beta-94eed63c49-20240425",
+    "react-dom": "19.0.0-beta-94eed63c49-20240425"
+  },
   "devDependencies": {
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",

[rafael-franca]

I think that it will be soon! The Remix team already made some posts on X about React 19 and Remix.

[frandiox]

We don't have a clear timeline for this yet. We depend on two things:

1. Remix supporting React 19. I know they are already tinkering with it but no ETA as far as I know.
2. Ink supporting React 19 to avoid the type of errors you're seeing with cli-kit, which uses React to render in the terminal and creates conflicts if multiple versions of React are found. Alternatively, we might move our CLI to be global so that it doesn't interfere with local dependencies.

We'll probably focus on solutions for 2 after 1 is done, but this might not happen until React 19 is actually stable.

[jamalsoueidan]

...tooooo early to think about react 19 😄