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

jacekradko · wobsoriano · dstaley · web-flow · commit fa23ad84957e · 2026-06-12T07:12:44.000-05:00
Co-authored-by: wobsoriano &lt;sorianorobertc@gmail.com&gt;
Co-authored-by: Dylan Staley &lt;88163+dstaley@users.noreply.github.com&gt;
diff --git a/.changeset/rspack-2-upgrade.md b/.changeset/rspack-2-upgrade.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Upgrade build tooling to Rspack 2 (No user-facing API changes).
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
@@ -1,7 +1,7 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "549KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "71.24KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "72KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "114KB" },
     { "path": "./dist/clerk.no-rhc.js", "maxSize": "316KB" },
     { "path": "./dist/clerk.native.js", "maxSize": "72KB" },
diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
@@ -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",
@@ -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": {
@@ -105,9 +105,10 @@
     "@clerk/msw": "workspace:^",
     "@clerk/testing": "workspace:^",
     "@emotion/react": "11.14.0",
-    "@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",
diff --git a/packages/clerk-js/rspack.config.mjs b/packages/clerk-js/rspack.config.mjs
@@ -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);
@@ -185,7 +191,7 @@ const commonForProd = () => {
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: '[name].js',
-      libraryTarget: 'umd',
+      library: { type: 'umd' },
       globalObject: 'globalThis',
     },
     optimization: {
@@ -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
@@ -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
@@ -378,7 +384,7 @@ const prodConfig = ({ mode, env, analysis }) => {
       },
       output: {
         filename: '[name].mjs',
-        libraryTarget: 'module',
+        library: { type: 'module' },
       },
     },
   );
@@ -392,7 +398,7 @@ const prodConfig = ({ mode, env, analysis }) => {
     {
       output: {
         filename: '[name].js',
-        libraryTarget: 'commonjs',
+        library: { type: 'commonjs' },
       },
     },
   );
@@ -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,
@@ -463,11 +469,8 @@ const devConfig = ({ mode, env }) => {
             }
           : {}),
       },
-      cache: true,
-      experiments: {
-        cache: {
-          type: 'memory',
-        },
+      cache: {
+        type: 'memory',
       },
       lazyCompilation: false,
     };
@@ -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;
 
diff --git a/packages/clerk-js/turbo.json b/packages/clerk-js/turbo.json
@@ -7,7 +7,7 @@
         "src/**",
         "tsconfig.json",
         "tsconfig.declarations.json",
-        "rspack.config.js",
+        "rspack.config.mjs",
 
         "!**/*.test.*",
         "!**/test/**",
diff --git a/packages/shared/src/react/query/useQuery.ts b/packages/shared/src/react/query/useQuery.ts
@@ -1,4 +1,4 @@
-import type { DefaultError, NoInfer, QueryKey } from '@tanstack/query-core';
+import type { DefaultError, QueryKey } from '@tanstack/query-core';
 import { QueryObserver } from '@tanstack/query-core';
 
 import type { DefinedInitialDataOptions, UndefinedInitialDataOptions } from './queryOptions';
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -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",
@@ -114,9 +114,10 @@
   "devDependencies": {
     "@clerk/headless": "workspace:^",
     "@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",
diff --git a/packages/ui/rspack.config.js b/packages/ui/rspack.config.js
@@ -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: {
@@ -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,
@@ -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).
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"files": [`
`3`	`3`	`{ "path": "./dist/clerk.js", "maxSize": "549KB" },`
`4`		`- { "path": "./dist/clerk.browser.js", "maxSize": "71.24KB" },`
	`4`	`+ { "path": "./dist/clerk.browser.js", "maxSize": "72KB" },`
`5`	`5`	`{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "114KB" },`
`6`	`6`	`{ "path": "./dist/clerk.no-rhc.js", "maxSize": "316KB" },`
`7`	`7`	`{ "path": "./dist/clerk.native.js", "maxSize": "72KB" },`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { DefaultError, NoInfer, QueryKey } from '@tanstack/query-core';`
	`1`	`+import type { DefaultError, QueryKey } from '@tanstack/query-core';`
`2`	`2`	`import { QueryObserver } from '@tanstack/query-core';`
`3`	`3`
`4`	`4`	`import type { DefinedInitialDataOptions, UndefinedInitialDataOptions } from './queryOptions';`