chore(clerk-js,ui): upgrade to Rspack 2#8382
Conversation
Bumps the Rspack catalog to 2.0.0 and applies the migration: - Node minimum bumped to 22.12.0 (Rspack 2 requirement) - Convert clerk-js rspack.config.js to .mjs (Rspack 2 core is pure ESM) - Rename output.libraryTarget to output.library.type (8 sites) - Move experiments.cache to top-level cache - Drop --analyze CLI flag (removed in v2; Rsdoctor remains for analysis) - Bump @rsdoctor/rspack-plugin to 1.5.x - Add @rspack/dev-server as a direct dep (no longer bundled with @rspack/cli) Both packages build green across all variants.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 94cc5fb The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
📝 WalkthroughWalkthroughThis PR upgrades the Rspack build tooling to v2 across clerk-js and ui: migrating clerk-js rspack config to ESM imports/exports, replacing deprecated Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clerk-js/rspack.config.mjs (1)
2-518:⚠️ Potential issue | 🟠 MajorMerge blocker: no test coverage/verification for a build-system migration
This PR changes core bundling behavior (Rspack major version, config format, output library config, cache semantics) but includes no added/updated tests or automated verification in the change set. Please add and run migration-focused build/test coverage (at least smoke coverage across the declared variants) before merge.
As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/clerk-js/rspack.config.mjs` around lines 2 - 518, The PR introduces a major rspack-based bundling change but lacks migration/verification tests; add automated smoke tests that build and validate each declared variant (use variants object keys and entryForVariant, prodConfig and devConfig outputs) to CI: create test scripts that invoke the rspack build for clerkBrowser, clerkLegacyBrowser, clerkNative, clerk (ESM/CJS) and clerkNoRHC variants, assert successful exit and presence of expected output files (check output.filename/library type for commonjs/module/umd and chunking behavior), and add these tests to the repository CI pipeline so they run on PRs before merge.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.changeset/rspack-2-upgrade.md:
- Line 6: Add a CI-backed smoke test that verifies the Rspack 2 build/runtime
produces working bundles for the changed packages (`@clerk/clerk-js` and
`@clerk/ui`): create a new lightweight workflow or job (e.g.,
.github/workflows/smoke-rspack2.yml) that installs Node 22.12.0, runs the repo
build (npm/yarn build), runs a small script or test (e.g., a new script
"smoke:rspack2" in package.json) that imports the built bundles and asserts
basic runtime behavior (bundle loads without runtime errors and exports expected
symbols), and fail the job on any error; ensure the workflow runs on PRs and
include the new smoke script and any minimal test file under test/smoke or
tests/smoke so the CI actually exercises the new Rspack 2 output before merging.
In `@pnpm-workspace.yaml`:
- Around line 50-51: The exception currently whitelists the entire scope token
'@rspack/*', which is too broad; replace that entry with explicit
package+version pins for only the four newly added 2.0.0 packages (e.g.,
'@rspack/package-name@2.0.0') so only those exact artifacts bypass the 48h gate,
and keep the existing TODO comment about removing the pins once 2.0.0 is older
than 48h.
---
Outside diff comments:
In `@packages/clerk-js/rspack.config.mjs`:
- Around line 2-518: The PR introduces a major rspack-based bundling change but
lacks migration/verification tests; add automated smoke tests that build and
validate each declared variant (use variants object keys and entryForVariant,
prodConfig and devConfig outputs) to CI: create test scripts that invoke the
rspack build for clerkBrowser, clerkLegacyBrowser, clerkNative, clerk (ESM/CJS)
and clerkNoRHC variants, assert successful exit and presence of expected output
files (check output.filename/library type for commonjs/module/umd and chunking
behavior), and add these tests to the repository CI pipeline so they run on PRs
before merge.
🪄 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: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 28eb5570-4ee1-4362-ae85-fc2dc0f1f50b
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.changeset/rspack-2-upgrade.md.nvmrcpackage.jsonpackages/clerk-js/package.jsonpackages/clerk-js/rspack.config.mjspackages/clerk-js/turbo.jsonpackages/ui/package.jsonpackages/ui/rspack.config.jspnpm-workspace.yaml
|
Break Check: no API changes detected across the tracked packages. Last ran on |
Drop the NoInfer import from @tanstack/query-core (removed in 5.100.14; TS provides NoInfer as a built-in) and guard the script.nonce assignment for stricter typecheck, matching #8177. Bump clerk.browser.js and base-account-sdk bundlewatch budgets for rspack 2's slightly larger gzip output.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/shared/src/react/query/useQuery.ts (1)
36-41: ⚡ Quick winAdd JSDoc documentation for the public API function.
The
useClerkQueryfunction is exported and part of the public API, but currently has an empty JSDoc comment. As per coding guidelines, public APIs should be documented with@param,@returns, and@exampletags.📝 Suggested JSDoc documentation
/** - * + * Hook to execute a Clerk-specific query using TanStack Query patterns. + * + * `@param` options - Query configuration options including queryKey, queryFn, and other TanStack Query options + * `@returns` Query result with data, error, loading, and fetching states + * + * `@example` + * ```tsx + * const { data, error, isLoading } = useClerkQuery({ + * queryKey: ['user', userId], + * queryFn: () => fetchUserData(userId), + * enabled: !!userId, + * }); + * ``` */ export function useClerkQuery(options: UseQueryOptions) { return useBaseQuery(options, QueryObserver); }As per coding guidelines: "All public APIs must be documented with JSDoc".
🤖 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 `@packages/shared/src/react/query/useQuery.ts` around lines 36 - 41, Add a proper JSDoc block above the exported function useClerkQuery describing its purpose, a `@param` for the options parameter (type UseQueryOptions), a `@returns` describing the query result shape, and an `@example` showing typical usage (e.g., queryKey, queryFn, enabled). Reference the implementation details by mentioning useBaseQuery and QueryObserver so the docs note that useClerkQuery delegates to useBaseQuery(options, QueryObserver). Keep the comment concise and follow existing project JSDoc style.
🤖 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.
Nitpick comments:
In `@packages/shared/src/react/query/useQuery.ts`:
- Around line 36-41: Add a proper JSDoc block above the exported function
useClerkQuery describing its purpose, a `@param` for the options parameter (type
UseQueryOptions), a `@returns` describing the query result shape, and an `@example`
showing typical usage (e.g., queryKey, queryFn, enabled). Reference the
implementation details by mentioning useBaseQuery and QueryObserver so the docs
note that useClerkQuery delegates to useBaseQuery(options, QueryObserver). Keep
the comment concise and follow existing project JSDoc style.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: eed67afe-f65b-45d3-b58c-ec5a0a59ad5e
📒 Files selected for processing (3)
packages/clerk-js/bundlewatch.config.jsonpackages/shared/src/loadScript.tspackages/shared/src/react/query/useQuery.ts
✅ Files skipped from review due to trivial changes (1)
- packages/clerk-js/bundlewatch.config.json
Bump @rspack/core and @rspack/cli to 2.0.6, @rspack/dev-server to 2.0.3, and @rspack/plugin-react-refresh to 2.0.1 (each package's latest in the 2.0.x line). All four are now >48h old, so drop the temporary @rspack/* entry from minimumReleaseAgeExclude, restoring the release-age quarantine.
2 participants
Upgrades
@clerk/clerk-jsand@clerk/uibundling from Rspack 1.7.x to Rspack 2 (2.0.6). Every variant builds (7 for clerk-js, 3 for ui), and the unit + integration matrix and bundlewatch are all green. Node minimum moves to 22.12.0, a Rspack 2 requirement.The part worth real scrutiny is the config migration in
packages/clerk-js/rspack.config.mjsandpackages/ui/rspack.config.js: the config moves to ESM (Rspack 2 core is pure ESM),output.libraryTarget: 'x'is rewritten tooutput.library: { type: 'x' }across both configs, andexperiments.cachegraduates to a top-levelcache. Since clerk-js/ui load into apps pinned on older SDK versions, the thing to confirm is that the per-variant bundle shape (library type, chunking) is unchanged.Two small riders come along: bundlewatch budgets nudged up for Rspack 2's marginally larger gzip (
clerk.browser.js70→72KB,base-account-sdk203→205KB, otherwise within ~0.1KB), and two@clerk/sharedtypecheck fixes, dropping the now-built-inNoInferimport from@tanstack/query-coreand guardingscript.nonceinloadScript.ts(matching #8177).Holding the merge while the TS 6.0 work (#8177) settles, since the two overlap in the bundlewatch config and
@clerk/ui's build.