Skip to content

chore(clerk-js,ui): upgrade to Rspack 2 #8382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jacekradko wants to merge 3 commits into
base: main
Choose a base branch
from
Open

chore(clerk-js,ui): upgrade to Rspack 2 #8382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7941ced
chore(clerk-js,ui): upgrade to Rspack 2
jacekradko Apr 22, 2026
0b488fe
Merge branch 'main' into jacek/rspack-2
jacekradko Apr 22, 2026
2188490
chore(repo): dedupe pnpm lockfile
jacekradko Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/rspack-2-upgrade.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/ui': patch
---

Upgrade build tooling to Rspack 2. No user-facing API changes; the compiled bundle output is produced by Rspack 2's runtime. Also bumps the repo's minimum Node to 22.12.0 (Rspack 2 requirement).
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add smoke coverage for the Rspack 2 migration before merge.

This PR changes the toolchain/runtime that emits published @clerk/clerk-js and @clerk/ui bundles, but no tests were added or updated in the diff. Please land at least one CI-backed smoke path for the upgraded build/dev/analyzer flow before merging.

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 @.changeset/rspack-2-upgrade.md at 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.

2 changes: 1 addition & 1 deletion .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
22.11.0
22.12.0
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
},
"packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
"engines": {
"node": ">=22.11.0",
"node": ">=22.12.0",
"pnpm": ">=10.17.1"
},
"pnpm": {
Expand Down
19 changes: 10 additions & 9 deletions packages/clerk-js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,18 @@
],
"scripts": {
"build": "pnpm build:bundle && pnpm build:declarations",
"build:analyze": "rspack build --config rspack.config.js --env production --env variant=\"clerk.browser\" --env analysis --analyze",
"build:bundle": "pnpm clean && rspack build --config rspack.config.js --env production",
"build:analyze": "rspack build --config rspack.config.mjs --env production --env variant=\"clerk.browser\" --env analysis",
"build:bundle": "pnpm clean && rspack build --config rspack.config.mjs --env production",
"build:declarations": "tsc -p tsconfig.declarations.json",
"build:sandbox": "pnpm --filter @clerk/ui build:umd && rspack build --config rspack.config.js --env production --env sandbox",
"build:stats": "rspack build --config rspack.config.js --env production --json=stats.json --env variant=\"clerk.browser\"",
"build:sandbox": "pnpm --filter @clerk/ui build:umd && rspack build --config rspack.config.mjs --env production --env sandbox",
"build:stats": "rspack build --config rspack.config.mjs --env production --json=stats.json --env variant=\"clerk.browser\"",
"bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json",
"bundlewatch:fix": "node bundlewatch-fix.mjs",
"clean": "rimraf ./dist",
"dev": "rspack serve --config rspack.config.js",
"dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
"dev": "rspack serve --config rspack.config.mjs",
"dev:origin": "rspack serve --config rspack.config.mjs --env devOrigin=http://localhost:${PORT:-4000}",
"dev:sandbox": "pnpm -w dev:sandbox",
"dev:sandbox:serve": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
"dev:sandbox:serve": "rspack serve --config rspack.config.mjs --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
"format": "node ../../scripts/format-package.mjs",
"format:check": "node ../../scripts/format-package.mjs --check",
"lint": "eslint src",
Expand All @@ -79,7 +79,7 @@
"test:sandbox:integration": "playwright test",
"test:sandbox:integration:ui": "playwright test --ui",
"test:sandbox:integration:update-snapshots": "playwright test --update-snapshots",
"watch": "rspack build --config rspack.config.js --env production --watch"
"watch": "rspack build --config rspack.config.mjs --env production --watch"
},
"browserslist": "last 2 years",
"dependencies": {
Expand All @@ -105,9 +105,10 @@
"@clerk/msw": "workspace:^",
"@clerk/testing": "workspace:^",
"@emotion/react": "11.11.1",
"@rsdoctor/rspack-plugin": "^0.4.13",
"@rsdoctor/rspack-plugin": "^1.5.9",
"@rspack/cli": "catalog:rspack",
"@rspack/core": "catalog:rspack",
"@rspack/dev-server": "catalog:rspack",
"@rspack/plugin-react-refresh": "catalog:rspack",
"@types/cloudflare-turnstile": "^0.2.2",
"@types/webpack-env": "^1.18.8",
Expand Down
41 changes: 22 additions & 19 deletions packages/clerk-js/rspack.config.js → packages/clerk-js/rspack.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
// @ts-check
const rspack = require('@rspack/core');
const packageJSON = require('./package.json');
const path = require('path');
const { merge } = require('webpack-merge');
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
const { svgLoader, typescriptLoaderProd, typescriptLoaderDev } = require('../../scripts/rspack-common');
import rspack from '@rspack/core';
import path from 'path';
import { fileURLToPath } from 'url';
import { createRequire } from 'module';
import { merge } from 'webpack-merge';
import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
import { svgLoader, typescriptLoaderProd, typescriptLoaderDev } from '../../scripts/rspack-common.js';
import packageJSON from './package.json' with { type: 'json' };

const require = createRequire(import.meta.url);
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const isProduction = mode => mode === 'production';
const isDevelopment = mode => !isProduction(mode);
Expand Down Expand Up @@ -185,7 +191,7 @@ const commonForProd = () => {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'umd',
library: { type: 'umd' },
globalObject: 'globalThis',
},
optimization: {
Expand Down Expand Up @@ -305,7 +311,7 @@ const prodConfig = ({ mode, env, analysis }) => {
},
output: {
filename: '[name].mjs',
libraryTarget: 'module',
library: { type: 'module' },
},
plugins: [
// Include the lazy chunks in the bundle as well
Expand All @@ -329,7 +335,7 @@ const prodConfig = ({ mode, env, analysis }) => {
{
output: {
filename: '[name].js',
libraryTarget: 'commonjs',
library: { type: 'commonjs' },
},
plugins: [
// Include the lazy chunks in the bundle as well
Expand Down Expand Up @@ -378,7 +384,7 @@ const prodConfig = ({ mode, env, analysis }) => {
},
output: {
filename: '[name].mjs',
libraryTarget: 'module',
library: { type: 'module' },
},
},
);
Expand All @@ -392,7 +398,7 @@ const prodConfig = ({ mode, env, analysis }) => {
{
output: {
filename: '[name].js',
libraryTarget: 'commonjs',
library: { type: 'commonjs' },
},
},
);
Expand Down Expand Up @@ -443,7 +449,7 @@ const devConfig = ({ mode, env }) => {
publicPath: isSandbox ? `` : `${devUrl.origin}/npm`,
crossOriginLoading: 'anonymous',
filename: `[name].js`,
libraryTarget: 'umd',
library: { type: 'umd' },
},
optimization: {
minimize: false,
Expand All @@ -463,11 +469,8 @@ const devConfig = ({ mode, env }) => {
}
: {}),
},
cache: true,
experiments: {
cache: {
type: 'memory',
},
cache: {
type: 'memory',
},
lazyCompilation: false,
};
Expand Down Expand Up @@ -507,7 +510,7 @@ const devConfig = ({ mode, env }) => {
return entryToConfigMap[variant];
};

module.exports = env => {
export default env => {
const mode = env.production ? 'production' : 'development';
const analysis = !!env.analysis;

Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/turbo.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"src/**",
"tsconfig.json",
"tsconfig.declarations.json",
"rspack.config.js",
"rspack.config.mjs",

"!**/*.test.*",
"!**/test/**",
Expand Down
5 changes: 3 additions & 2 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
],
"scripts": {
"build": "pnpm build:umd && pnpm build:esm && pnpm check:no-rhc && pnpm type-check",
"build:analyze": "rspack build --config rspack.config.js --env production --env analyze --analyze",
"build:analyze": "rspack build --config rspack.config.js --env production --env analyze",
"build:esm": "tsdown",
"build:rsdoctor": "RSDOCTOR=true rspack build --config rspack.config.js --env production",
"build:umd": "rspack build --config rspack.config.js --env production",
Expand Down Expand Up @@ -113,9 +113,10 @@
},
"devDependencies": {
"@floating-ui/react-dom": "^2.1.8",
"@rsdoctor/rspack-plugin": "^0.4.13",
"@rsdoctor/rspack-plugin": "^1.5.9",
"@rspack/cli": "catalog:rspack",
"@rspack/core": "catalog:rspack",
"@rspack/dev-server": "catalog:rspack",
"@rspack/plugin-react-refresh": "catalog:rspack",
"@svgr/rollup": "^8.1.0",
"@svgr/webpack": "^6.5.1",
Expand Down
11 changes: 4 additions & 7 deletions packages/ui/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ const commonForProdBrowser = ({ targets = 'last 2 years', useCoreJs = false } =
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'umd',
library: { type: 'umd' },
globalObject: 'globalThis',
},
module: {
Expand Down Expand Up @@ -265,7 +265,7 @@ const devConfig = (mode, env) => {
publicPath: `${devUrl.origin}/npm/`,
crossOriginLoading: 'anonymous',
filename: `[name].js`,
libraryTarget: 'umd',
library: { type: 'umd' },
},
optimization: {
minimize: false,
Expand All @@ -281,11 +281,8 @@ const devConfig = (mode, env) => {
liveReload: false,
client: { webSocketURL: `auto://${devUrl.host}/ws` },
},
cache: false,
experiments: {
cache: {
type: 'memory',
},
cache: {
type: 'memory',
},
lazyCompilation: false,
// Only externalize React when using the shared variant (e.g., with @clerk/react).
Expand Down
Loading
Loading