Reproduction of loading commonjs modules from nextjs in the browser

packages/plugin-rsc/examples/browser-mode/package.json

@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "marked": "^1.2.9",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "next": "^15.5.4"
   },
   "devDependencies": {
+    "@types/marked": "^1.2.2",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "latest",

packages/plugin-rsc/examples/browser-mode/src/ContextProvider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { PathnameContext } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'
+import type { ReactNode } from 'react'
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
+import { publicAppRouterInstance } from 'next/dist/client/components/app-router-instance'
+
+export function ContextProvider({ children }: { children: ReactNode }) {
+  return (
+    <AppRouterContext.Provider value={publicAppRouterInstance}>
+      <PathnameContext.Provider value="/bla">
+        {children}
+      </PathnameContext.Provider>
+    </AppRouterContext.Provider>
+  )
+}

packages/plugin-rsc/examples/browser-mode/src/client.tsx

@@ -1,13 +1,19 @@
 'use client'
 
 import React from 'react'
+import marked from 'marked'
 
 export function ClientCounter() {
   const [count, setCount] = React.useState(0)
 
   return (
     <button onClick={() => setCount((count) => count + 1)}>
       Client Counter: {count}
+      <div
+        dangerouslySetInnerHTML={{
+          __html: marked.parse('## hello world'),
+        }}
+      />
     </button>
   )
 }

packages/plugin-rsc/examples/browser-mode/src/root.tsx

@@ -5,14 +5,20 @@ import reactLogo from './assets/react.svg'
 import { ClientCounter } from './client.tsx'
 import { TestUseActionState } from './action-from-client/client.tsx'
 import { TestActionBind } from './action-bind/server.tsx'
+import { ContextProvider } from './ContextProvider.tsx'
 
 export function Root() {
-  return <App />
+  return (
+    <ContextProvider>
+      <App />
+    </ContextProvider>
+  )
 }
 
 function App() {
   return (
     <div id="root">
+      {/*<SearchField />*/}
       <div>
         <a href="https://vite.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />

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

@@ -4,6 +4,7 @@ import {
   getPluginApi,
   type PluginApi,
 } from '@vitejs/plugin-rsc/plugin'
+import * as path from 'node:path'
 // import inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
@@ -39,6 +40,18 @@ function rscBrowserModePlugin(): Plugin[] {
               env.command === 'build',
             ),
           },
+          resolve: {
+            alias: {
+              '@vercel/turbopack-ecmascript-runtime/browser/dev/hmr-client/hmr-client.ts':
+                'next/dist/client/dev/noop-turbopack-hmr',
+              'react-server-dom-webpack/client': path.resolve(
+                '../../dist/vendor/react-server-dom/client.edge.js',
+              ),
+              'react-server-dom-webpack/client.edge': path.resolve(
+                '../../dist/vendor/react-server-dom/client.edge.js',
+              ),
+            },
+          },
           environments: {
             client: {
               keepProcessEnv: false,
@@ -75,6 +88,10 @@ function rscBrowserModePlugin(): Plugin[] {
                   'react/jsx-runtime',
                   'react/jsx-dev-runtime',
                   '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
+
+                  // those 2 optimize deps are needed even though the commonjs plugin is used
+                  // 'next/dist/shared/lib/app-router-context.shared-runtime',
+                  // 'next/dist/client/components/app-router-instance',
                 ],
                 exclude: ['@vitejs/plugin-rsc'],
                 esbuildOptions: {

packages/plugin-rsc/src/plugin.ts

@@ -267,6 +267,7 @@ export function vitePluginRscMinimal(
     ...vitePluginUseServer(rscPluginOptions, manager),
     ...vitePluginDefineEncryptionKey(rscPluginOptions),
     scanBuildStripPlugin({ manager }),
+    ...cjsModuleRunnerPlugin(),
   ]
 }