Skip to content

chore(deps): upgrade rspack to v2 - #10691

Open
GiladShoham wants to merge 2 commits into
masterfrom
chore/rspack-v2-upgrade
Open

GiladShoham wants to merge 2 commits into
masterfrom
chore/rspack-v2-upgrade

Conversation

@GiladShoham

Copy link
Copy Markdown
Member

Summary

  • Bump @rspack/core 1.7.7 → 2.2.2, @rspack/dev-server 1.2.1 → 2.2.1, @rspack/plugin-react-refresh 1.6.0 → 2.0.2, rspack-manifest-plugin 5.2.1 → 5.2.2.
  • Remove experiments: { css: true } (now the default) from all 4 rspack configs.
  • Drop devServer.static.serveIndex (removed from the dev-server type) and switch @rspack/plugin-react-refresh to its new named export.
  • Disable CSS url() resolution (url: false) in the shared CSS parser config: rspack v2's CSS handler now tries to resolve every url() as a module to read, which fails on the absolute CDN font urls used by the design system with "Unhandled scheme: https:". Every url() in this dependency graph is either an absolute CDN url or a data: URI, so disabling resolution restores v1's behavior with no effect on real local assets.

Test plan

  • npm run lint (tsc + oxlint) passes
  • e2e/harmony/ui-start.e2e.ts (scope UI, workspace UI, SSR, asset serving, graphql, deep routes) — all 12 assertions pass
  • Manual bit start --rebuild against real temp workspaces + bare scopes in a real browser: scope UI, workspace UI, and a live interactive React component preview (JSX + SCSS module) all render correctly with zero console errors

Bump @rspack/core (1.7.7 -> 2.2.2), @rspack/dev-server (1.2.1 -> 2.2.1),
@rspack/plugin-react-refresh (1.6.0 -> 2.0.2), and rspack-manifest-plugin
(5.2.1 -> 5.2.2).

Config changes required by the migration:
- Remove `experiments: { css: true }` (now the default) from all rspack configs
- Drop `devServer.static.serveIndex` (removed from the dev-server type)
- Switch `@rspack/plugin-react-refresh` to its new named export
- Disable CSS `url()` resolution (`url: false`): rspack v2's CSS handler now
  tries to resolve every `url()` as a module to read, which fails on the
  absolute CDN font urls used by the design system with "Unhandled scheme".
  Every `url()` in this graph is either an absolute CDN url or a data: URI,
  so disabling resolution restores the v1 behavior with no effect on real
  assets.

Verified with lint, this repo's `ui-start.e2e.ts` suite, and manual
`bit start --rebuild` runs against real temp workspaces/bare scopes in a
real browser (scope UI, workspace UI, and a live React component preview).
@qodo-free-for-open-source-projects

Copy link
Copy Markdown

PR Summary by Qodo

Upgrade Rspack toolchain to v2

⚙️ Configuration changes 🐞 Bug fix 🕐 20-40 Minutes

Grey Divider

AI Description

• Upgrade Rspack packages to v2 and refresh resolved dependencies.
• Align preview, browser, development, and SSR configurations with v2 APIs.
• Preserve CDN and data URI CSS URLs by disabling module resolution.
Diagram

graph TD
  DEP["Dependency manifests"] --> CORE["Rspack v2 packages"] --> CSS["Shared CSS parser"] --> BROWSER["Browser config"]
  CORE --> PREVIEW["Preview config"]
  CORE --> DEV["Development config"]
  CORE --> SSR["SSR config"]
  CSS --> DEV
  CSS --> SSR
Loading
High-Level Assessment

The following are alternative approaches to this PR:

1. Remain on Rspack v1
  • ➕ Avoids immediate migration changes and CSS URL behavior differences.
  • ➖ Delays the major upgrade and continued access to current Rspack improvements.
  • ➖ Leaves the project on older compiler and development-server APIs.
