Upgrade react-router to v8.3.0 and update postcss to 8.5.18 - #4337
Conversation
ThaminduDilshan
added
Type/Improvement
trigger-pr-builder
📝 WalkthroughWalkthroughUpdates the React Router dependency and imports from ChangesReact Router import alignment
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
docs/content/sdks/react-router/apis/callback-route.mdxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. docs/content/sdks/react-router/apis/protected-route.mdxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. docs/content/sdks/react-router/overview.mdxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
ce68a43 to
d66a940
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
ca529fc
d66a940 to
ca529fc
Compare
ca529fc to
7274c5b
Compare
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/content/sdks/react-router/overview.mdx`:
- Line 45: Align the React Router documentation with the intended supported
version: update the version text, peer-dependency table, and surrounding v6
wording to React Router v7 when retaining imports from react-router; otherwise
change the example imports back to react-router-dom and preserve v6
documentation consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 932ff884-b699-4aac-a867-56db24b982e3
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
backend/internal/authn/reactsdk/tool.godocs/content/sdks/react-router/apis/callback-route.mdxdocs/content/sdks/react-router/apis/protected-route.mdxdocs/content/sdks/react-router/overview.mdxdocs/content/sdks/react/guides/protecting-routes/custom.mdxdocs/content/sdks/react/guides/protecting-routes/react-router.mdxfrontend/apps/console/src/features/applications/data/application-templates/technology-based/react.jsonpnpm-workspace.yamlsamples/apps/react-api-based-sample/package.jsonsamples/apps/react-sdk-sample/package.jsonsamples/apps/react-vanilla-sample/package.jsonsamples/apps/react-vanilla-sample/src/App.tsxsamples/apps/react-vanilla-sample/src/components/Layout.tsxsamples/apps/react-vanilla-sample/src/pages/InvitePage.tsxsamples/apps/react-vanilla-sample/src/pages/ProfilePage.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- samples/apps/react-sdk-sample/package.json
- samples/apps/react-vanilla-sample/src/pages/InvitePage.tsx
- samples/apps/react-vanilla-sample/src/pages/ProfilePage.tsx
- samples/apps/react-vanilla-sample/src/components/Layout.tsx
- samples/apps/react-api-based-sample/package.json
- samples/apps/react-vanilla-sample/package.json
|
|
||
| ```tsx title="src/App.tsx" showLineNumbers | ||
| import { BrowserRouter, Routes, Route } from 'react-router-dom' | ||
| import { BrowserRouter, Routes, Route } from 'react-router' |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== file path =="
git ls-files | rg 'docs/content/sdks/react-router/overview\.mdx|package\.json|pnpm-lock\.yaml|package-lock\.json|yarn\.lock' || true
echo
echo "== overview frontmatter and relevant lines =="
if [ -f docs/content/sdks/react-router/overview.mdx ]; then
wc -l docs/content/sdks/react-router/overview.mdx
sed -n '1,140p' docs/content/sdks/react-router/overview.mdx | cat -n
fi
echo
echo "== package files mentioning react-router =="
for f in $(git ls-files | rg '(^|/)package\.json$|pnpm-lock\.yaml|package-lock\.json|yarn\.lock$'); do
echo "--- $f"
rg -n '"react-router"|react-router-dom|react-router-dom' "$f" || true
done
echo
echo "== docs content react-router references =="
rg -n 'react-router|react-router-dom|React Router|v[678]|react-router-dom@|react-router@' docs/content/sdks docs/content 2>/dev/null | head -200 || trueRepository: thunder-id/thunderid
Length of output: 22421
🌐 Web query:
React Router v7 react-router import BrowserRouter Routes Route from react-router
💡 Result:
In React Router v7, the package structure has been simplified, significantly changing how you handle imports. The primary change is the consolidation of functionality into a single package, react-router [1][2][3]. Key changes for your imports: 1. Consolidated Package: You no longer need to maintain separate installations for react-router and react-router-dom [2][4][3]. You can uninstall react-router-dom and use only react-router [1][5]. 2. Standard Imports: Most standard components and hooks—such as BrowserRouter, Routes, Route, Link, and NavLink—are now imported directly from react-router [1][2][5]. Example v7 import: import { BrowserRouter, Routes, Route } from "react-router"; 3. DOM-Specific Imports: Certain APIs that depend specifically on react-dom (such as RouterProvider and HydratedRouter) must now be imported from react-router/dom [1][6][3]. This change ensures that react-dom remains an optional peer dependency, preventing issues in non-DOM environments [3]. Example DOM-specific import: import { RouterProvider } from "react-router/dom"; Summary of migration steps: - Uninstall react-router-dom: npm uninstall react-router-dom [1][4]. - Update all standard react-router-dom imports to react-router [2][5]. - Update any RouterProvider or hydration-related imports to react-router/dom [1][3]. While react-router-dom is still published in v7 as a convenience package that re-exports everything from react-router to ease the transition, the recommended practice is to move to the new import structure [3].
Citations:
- 1: https://reactrouter.com/7.16.0/upgrading/v6
- 2: https://www.uniflow.kr/en/react-router-v7-upgrade-migration-guide/
- 3: https://reactrouter.com/7.0.1/changelog
- 4: https://reactrouter.com/7.18.0/upgrading/v6
- 5: https://remix-run-react-router.mintlify.app/migration/from-v6
- 6: https://reactrouter.com/7.11.0/upgrading/v6
Align the documented supported versions with the new imports.
This page still describes the SDK as supporting React Router v6, but it documents react-router >=6.30.1 and imports BrowserRouter, Routes, and Route from react-router. Those standard browser-router imports come from the React Router v7 package layout; v6 examples should use react-router-dom. Update the version text, peer table, and surrounding v6 wording to reflect React Router v7 support, or keep the example on react-router-dom if v6 remains the intended supported version.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/content/sdks/react-router/overview.mdx` at line 45, Align the React
Router documentation with the intended supported version: update the version
text, peer-dependency table, and surrounding v6 wording to React Router v7 when
retaining imports from react-router; otherwise change the example imports back
to react-router-dom and preserve v6 documentation consistently.
3 participants
Purpose
This pull request bumps the
react-routerversion to 8.x, updates related peer dependencies, and applies some minor dependency version bumps forpostcss. These changes ensure consistency across samples, templates, and documentation, and align the SDK integration guides with the new routing package.Approach
Dependency and version updates:
react-routerdependency is updated to version 8.3.0 in the workspace, and peer dependency rules are adjusted to ensure compatibility with the currentreactversion used in the workspace. [1] [2]postcssis updated from 8.5.12 to 8.5.18 in multiplepackage.jsonfiles for improved security and compatibility. [1] [2] [3] [4]Template and sample app alignment:
react-routerfor routing, with all relevant code snippets, installation commands, and configuration steps revised accordingly. [1] [2] [3] [4]Migration to
react-router(fromreact-router-dom):react-router-domhave been replaced withreact-router, including import statements and installation instructions in both source files and markdown guides. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16]These changes standardize routing across the codebase, reduce confusion for new users, and ensure that all guides and templates reflect the current best practices for integrating ThunderID authentication in React applications.
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
react-routerwhile preserving existing navigation and route behavior.Documentation
react-routerimports instead ofreact-router-dom.react-routerimport style.Chores
react-routerin the workspace catalog.postcssoverride version across affected packages/samples.