Upgrade React Router to v7 and fix version compatibility#102
Merged
Conversation
- Add react-router-dom ^7.6.3 dependency - Update react-router to ^7.6.3 (from ^7.6.1) - Add react-router and react-router-dom to peerDependencies - Bump version from 0.17.1 to 0.17.2 - Update yarn.lock with latest dependencies This fixes version mismatch issues when consuming apps use React Router v7. The useFilterSync hook already uses the correct React Router v7 API. Requested by: Jake Ruesink
|
|
WalkthroughThe package version was incremented, and updates were made to dependencies and peer dependencies. Specifically, Changes
Poem
✨ Finishing Touches🧪 Generate Unit Tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Contributor
|
📝 Storybook Preview: View Storybook This preview will be updated automatically when you push new changes to this PR.
|
Contributor
Author
|
I see a check failed - I'm on it! 🫡 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (1)
packages/components/package.json(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`packages/**/package.json`: In package.json, use peerDependencies for React and remix-hook-form, dependencies for runtime libraries, and devDependencies for types and build tools
packages/**/package.json: In package.json, use peerDependencies for React and remix-hook-form, dependencies for runtime libraries, and devDependencies for types and build tools
📄 Source: CodeRabbit Inference Engine (.cursor/rules/monorepo-organization.mdc)
List of files the instruction was applied to:
packages/components/package.json
`**/package.json`: Use consistent versioning across packages in package.json
**/package.json: Use consistent versioning across packages in package.json
📄 Source: CodeRabbit Inference Engine (.cursor/rules/monorepo-organization.mdc)
List of files the instruction was applied to:
packages/components/package.json
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to packages/**/package.json : In package.json, use peerDependencies for React and remix-hook-form, dependencies for runtime libraries, and devDependencies for types and build tools
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in all form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to apps/**/package.json : In apps' package.json, use workspace version for internal package dependencies (e.g., "@lambdacurry/forms": "*")
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure keyboard navigation works correctly in form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to {apps,packages}/**/*.{ts,tsx} : Use package name imports for published packages (e.g., import { TextField } from '@lambdacurry/forms/remix-hook-form')
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always import useRemixFormContext, zodResolver, and z from their respective packages in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Verify server-side validation integration in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to **/package.json : Use consistent versioning across packages in package.json
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/storybook-testing.mdc:0-0
Timestamp: 2025-07-06T02:47:29.639Z
Learning: Applies to **/*.stories.tsx : Use the `withReactRouterStubDecorator` for stories that require routing context.
packages/components/package.json (17)
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to packages/**/package.json : In package.json, use peerDependencies for React and remix-hook-form, dependencies for runtime libraries, and devDependencies for types and build tools
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to **/package.json : Use consistent versioning across packages in package.json
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to apps/**/package.json : In apps' package.json, use workspace version for internal package dependencies (e.g., "@lambdacurry/forms": "*")
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to {apps,packages}/**/*.{ts,tsx} : Use package name imports for published packages (e.g., import { TextField } from '@lambdacurry/forms/remix-hook-form')
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to tsconfig.json : In tsconfig.json, use path mapping for internal packages (e.g., "@lambdacurry/forms": ["./packages/components/src"])
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/ui-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:47:43.420Z
Learning: Follow consistent component architecture patterns as established in lambda-curry/forms
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use remix-hook-form for form state management and validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.{ts,tsx} : Use Zod schemas for all form validation
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always import FormControl, FormDescription, FormLabel, and FormMessage from './form' in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.{ts,tsx} : Use the specified form setup pattern for form initialization: useRemixForm, zodResolver, RemixFormProvider, and fetcher.Form
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always import useRemixFormContext, zodResolver, and z from their respective packages in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Ensure proper accessibility and validation integration in all form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Always import base UI components from '../ui/component-name' in form-aware components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/monorepo-organization.mdc:0-0
Timestamp: 2025-07-06T02:46:38.522Z
Learning: Applies to packages/components/src/ui/**/*.{ts,tsx} : Do not import from remix-hook-form package in ui components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.test.tsx : Test component composition and customization in form component tests
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Use React.memo for expensive form components
Learnt from: CR
PR: lambda-curry/forms#0
File: .cursor/rules/form-component-patterns.mdc:0-0
Timestamp: 2025-07-06T02:46:20.059Z
Learning: Applies to packages/components/src/remix-hook-form/**/*.tsx : Follow the wrapper component pattern for all form-aware components: omit 'control' from props, get it from useRemixFormContext, and merge default form components with provided ones
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: deploy
- GitHub Check: test
🔇 Additional comments (1)
packages/components/package.json (1)
3-3: Verify version alignment across all workspaces
@lambdacurry/formsis now0.17.2. Ensure every package in the monorepo that depends on it either uses"*"(workspace reference) or is bumped to the same version to keep installs consistent.
Comment on lines
+45
to
47
| "react-router": "^7.0.0", | ||
| "react-router-dom": "^7.0.0", | ||
| "remix-hook-form": "7.0.1" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Deduplicate react-router* between peerDependencies and dependencies
Listing the same modules in both peerDependencies and dependencies will make consumers install two copies of React Router, which can break hook identity checks and inflate bundle size. Keep them only in peerDependencies; if the library needs them for its own build/tests, move them to devDependencies.
"remix-hook-form": "7.0.1"
},
"dependencies": {
@@
- "react-router": "^7.6.3",
- "react-router-dom": "^7.6.3",
+ // provided by the host app via peerDependencies – avoid duplicationAlso applies to: 77-78
🤖 Prompt for AI Agents
In packages/components/package.json around lines 45 to 47 and also lines 77 to
78, react-router and react-router-dom are listed in both peerDependencies and
dependencies, causing duplicate installations. Remove these packages from
dependencies and keep them only in peerDependencies. If the library requires
them for build or testing purposes, move them to devDependencies instead.
Contributor
Author
|
✅ Fixed the failing check suite! The test failure was caused by React Router version conflicts and missing peer dependencies. Here's what I resolved: 🔧 Key Fixes Applied:
🎯 Result:
The fix has been pushed to the original PR branch. The failing check should now pass! 🚀 Commit: 292bdf1 💻 View my work • React 👍 or 👎 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
🚀 Overview
This PR upgrades React Router to v7 and fixes version compatibility issues that occur when consuming applications use React Router v7 while the forms library was using an older version internally.
✨ Changes Made
1. React Router Dependencies Updated
react-router-dom: ^7.6.3to dependenciesreact-router: ^7.6.1→^7.6.3react-routerandreact-router-domtopeerDependencies2. Version Compatibility
0.17.1→0.17.2yarn.lockwith latest dependencies3. Code Compatibility
useFilterSynchook already uses the correct React Router v7 API (useSearchParamsfromreact-router)🔧 Problem Solved
Before: Apps using React Router v7 would encounter version mismatch errors when using
@lambdacurry/formsbecause:react-router-domdependencyAfter: Clean compatibility with React Router v7 apps:
📦 Peer Dependencies
The package now properly declares React Router as peer dependencies:
{ "peerDependencies": { "react": "^19.0.0", "react-router": "^7.0.0", "react-router-dom": "^7.0.0", "remix-hook-form": "7.0.1" } }✅ Verification
🎯 Impact
This resolves the version mismatch error described in the issue and ensures seamless integration with React Router v7 applications. The
useFilterSynchook and all data table functionality will work correctly without any consumer-side changes needed.Requested by: Jake Ruesink
💻 View my work • About Codegen
Summary by CodeRabbit