2. Add remote URL handling
  • ➕ Could retain local asset resolution while explicitly supporting HTTP URLs.
  • ➕ Would accommodate future local URLs without another parser change.
  • ➖ Introduces custom resolver or plugin complexity for assets not currently present.
  • ➖ Requires additional maintenance and broader build-path validation.

Recommendation: Proceed with the PR's approach. Disabling CSS URL resolution is the simplest safe migration because the current dependency graph contains only CDN and data URI URLs; a custom resolver would add unnecessary complexity. Revisit selective URL handling if local CSS assets are introduced.

Files changed (7) +544 / -959

Bug fix (1) +8 / -3
rspack.common.tsPreserve remote CSS URLs under Rspack v2 +8/-3

Preserve remote CSS URLs under Rspack v2

• Disables URL resolution for CSS, automatic CSS, and CSS modules. This prevents Rspack v2 from treating CDN font URLs as readable modules while preserving literal browser URLs.

scopes/ui-foundation/ui/rspack/rspack.common.ts

Other (6) +536 / -956
pnpm-lock.yamlResolve the Rspack v2 dependency graph +530/-936

Resolve the Rspack v2 dependency graph

• Regenerates locked package resolutions for Rspack core, development server, React Refresh plugin, manifest plugin, and their peer dependency graph.

pnpm-lock.yaml

rspack.config.tsAdopt default CSS support in preview builds +0/-3

Adopt default CSS support in preview builds

• Removes the explicit CSS experiment flag because CSS support is enabled by default in Rspack v2.

scopes/preview/preview/rspack/rspack.config.ts

rspack.browser.config.tsAdopt Rspack v2 browser defaults +0/-3

Adopt Rspack v2 browser defaults

• Removes the obsolete CSS experiment flag from production browser builds.

scopes/ui-foundation/ui/rspack/rspack.browser.config.ts

rspack.dev.config.tsMigrate development configuration to Rspack v2 APIs +2/-7

Migrate development configuration to Rspack v2 APIs

• Uses the named ReactRefreshRspackPlugin export, removes the default CSS experiment flag, and drops the unsupported static serveIndex option.

scopes/ui-foundation/ui/rspack/rspack.dev.config.ts

rspack.ssr.config.tsAdopt Rspack v2 SSR defaults +0/-3

Adopt Rspack v2 SSR defaults

• Removes the explicit CSS experiment flag from server-side rendering builds.

scopes/ui-foundation/ui/rspack/rspack.ssr.config.ts

workspace.jsoncUpgrade declared Rspack dependencies +4/-4

Upgrade declared Rspack dependencies

• Upgrades Rspack core to 2.2.2, the development server to 2.2.1, React Refresh plugin to 2.0.2, and the manifest plugin to 5.2.2.

workspace.jsonc

@qodo-free-for-open-source-projects

qodo-free-for-open-source-projects Bot commented Sep 7, 2026

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (1) 📜 Skill insights (0)

Grey Divider


Action required

1. Formatting checks reject the new test 📘 Rule violation ⚙ Maintainability ⭐ New
Description
rspack.common.spec.ts leaves the long it(...) declaration on one line instead of the layout
produced by the repository's 120-column Prettier configuration. Running npm run prettier:check
includes this new spec and reports it as different, so the formatting gate fails.
Code

scopes/ui-foundation/ui/rspack/rspack.common.spec.ts[43]

