[react-server] React 18 upgrade

pull client version of react-dom
Shopify · Jun 6, 2023 · c67ce27 · c67ce27
1 parent d02b66a
commit c67ce27
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/.changeset/grumpy-kings-rush.md b/.changeset/grumpy-kings-rush.md
@@ -0,0 +1,15 @@
+---
+'@shopify/react-server': major
+---
+
+Updates React.hydrate -> React.hydrateRoot
+
+## Breaking Change Summary
+
+Hydrating has been updated to support React.hydrateRoot. Apps that do not yet support React 18 will need to update to React 18 before updating to this version.
+
+React 18 supports concurrent rendering, which requires a new API for hydrating the server-rendered HTML. This PR updates the `react-server` package to use the new API.
+
+## How to 🎩
+
+- https://react.dev/blog/2022/03/08/react-18-upgrade-guide
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
@@ -53,16 +53,16 @@
     "get-port": "^5.0.0",
     "memfs": "^3.2.2",
     "node-loader": "^1.0.0",
-    "react": "^17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "saddle-up": "^0.5.4",
     "setimmediate": "^1.0.5",
     "webpack": "^5.38.0"
   },
   "peerDependencies": {
     "cross-fetch": ">=3.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "react": ">=18.0.0 <19.0.0",
+    "react-dom": ">=18.0.0 <19.0.0"
   },
   "optionalDependencies": {
     "@babel/types": ">=7.0.0",

diff --git a/packages/react-server/src/webpack-plugin/error/utilities.ts b/packages/react-server/src/webpack-plugin/error/utilities.ts
@@ -11,11 +11,11 @@ export function errorClientSource() {
   return `
     ${HEADER}
     import React from 'react';
-    import ReactDOM from 'react-dom';
+    import ReactDOM from 'react-dom/client';
     import {showPage} from '@shopify/react-html';
     import Error from 'error';
     const appContainer = document.getElementById('app');
-    ReactDOM.hydrate(React.createElement(Error), appContainer);
+    ReactDOM.hydrateRoot(appContainer, React.createElement(Error));
     showPage();
   `;
 }
diff --git a/packages/react-server/src/webpack-plugin/webpack-plugin.ts b/packages/react-server/src/webpack-plugin/webpack-plugin.ts
@@ -125,7 +125,7 @@ function clientSource() {
   return `
     ${HEADER}
     import React from 'react';
-    import ReactDOM from 'react-dom';
+    import ReactDOM from 'react-dom/client';
     import {showPage, getSerialized} from '@shopify/react-html';
 
     import App from 'index';
@@ -134,7 +134,7 @@ function clientSource() {
     const data = getSerialized('quilt-data');
     const url = new URL(window.location.href);
 
-    ReactDOM.hydrate(React.createElement(App, {data, url}), appContainer);
+    ReactDOM.hydrateRoot(appContainer, React.createElement(App, {data, url}));
     showPage();
   `;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -12161,8 +12161,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-"react-dom17@npm:react-dom@^17.0.2", [email protected]:
-  name react-dom17
+"react-dom17@npm:react-dom@^17.0.2":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -12292,8 +12291,7 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-"react17@npm:react@^17.0.2", react@^17.0.2:
-  name react17
+"react17@npm:react@^17.0.2":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==