PR 1.5 - Pin React to 18.3.1 #3152

juanpprieto · 2025-09-10T04:42:12Z

WHY are these changes introduced?

During the React Router 7.8.x migration, tests were failing with React hook errors ("Invalid hook call" / "Cannot read properties of null"). Investigation revealed multiple React versions were being resolved in the monorepo:

Direct dependencies had React 18.3.1
Transitive dependencies (react-router, @testing-library/react, etc.) were bringing in React 18.2.0

This caused duplicate React instances, breaking hooks and causing 237+ test failures.

WHAT is this pull request doing?

This PR pins React and React-DOM to exactly version 18.3.1 across the entire monorepo to ensure a single React version:

Updated all package.json files to use exact version 18.3.1 (no ^ or ~)
- packages/hydrogen/package.json
- packages/hydrogen-react/package.json
- templates/skeleton/package.json
- examples/express/package.json
- docs/preview/package.json
Added npm overrides in root package.json to force React 18.3.1 for all transitive dependencies:
```
"overrides": {
  "react": "18.3.1",
  "react-dom": "18.3.1"
}
```

HOW to test your changes?

Check out this branch
Run npm install from the root
Verify single React version: npm ls react --depth=0
Run tests: npm test
Run typecheck: npm run typecheck
Build packages: npm run build

All tests should pass (381 tests across 45 files).

Post-merge steps

None required.

Checklist

I've read the Contributing Guidelines
I've considered possible cross-platform impacts (Mac, Linux, Windows)
I've added a changeset if this PR contains user-facing or noteworthy changes (not needed - internal fix)
I've added tests to cover my changes (existing tests now pass)
I've added or updated the documentation (not needed - internal fix)

- Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions

- Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories

…2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility

- React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts

- Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation

… USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild

Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule

Move params initialization inside useMemo to avoid recreating on every render

@ts-ignore

…te dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully

These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration.

…r Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes

- Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion

- Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix

- Resolved conflicts in codegen.ts by merging both approaches - Used typescript-lint version of customer-account-api-types.d.ts - Added CountryCode to enumValues configuration - Restored .claude/commands/shopify-cli-update.md file

github-actions · 2025-09-10T04:42:27Z

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset.
If the changes are user-facing and should cause a version bump, run npm run changeset add to track your changes and include them in the next release CHANGELOG.
If you are making simple updates to examples or documentation, you do not need to add a changeset.

shopify · 2025-09-10T04:44:06Z

Oxygen deployed a preview of your feat/pin-react-rr-7.8 branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 12, 2025 2:38 PM
metaobjects	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 12, 2025 2:38 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 12, 2025 2:38 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	September 12, 2025 2:38 PM

Learn more about Hydrogen's GitHub integration.

rbshop · 2025-09-10T12:22:25Z

package.json

  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.34.9"
+    "@rollup/rollup-linux-x64-gnu": "^4.34.9",
+    "@ast-grep/napi-linux-x64-gnu": "0.34.1"


… API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return

This file was inadvertently modified in commit 054c2b3 and should match the base branch version

- Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances

- Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files)

- Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors

Resolved conflicts: - package.json: Kept React/React-DOM pinned to 18.3.1, added from main - packages/cli/package.json: Added @remix-run/dev from main - packages/hydrogen/package.json: Kept React pinned to 18.3.1 in peerDeps - packages/hydrogen-react tests: Took main's version with USDC tests - templates/skeleton/package.json: React 18.3.1 + CLI ~3.83.3 from main - examples/express/package.json: Kept React pinned to 18.3.1 - Schema files: Accepted main's 2025-07 API versions - package-lock.json: Regenerated fresh All CI checks passing: typecheck, tests, lint, build

@ts-ignore

* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>

juanpprieto and others added 19 commits September 3, 2025 21:39

fix: hoist @react-router/dev and fs-routes to fix CLI tests

09f1e90

- Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories

fix: update .gitignore and example lint scripts for React Router 7.8.…

20f71b8

…2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility

fix: update UIMatch test helper for React Router 7.8.2 compatibility

6a8ee3e

- React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts

Lint and format

847906c

Lint and format

9f637aa

Add changeset

104272c

fix: TypeScript 5.9 compatibility updates

0151285

- Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation

Suggested money changes for PR #3090 (#3097)

1c1e808

fix: resolve eslint dependency issue in subscriptions example

034ada1

Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule

fix: properly fix useMemo dependencies in subscriptions example

28d67d6

Move params initialization inside useMemo to avoid recreating on every render

ci: trigger CI workflows

cd07377

fix: address PR review feedback

2ff1db7

- Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion

fix: address PR review feedback

71254df

- Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix

juanpprieto changed the title ~~Fix: Pin React to 18.3.1 to resolve version conflicts in React Router 7.8.x migration~~ PR 1.5 - Pin React to 18.3.1 to resolve version conflicts in React Router 7.8.x migration Sep 10, 2025

rbshop reviewed Sep 10, 2025

View reviewed changes

rbshop approved these changes Sep 10, 2025

View reviewed changes

juanpprieto changed the title ~~PR 1.5 - Pin React to 18.3.1 to resolve version conflicts in React Router 7.8.x migration~~ PR 1.5 - Pin React to 18.3.1 Sep 10, 2025

juanpprieto added 4 commits September 10, 2025 10:33

chore: remove unrelated shopify-cli-update.md changes

9505050

This file was inadvertently modified in commit 054c2b3 and should match the base branch version

fix: pin React and React-DOM to 18.3.1 across monorepo

bf33813

- Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances

fix: add missing ast-grep Linux x64 optional dependency for CI

0d90e88

- Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors

juanpprieto force-pushed the feat/pin-react-rr-7.8 branch from 1943d3d to 0d90e88 Compare September 10, 2025 17:41

kdaviduik approved these changes Sep 11, 2025

View reviewed changes

Base automatically changed from feat/hydrogen-react-rr-7.8 to main September 12, 2025 07:16

juanpprieto requested a review from a team as a code owner September 12, 2025 07:16

juanpprieto merged commit 1328e86 into main Sep 12, 2025
15 checks passed

juanpprieto deleted the feat/pin-react-rr-7.8 branch September 12, 2025 14:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR 1.5 - Pin React to 18.3.1 #3152

PR 1.5 - Pin React to 18.3.1 #3152

Uh oh!

juanpprieto commented Sep 10, 2025

Uh oh!

github-actions bot commented Sep 10, 2025

Uh oh!

shopify bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

rbshop Sep 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

PR 1.5 - Pin React to 18.3.1 #3152

PR 1.5 - Pin React to 18.3.1 #3152

Uh oh!

Conversation

juanpprieto commented Sep 10, 2025

WHY are these changes introduced?

WHAT is this pull request doing?

HOW to test your changes?

Post-merge steps

Checklist

Uh oh!

github-actions bot commented Sep 10, 2025

Uh oh!

shopify bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rbshop Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shopify bot commented Sep 10, 2025 •

edited

Loading