Skip to content

fix(start-rsbuild): compile node_modules for RSC directives#7540

Merged
schiller-manuel merged 4 commits into
TanStack:mainfrom
SyMind:rsbuild-rsc-node-modules
Jun 4, 2026
Merged

fix(start-rsbuild): compile node_modules for RSC directives#7540
schiller-manuel merged 4 commits into
TanStack:mainfrom
SyMind:rsbuild-rsc-node-modules

Conversation

@SyMind
Copy link
Copy Markdown
Contributor

@SyMind SyMind commented Jun 4, 2026

Summary

  • Compile package code in node_modules during Rsbuild RSC builds so SWC can detect RSC directives such as "use client", while excluding core-js per Rsbuild guidance.
  • Add a dedicated React Start + Rsbuild RSC e2e fixture that imports a client component from a package under node_modules and verifies SSR, hydration, and client interaction.

Summary by CodeRabbit

  • New Features

    • Added an RSC demo with root and secondary pages, server-rendered component content, and an interactive client widget.
  • Tests

    • Added end-to-end Playwright tests and hydration helpers to validate page load, RSC hydration, and client interactions.
  • Chores

    • Added E2E project config, scripts, TypeScript settings, ignore rules, and adjusted build plugin to handle package compilation for RSC.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 4, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2abac646-e049-4a47-b7c4-ba18db534826

📥 Commits

Reviewing files that changed from the base of the PR and between b443e2e and ba7c6db.

📒 Files selected for processing (1)
  • .changeset/icy-donkeys-worry.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/icy-donkeys-worry.md

📝 Walkthrough

Walkthrough

This PR adds a complete end-to-end test suite for React Start with Rsbuild and React Server Components. It establishes a workspace under e2e/react-start/rsc-rsbuild with configuration, build infrastructure, routing, RSC utilities, and Playwright tests that validate server-component rendering and hydration. It also updates the Rsbuild plugin to compile node_modules when RSC is enabled.

Changes

React Start RSC E2E Test Suite