+  it('resolves a first-party relative url() through the asset pipeline while leaving a vendored absolute url() untouched', async () => {
Evidence
PR Compliance ID 5 requires changed files to pass the configured Prettier check. The new test
contains a call exceeding the configured 120-column width, while the repository's check explicitly
covers TypeScript files under scopes.

CLAUDE.md: Code Must Conform to Prettier Formatting
scopes/ui-foundation/ui/rspack/rspack.common.spec.ts[43-43]
.prettierrc[1-5]
package.json[33-34]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new regression test does not conform to the repository's Prettier formatting.

## Issue Context
The repository uses a 120-column print width and checks files under `scopes` with `npm run prettier:check`.

## Fix Focus Areas
- scopes/ui-foundation/ui/rspack/rspack.common.spec.ts[43-43]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Component preview builds can fail 🐞 Bug ≡ Correctness ⭐ New
Description
createRspackConfig retains default CSS url() parsing even though the upgraded Rspack handler
attempts to resolve absolute URLs, unlike the protected UI configurations that apply
vendorCssParser. Preview entries that include the UI foundation runtime reach the icon and Roboto
font packages, so their CDN URLs can abort the pre-bundle with the documented `Unhandled scheme:
https:` error.
Code

workspace.jsonc[70]

+        "@rspack/core": "^2.2.2",
Evidence
The upgraded dependency activates Rspack v2 behavior for every Rspack configuration. Preview
pre-bundling invokes this separate configuration and imports resolved aspects; the UI foundation
runtime reaches ClientContext, which imports both design font packages, while the preview CSS and
Sass rules have no URL parser override. The shared UI configuration explicitly documents that Rspack
v2 throws on these remote URLs and applies url: false only through styleRules(), which the
preview configuration does not consume.

scopes/preview/preview/pre-bundle.ts[80-114]
scopes/ui-foundation/ui/ui.ui.runtime.tsx[14-16]
scopes/ui-foundation/ui/ui/client-context.tsx[3-6]
scopes/preview/preview/rspack/rspack.config.ts[170-210]
scopes/ui-foundation/ui/rspack/rspack.common.ts[88-95]
scopes/ui-foundation/ui/rspack/rspack.common.ts[165-182]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Rspack v2 resolves absolute CSS `url()` values in the component-preview bundler and fails on the design-system font packages' CDN URLs. The vendor-only URL exemption currently protects UI bundles but is absent from the separate preview configuration.

## Issue Context
Preview pre-bundling generates an entry from resolved aspects, which can reach `ClientContext` and its icon and Roboto font imports. Apply equivalent vendor-versus-first-party URL handling to preview styles while preserving relative URL asset resolution for first-party stylesheets.

## Fix Focus Areas
- scopes/preview/preview/rspack/rspack.config.ts[113-210]
- scopes/ui-foundation/ui/rspack/rspack.common.ts[88-95]
- scopes/ui-foundation/ui/rspack/rspack.common.ts[153-182]
- scopes/preview/preview/pre-bundle.ts[80-114]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


3. Local stylesheet assets fail to load ✓ Resolved 🐞 Bug ≡ Correctness
Description
cssParser disables URL dependency parsing for every regular and module CSS/SCSS rule, leaving
relative references unchanged and bypassing the configured asset pipeline. When a UI stylesheet uses
a relative font or image URL, the production bundle resolves it from the generated static/css
location without emitting the referenced asset at that path.
Code

scopes/ui-foundation/ui/rspack/rspack.common.ts[R88-90]

+  css: { namedExports: false, url: false },
+  'css/auto': { namedExports: false, url: false },
+  'css/module': { namedExports: false, url: false },
Evidence
The new comment states that disabling URL parsing leaves URLs as literal emitted CSS text, while the
same parser is applied to every CSS and SCSS rule. Browser output places generated styles under
static/css, and the configuration has explicit image and font asset rules that relative stylesheet
references can no longer reach.

scopes/ui-foundation/ui/rspack/rspack.common.ts[81-90]
scopes/ui-foundation/ui/rspack/rspack.common.ts[127-132]
scopes/ui-foundation/ui/rspack/rspack.common.ts[170-196]
scopes/ui-foundation/ui/rspack/rspack.browser.config.ts[64-70]
scopes/ui-foundation/ui/rspack/rspack.browser.config.ts[95-112]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The shared CSS parser disables all `url()` dependency processing, so relative stylesheet assets remain literal and are not emitted through Rspack's asset pipeline.
## Issue Context
Remote HTTP(S) and data URLs must remain untouched, but local relative URLs still need normal dependency resolution. Apply a selective workaround for unsupported remote schemes rather than globally setting `url: false`, and add regression coverage for a relative image or font referenced from CSS/SCSS.
## Fix Focus Areas
- scopes/ui-foundation/ui/rspack/rspack.common.ts[82-90]
- scopes/ui-foundation/ui/rspack/rspack.common.ts[127-132]
- scopes/ui-foundation/ui/rspack/rspack.common.ts[170-196]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Context sources
Review mode: ⚖️ Balanced: This upgrade changes the bundler, dev server, React refresh integration, and CSS asset-resolution behavior across multiple configs, creating meaningful build and runtime compatibility risk despite the included tests.

Grey Divider

Tip of the day
💡 Did you know, you can copy the agent prompt from any finding and feed it to your IDE agent

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Previous reviews

Review updated until commit a3cc141 ⚖️ Balanced

Results up to commit 5518a8f


🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (0)


Action required
1. Local stylesheet assets fail to load 🐞 Bug ≡ Correctness
Description
cssParser disables URL dependency parsing for every regular and module CSS/SCSS rule, leaving
relative references unchanged and bypassing the configured asset pipeline. When a UI stylesheet uses
a relative font or image URL, the production bundle resolves it from the generated static/css
location without emitting the referenced asset at that path.
Code

scopes/ui-foundation/ui/rspack/rspack.common.ts[R88-90]

+  css: { namedExports: false, url: false },
+  'css/auto': { namedExports: false, url: false },
+  'css/module': { namedExports: false, url: false },
Evidence
The new comment states that disabling URL parsing leaves URLs as literal emitted CSS text, while the
same parser is applied to every CSS and SCSS rule. Browser output places generated styles under
static/css, and the configuration has explicit image and font asset rules that relative stylesheet
references can no longer reach.

scopes/ui-foundation/ui/rspack/rspack.common.ts[81-90]
scopes/ui-foundation/ui/rspack/rspack.common.ts[127-132]
scopes/ui-foundation/ui/rspack/rspack.common.ts[170-196]
scopes/ui-foundation/ui/rspack/rspack.browser.config.ts[64-70]
scopes/ui-foundation/ui/rspack/rspack.browser.config.ts[95-112]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The shared CSS parser disables all `url()` dependency processing, so relative stylesheet assets remain literal and are not emitted through Rspack's asset pipeline.

## Issue Context
Remote HTTP(S) and data URLs must remain untouched, but local relative URLs still need normal dependency resolution. Apply a selective workaround for unsupported remote schemes rather than globally setting `url: false`, and add regression coverage for a relative image or font referenced from CSS/SCSS.

## Fix Focus Areas
- scopes/ui-foundation/ui/rspack/rspack.common.ts[82-90]
- scopes/ui-foundation/ui/rspack/rspack.common.ts[127-132]
- scopes/ui-foundation/ui/rspack/rspack.common.ts[170-196]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Context sources
Review mode: ⚖️ Balanced: This is a dependency-major-version upgrade affecting multiple build configurations, dev-server behavior, CSS asset resolution, and React refresh integration, so it carries meaningful cross-cutting compatibility risk despite the focused scope.

Grey Divider

Qodo Logo

Comment thread scopes/ui-foundation/ui/rspack/rspack.common.ts Outdated
Disabling rspack's CSS `url()` resolution globally (to work around v2
throwing on the design system's absolute CDN font urls) would have silently
broken any future first-party stylesheet using a local relative url(), since
it'd never reach the asset pipeline. Split each style rule into a
node_modules-scoped variant (url() disabled) and a first-party variant
(default asset-pipeline resolution), so local relative urls keep resolving
normally and only vendored CSS is exempted.

Adds a regression test building a real rspack bundle from fixture stylesheets
to prove both halves: a first-party relative url() gets emitted through the
asset pipeline, and a vendored absolute url() is left untouched.
Comment thread scopes/ui-foundation/ui/rspack/rspack.common.spec.ts
Comment thread workspace.jsonc
@qodo-free-for-open-source-projects

Copy link
Copy Markdown

Code review by qodo was updated up to the latest commit a3cc141

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant