feat(rsc): support browser mode build #801

hi-ogawa · 2025-08-30T04:03:57Z

Description

closes Support browser mode build #800

Summary

expose RscPluginManager as plugin api, which can be used to implement simplified version of build pipeline on user land.
fix hard coded "rsc" in vitePluginDefineEncryptionKey
updated examples/browser-mode

TODO

pkg-pr-new · 2025-08-30T06:50:49Z

npm i https://pkg.pr.new/@vitejs/plugin-react@801

npm i https://pkg.pr.new/@vitejs/plugin-react-oxc@801

npm i https://pkg.pr.new/@vitejs/plugin-rsc@801

npm i https://pkg.pr.new/@vitejs/plugin-react-swc@801

commit: 91c3bf7

…browser_mode' into 08-29-feat_rsc_support_build_on_browser_mode

kasperpeulen · 2025-09-01T10:10:37Z

packages/plugin-rsc/examples/browser-mode/vite.config.ts

+            ctx.server.environments.client.hot.send({
+              type: 'full-reload',
+              path: ctx.file,
+            })


Do you think it is technically possible to get HMR working for this kind of setup in vite?

I've never tried, but in principle, it's possible by

implement module runner hmr (the code is a bit stale but feat: implement fetch transport (POC) vite#18485 implemented transport for this)

apply react-refresh transform to react_client environment (which official plugin doesn't support currently, but probably do-able)

FYI, there's no HMR on Vitest, so I expect the lack of HMR would be a blocker for your use case. Do you any concern about this?

kasperpeulen · 2025-09-01T10:14:04Z

packages/plugin-rsc/examples/browser-mode/vite.config.ts

+              onwarn(warning, defaultHandler) {
+                if (
+                  warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+                  (warning.message.includes('use client') ||
+                    warning.message.includes('use server'))
+                ) {
+                  return
+                }
+                // https://github.com/vitejs/vite/issues/15012
+                if (
+                  warning.code === 'SOURCEMAP_ERROR' &&
+                  warning.message.includes('resolve original location') &&
+                  warning.pos === 0
+                ) {
+                  return
+                }
+                if (userConfig.build?.rollupOptions?.onwarn) {
+                  userConfig.build.rollupOptions.onwarn(warning, defaultHandler)
+                } else {
+                  defaultHandler(warning)
+                }
+              },


Wondering why this is needed

This is normally setup by @vitejs/plugin-react to automatically silence some build warning (technically a rollup or esbuild bug, so it's just a workaround to reduce noise).

vite-plugin-react/packages/common/warning.ts

Line 3 in 4e74e5c

export const silenceUseClientWarning = (

Otherwise you'll met with logs like this:

src/client.tsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. src/client.tsx (1:0): Module level directives cause errors when bundled, "use client" in "src/client.tsx" was ignored. ...

kasperpeulen

Thank a lot! This looks great, and seems to work!

kasperpeulen · 2025-09-01T10:34:39Z

playground/mdx/vite.config.ts

+    {
+      enforce: 'pre',
+      ...mdx({
+        format: 'mdx',
+      }),
+    },


If I revert this, then the mdx tests pass for me again.

Not sure why this got in 😅

hi-ogawa · 2025-09-02T00:29:31Z

packages/plugin-rsc/examples/browser-mode/vite.config.ts

+              onwarn(warning, defaultHandler) {
+                if (
+                  warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+                  (warning.message.includes('use client') ||
+                    warning.message.includes('use server'))
+                ) {
+                  return
+                }
+                // https://github.com/vitejs/vite/issues/15012
+                if (
+                  warning.code === 'SOURCEMAP_ERROR' &&
+                  warning.message.includes('resolve original location') &&
+                  warning.pos === 0
+                ) {
+                  return
+                }
+                if (userConfig.build?.rollupOptions?.onwarn) {
+                  userConfig.build.rollupOptions.onwarn(warning, defaultHandler)
+                } else {
+                  defaultHandler(warning)
+                }
+              },


This is normally setup by @vitejs/plugin-react to automatically silence some build warning (technically a rollup or esbuild bug, so it's just a workaround to reduce noise).

vite-plugin-react/packages/common/warning.ts

Line 3 in 4e74e5c

export const silenceUseClientWarning = (

Otherwise you'll met with logs like this:

src/client.tsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error. src/client.tsx (1:0): Module level directives cause errors when bundled, "use client" in "src/client.tsx" was ignored. ...

hi-ogawa · 2025-09-02T00:42:11Z

packages/plugin-rsc/examples/browser-mode/vite.config.ts

+            ctx.server.environments.client.hot.send({
+              type: 'full-reload',
+              path: ctx.file,
+            })


I've never tried, but in principle, it's possible by

implement module runner hmr (the code is a bit stale but feat: implement fetch transport (POC) vite#18485 implemented transport for this)

apply react-refresh transform to react_client environment (which official plugin doesn't support currently, but probably do-able)

FYI, there's no HMR on Vitest, so I expect the lack of HMR would be a blocker for your use case. Do you any concern about this?

hi-ogawa · 2025-09-02T00:45:16Z

packages/plugin-rsc/e2e/browser-mode.test.ts

+// Webkit fails by
+// > TypeError: ReadableByteStreamController is not implemented
+test.skip(({ browserName }) => browserName === 'webkit')


@kasperpeulen FYI, I'm not sure what to do about this, but probably this means this setup would be broken on all Safari. I tried web-streams-polyfill but it probably broke other things #807.

hi-ogawa added 14 commits August 29, 2025 18:46

feat(rsc): support browser mode build

dace30b

wip

a0a3c6d

wip

dfec6da

wip: build

b761ef4

comment

50919e0

fix: build client reference

2c0c4a4

fix: fix hard-coded "rsc" environment

67db530

refactor: cleanup

195b006

chore: silenct build directive warning

956e27a

Merge branch 'main' into 08-29-feat_rsc_support_build_on_browser_mode

489249b

chore: empty build virtual during dev

d7f1656

refactor: simplify load client virtual

ceeb117

chore: rename

384055c

test: test build

3dcc0ae

hi-ogawa marked this pull request as ready for review August 30, 2025 06:35

chore: lint

f1f955e

hi-ogawa added the trigger: preview Trigger pkg.pr.new label Aug 30, 2025

hi-ogawa added 4 commits September 1, 2025 08:52

Merge branch 'main' into 08-29-feat_rsc_support_build_on_browser_mode

41a43ec

chore: comment

49647e1

Merge remote-tracking branch 'origin/08-29-feat_rsc_support_build_on_…

57d0adf

…browser_mode' into 08-29-feat_rsc_support_build_on_browser_mode

Merge branch 'main' into 08-29-feat_rsc_support_build_on_browser_mode

1546f78

kasperpeulen reviewed Sep 1, 2025

View reviewed changes

kasperpeulen approved these changes Sep 1, 2025

View reviewed changes

kasperpeulen reviewed Sep 1, 2025

View reviewed changes

kasperpeulen mentioned this pull request Sep 1, 2025

[Tracking]: Experimental RSC for Storybook and Vitest storybookjs/storybook#32363

Open

9 tasks

chore: revert playground/mdx/vite.config.ts

4e74e5c

hi-ogawa commented Sep 2, 2025

View reviewed changes

Merge branch 'main' into 08-29-feat_rsc_support_build_on_browser_mode

91c3bf7

hi-ogawa merged commit b81bf6a into main Sep 2, 2025
20 of 21 checks passed

hi-ogawa deleted the 08-29-feat_rsc_support_build_on_browser_mode branch September 2, 2025 00:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(rsc): support browser mode build #801

feat(rsc): support browser mode build #801

hi-ogawa commented Aug 30, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Aug 30, 2025 •

edited

Loading

Uh oh!

kasperpeulen Sep 1, 2025

Uh oh!

hi-ogawa Sep 2, 2025

Uh oh!

kasperpeulen Sep 1, 2025

Uh oh!

hi-ogawa Sep 2, 2025

Uh oh!

kasperpeulen left a comment

Uh oh!

kasperpeulen Sep 1, 2025

Uh oh!

hi-ogawa Sep 2, 2025

Uh oh!

hi-ogawa Sep 2, 2025

Uh oh!

hi-ogawa Sep 2, 2025

Uh oh!

hi-ogawa Sep 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(rsc): support browser mode build #801

feat(rsc): support browser mode build #801

Conversation

hi-ogawa commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

pkg-pr-new bot commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kasperpeulen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

hi-ogawa commented Aug 30, 2025 •

edited

Loading

pkg-pr-new bot commented Aug 30, 2025 •

edited

Loading