Layer / File(s) Summary
Package configuration and tooling setup
e2e/react-start/rsc-rsbuild/package.json, e2e/react-start/rsc-rsbuild/tsconfig.json, e2e/react-start/rsc-rsbuild/.gitignore, e2e/react-start/rsc-rsbuild/.prettierignore
Package metadata, TypeScript configuration with strict checking and ~/* path alias, and ignore rules for dependencies, caches, and build artifacts.
Build configuration and server entry
e2e/react-start/rsc-rsbuild/rsbuild.config.ts, e2e/react-start/rsc-rsbuild/server.js
Rsbuild config enables RSC and React plugin with split-chunks disabled; server.js resolves dist directory and spawns srvx --prod to start the production app with proper stdio and signal handling.
Test infrastructure and orchestration
e2e/react-start/rsc-rsbuild/playwright.config.ts
Playwright config computes test and external ports dynamically, configures global setup/teardown for dummy server lifecycle, and defines a single chromium project that starts the app under test.
Router setup and route tree
e2e/react-start/rsc-rsbuild/src/router.tsx, e2e/react-start/rsc-rsbuild/src/routeTree.gen.ts
Router factory getRouter() with scroll restoration and intent preload; auto-generated route tree defining / and /rsc-node-module-client routes with TanStack Router and Start type augmentations.
Root layout and application routes
e2e/react-start/rsc-rsbuild/src/routes/__root.tsx, e2e/react-start/rsc-rsbuild/src/routes/index.tsx, e2e/react-start/rsc-rsbuild/src/routes/rsc-node-module-client.tsx
Root route with head metadata and hydration-state tracking; home page with navigation link; RSC route with async loader that fetches server-rendered content and renders it in the page.
RSC server components and utilities
e2e/react-start/rsc-rsbuild/src/utils/RscClientPkgContent.tsx, e2e/react-start/rsc-rsbuild/src/utils/nodeModuleClientServerComponent.tsx
RscClientPkgContent renders a test section with NodeModuleClientWidget; getNodeModuleClientServerComponent() server function renders it and returns the serialized server component.
E2E tests and test lifecycle
e2e/react-start/rsc-rsbuild/tests/rsc-node-module-client.spec.ts, e2e/react-start/rsc-rsbuild/tests/hydration.ts, e2e/react-start/rsc-rsbuild/tests/setup/global.setup.ts, e2e/react-start/rsc-rsbuild/tests/setup/global.teardown.ts
Playwright spec navigates to RSC route, asserts HTTP 200 and expected UI, waits for hydration, clicks widget, and verifies state updates; setup/teardown start and stop dummy server.

Rsbuild Plugin RSC Enhancement

Layer / File(s) Summary
RSC node_modules compilation
packages/start-plugin-core/src/rsbuild/plugin.ts, .changeset/icy-donkeys-worry.md
When RSC is enabled, plugin adds source.include rule to compile node_modules code (excluding core-js) for SWC directive inspection ("use client", etc.), and a changeset entry records a patch bump.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • TanStack/router#7509: Updates related Rsbuild plugin RSC integration in packages/start-plugin-core/src/rsbuild/plugin.ts for RSC server functions and client entry handling.

Suggested labels

package: start-plugin-core, package: react-start-rsc

Suggested reviewers

  • beaussan
  • SeanCassiere

Poem

🐰 A fixture blooms in rsc-rsbuild land,
With routes and RSC, all carefully planned,
Server components dance, hydration runs true,
E2E tests confirm what our bundles should do,
TanStack's precision—here's what we grew! 🚀

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix(start-rsbuild): compile node_modules for RSC directives' directly describes the primary change: fixing Rsbuild's RSC builds to compile node_modules for proper RSC directive detection. It is concise, specific, and clearly conveys the main objective.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@SyMind SyMind marked this pull request as ready for review June 4, 2026 09:23
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

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 `@e2e/react-start/rsc-rsbuild/server.js`:
- Around line 23-24: The function that computes serverJsPath currently returns
serverJsPath even when no artifact exists, causing later failures; instead, in
the code that determines/returns serverJsPath (the variable named serverJsPath
and its containing function), check for existence of both candidate files
(dist/server/server.js and dist/server/index.js) and if neither exists throw an
explicit Error with a clear message like "Server build artifact not found:
expected dist/server/server.js or dist/server/index.js"; replace the plain
return of serverJsPath with this existence check and throw to fail fast.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 03e57728-1881-4f0c-a4c1-4318f6057c9d

📥 Commits

Reviewing files that changed from the base of the PR and between ccf87fb and b443e2e.

⛔ Files ignored due to path filters (4)
  • e2e/react-start/rsc-rsbuild/src/node_modules/rsc-client-pkg/index.d.ts is excluded by !**/node_modules/**
  • e2e/react-start/rsc-rsbuild/src/node_modules/rsc-client-pkg/index.js is excluded by !**/node_modules/**
  • e2e/react-start/rsc-rsbuild/src/node_modules/rsc-client-pkg/package.json is excluded by !**/node_modules/**
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (19)
  • e2e/react-start/rsc-rsbuild/.gitignore
  • e2e/react-start/rsc-rsbuild/.prettierignore
  • e2e/react-start/rsc-rsbuild/package.json
  • e2e/react-start/rsc-rsbuild/playwright.config.ts
  • e2e/react-start/rsc-rsbuild/rsbuild.config.ts
  • e2e/react-start/rsc-rsbuild/server.js
  • e2e/react-start/rsc-rsbuild/src/routeTree.gen.ts
  • e2e/react-start/rsc-rsbuild/src/router.tsx
  • e2e/react-start/rsc-rsbuild/src/routes/__root.tsx
  • e2e/react-start/rsc-rsbuild/src/routes/index.tsx
  • e2e/react-start/rsc-rsbuild/src/routes/rsc-node-module-client.tsx
  • e2e/react-start/rsc-rsbuild/src/utils/RscClientPkgContent.tsx
  • e2e/react-start/rsc-rsbuild/src/utils/nodeModuleClientServerComponent.tsx
  • e2e/react-start/rsc-rsbuild/tests/hydration.ts
  • e2e/react-start/rsc-rsbuild/tests/rsc-node-module-client.spec.ts
  • e2e/react-start/rsc-rsbuild/tests/setup/global.setup.ts
  • e2e/react-start/rsc-rsbuild/tests/setup/global.teardown.ts
  • e2e/react-start/rsc-rsbuild/tsconfig.json
  • packages/start-plugin-core/src/rsbuild/plugin.ts

Comment on lines +23 to +24
return serverJsPath
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fail fast when no server build artifact exists.

If neither dist/server/server.js nor dist/server/index.js exists, returning serverJsPath hides the root cause and fails later inside srvx. Throw an explicit error here.

Proposed fix
 function resolveDistServerEntryPath() {
   const serverJsPath = path.resolve(distDir, 'server', 'server.js')
   if (fs.existsSync(serverJsPath)) {
     return serverJsPath
   }

   const indexJsPath = path.resolve(distDir, 'server', 'index.js')
   if (fs.existsSync(indexJsPath)) {
     return indexJsPath
   }

-  return serverJsPath
+  throw new Error(
+    `Server entry not found. Looked for "${serverJsPath}" and "${indexJsPath}". Did you run the build first?`,
+  )
 }
🤖 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 `@e2e/react-start/rsc-rsbuild/server.js` around lines 23 - 24, The function
that computes serverJsPath currently returns serverJsPath even when no artifact
exists, causing later failures; instead, in the code that determines/returns
serverJsPath (the variable named serverJsPath and its containing function),
check for existence of both candidate files (dist/server/server.js and
dist/server/index.js) and if neither exists throw an explicit Error with a clear
message like "Server build artifact not found: expected dist/server/server.js or
dist/server/index.js"; replace the plain return of serverJsPath with this
existence check and throw to fail fast.

@nx-cloud
Copy link
Copy Markdown
Contributor

nx-cloud Bot commented Jun 4, 2026

View your CI Pipeline Execution ↗ for commit b443e2e

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 9m 12s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 2m 11s View ↗

☁️ Nx Cloud last updated this comment at 2026-06-04 09:57:47 UTC

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 4, 2026

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@7540

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@7540

@tanstack/eslint-plugin-start

npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@7540

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@7540

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@7540

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@7540

@tanstack/react-router-devtools

npm i https://pkg.pr.new/@tanstack/react-router-devtools@7540

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@7540

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@7540

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@7540

@tanstack/react-start-rsc

npm i https://pkg.pr.new/@tanstack/react-start-rsc@7540

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@7540

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@7540

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@7540

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@7540

@tanstack/router-devtools-core

npm i https://pkg.pr.new/@tanstack/router-devtools-core@7540

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@7540

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@7540

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@7540

@tanstack/router-utils

npm i https://pkg.pr.new/@tanstack/router-utils@7540

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@7540

@tanstack/solid-router

npm i https://pkg.pr.new/@tanstack/solid-router@7540

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/@tanstack/solid-router-devtools@7540

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@7540

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@7540

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@7540

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@7540

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@7540

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@7540

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@7540

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@7540

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/@tanstack/start-static-server-functions@7540

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@7540

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@7540

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@7540

@tanstack/vue-router

npm i https://pkg.pr.new/@tanstack/vue-router@7540

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/@tanstack/vue-router-devtools@7540

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@7540

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@7540

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@7540

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@7540

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@7540

commit: b443e2e

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented Jun 4, 2026

Merging this PR will not alter performance

✅ 4 untouched benchmarks
⏩ 2 skipped benchmarks1


Comparing SyMind:rsbuild-rsc-node-modules (b443e2e) with main (ccf87fb)

Open in CodSpeed

Footnotes

  1. 2 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@schiller-manuel schiller-manuel merged commit 8091918 into TanStack:main Jun 4, 2026
3 checks passed
@github-actions github-actions Bot mentioned this pull request Jun 4, 2026
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.

2 participants