P0.5 - Typescript 5.9 and Lint for RR 7.8 #3143
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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
…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.
juanpprieto
changed the base branch from
main
to
feat/pin-react-router-7.8.2
Contributor
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
juanpprieto
changed the title
kdaviduik
reviewed
Sep 8, 2025
Contributor
kdaviduik
left a comment
kdaviduik
left a comment
There was a problem hiding this comment.
Some small things but overall looking good!
- Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion
Contributor
|
We detected some changes in |
kdaviduik
approved these changes
Sep 9, 2025
rbshop
approved these changes
Sep 10, 2025
- Accept main's React/React-DOM dependency additions in root package.json - Include @remix-run/dev in CLI package dependencies - Use main's 2025-07 GraphQL API schemas - Keep USDC currency test in Money.test.tsx - Update skeleton template to use Shopify CLI ~3.83.3 - Regenerate package-lock.json with resolved dependencies
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* 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: 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 --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Standardize TypeScript to 5.9.2 across the monorepo and update ESLint for React Router 7.8.2 compatibility. The base branch used older TypeScript versions that prevented leveraging latest features and maintaining consistency.
WHAT is this pull request doing?
Dependency Updates
Changes
eslint-plugin-hydrogen(incompatible with TS 5.9)dist/and.react-router/to eslint ignoresNote
Money component USDC currency compatibility was cherry picked from the 2025.7.0 branch as the issue was highlighted by typescript 5.9.2 strictness and not just by the APIs type miss-matches.
Files Modified
package.json: Hoisted React Router dev dependencieseslint.config.js: Created standardized configstemplates/skeleton/eslint.config.js: Added dist ignoresHOW to test your changes?
Post-merge steps
None required. All packages using standardized versions.
Checklist
npm testnpm run buildnpm run lint