Move react to peer deps in Hydrogen (#1439)

* Move React to peer deps * Use type imports * Changesets
Shopify · Oct 22, 2023 · f5b0573 · f5b0573
1 parent d2f4737
commit f5b0573
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/fast-parrots-impress.md b/.changeset/fast-parrots-impress.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Move `react` to peer dependencies. It had been added as a direct dependency by mistake in a previous version.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
@@ -54,16 +54,17 @@
   ],
   "dependencies": {
     "@shopify/hydrogen-react": "2023.7.4",
-    "react": "^18.2.0",
     "content-security-policy-builder": "^2.1.1"
   },
   "peerDependencies": {
     "@remix-run/react": "1.19.1",
-    "@remix-run/server-runtime": "1.19.1"
+    "@remix-run/server-runtime": "1.19.1",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "happy-dom": "^8.9.0",
+    "react": "^18.2.0",
     "schema-dts": "^1.1.0",
     "vitest": "^0.33.0",
     "@shopify/generate-docs": "0.11.1"

diff --git a/packages/hydrogen/src/cart/CartForm.tsx b/packages/hydrogen/src/cart/CartForm.tsx
@@ -1,6 +1,6 @@
 import {type FetcherWithComponents, useFetcher} from '@remix-run/react';
 import {type MetafieldWithoutOwnerId} from './queries/cart-types';
-import React from 'react';
+import type {ReactNode} from 'react';
 import {
   AttributeInput,
   CartBuyerIdentityInput,
@@ -173,9 +173,7 @@ type CartFormCommonProps = {
    * Children nodes of CartForm.
    * Children can be a render prop that receives the fetcher.
    */
-  children:
-    | React.ReactNode
-    | ((fetcher: FetcherWithComponents<any>) => React.ReactNode);
+  children: ReactNode | ((fetcher: FetcherWithComponents<any>) => ReactNode);
   /**
    * The route to submit the form to. Defaults to the current route.
    */

diff --git a/packages/hydrogen/src/product/VariantSelector.ts b/packages/hydrogen/src/product/VariantSelector.ts
@@ -6,7 +6,7 @@ import type {
   ProductVariantConnection,
   SelectedOptionInput,
 } from '@shopify/hydrogen-react/storefront-api-types';
-import {ReactNode, useMemo, createElement, Fragment} from 'react';
+import {type ReactNode, useMemo, createElement, Fragment} from 'react';
 import type {PartialDeep} from 'type-fest';
 
 export type VariantOption = {