@ivogt/rsc-router 0.0.0-experimental.1 → 0.0.0-experimental.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ivogt/rsc-router",
-  "version": "0.0.0-experimental.1",
+  "version": "0.0.0-experimental.3",
   "type": "module",
   "description": "Type-safe RSC router with partial rendering support",
   "author": "Ivo Todorov",

package/src/server/root-layout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Outlet } from "rsc-router/client";
+import { Outlet } from "../client.js";
 
 const MapRootLayout = (
   <>

package/src/vite/index.ts

@@ -21,6 +21,64 @@ export { exposeLocationStateId } from "./expose-location-state-id.ts";
 
 // Virtual module type declarations in ./version.d.ts
 
+/**
+ * Modules that must be excluded from Vite's dependency optimization.
+ *
+ * When rsc-router is installed from npm, Vite's dep optimizer bundles these modules
+ * into separate chunks. However, @vitejs/plugin-rsc creates virtual proxy modules
+ * for client components that import from the original source paths.
+ *
+ * This creates two different module instances:
+ * 1. Bundled version in /node_modules/.vite/deps/
+ * 2. Original source via plugin-rsc proxy
+ *
+ * When both instances create React Contexts (e.g., OutletContext), React sees them
+ * as different contexts, causing useContext to return undefined even when a Provider
+ * exists in the tree.
+ *
+ * By excluding these modules, we ensure a single module instance is used everywhere.
+ */
+const RSC_ROUTER_EXCLUDE_DEPS = [
+  "@ivogt/rsc-router",
+  "@ivogt/rsc-router/browser",
+  "@ivogt/rsc-router/client",
+  "@ivogt/rsc-router/internal/deps/browser",
+  "@ivogt/rsc-router/internal/deps/html-stream-client",
+];
+
+/**
+ * Plugin to transform CJS react-server-dom vendor file to ESM.
+ * The @vitejs/plugin-rsc package ships client.browser.js as CommonJS
+ * which doesn't work in the browser. This transforms it to ESM re-exports.
+ */
+function createCjsToEsmPlugin(): Plugin {
+  return {
+    name: "rsc-router:cjs-to-esm",
+    enforce: "pre",
+    transform(code, id) {
+      // Transform the client.browser.js file from CJS to ESM
+      // Match any path containing vendor/react-server-dom/client.browser.js
+      if (
+        id.includes("vendor/react-server-dom/client.browser.js") ||
+        id.includes("vendor\\react-server-dom\\client.browser.js")
+      ) {
+        // The original file uses: module.exports = require('./cjs/...')
+        // Transform to ESM re-export from the development or production CJS file
+        const isProd = process.env.NODE_ENV === "production";
+        const cjsFile = isProd
+          ? "./cjs/react-server-dom-webpack-client.browser.production.js"
+          : "./cjs/react-server-dom-webpack-client.browser.development.js";
+
+        return {
+          code: `export * from "${cjsFile}";`,
+          map: null,
+        };
+      }
+      return null;
+    },
+  };
+}
+
 /**
  * RSC plugin entry points configuration.
  * All entries use virtual modules by default. Specify a path to use a custom entry file.
@@ -422,6 +480,32 @@ export async function rscRouter(
       config() {
         // Configure environments for cloudflare deployment
         return {
+          // Exclude rsc-router modules from optimization to prevent module duplication
+          // This ensures the same Context instance is used by both browser entry and RSC proxy modules
+          optimizeDeps: {
+            exclude: RSC_ROUTER_EXCLUDE_DEPS,
+          },
+          resolve: {
+            alias: {
+              // Map rsc-router/* to @ivogt/rsc-router/* for virtual entries
+              // This allows the package to work when published under a scoped name
+              "rsc-router/internal/deps/browser":
+                "@ivogt/rsc-router/internal/deps/browser",
+              "rsc-router/internal/deps/ssr":
+                "@ivogt/rsc-router/internal/deps/ssr",
+              "rsc-router/internal/deps/rsc":
+                "@ivogt/rsc-router/internal/deps/rsc",
+              "rsc-router/internal/deps/html-stream-client":
+                "@ivogt/rsc-router/internal/deps/html-stream-client",
+              "rsc-router/internal/deps/html-stream-server":
+                "@ivogt/rsc-router/internal/deps/html-stream-server",
+              "rsc-router/browser": "@ivogt/rsc-router/browser",
+              "rsc-router/client": "@ivogt/rsc-router/client",
+              "rsc-router/server": "@ivogt/rsc-router/server",
+              "rsc-router/rsc": "@ivogt/rsc-router/rsc",
+              "rsc-router/ssr": "@ivogt/rsc-router/ssr",
+            },
+          },
           environments: {
             client: {
               build: {
@@ -432,8 +516,10 @@ export async function rscRouter(
                 },
               },
               // Pre-bundle rsc-html-stream to prevent discovery during first request
+              // Exclude rsc-router modules to ensure same Context instance
               optimizeDeps: {
                 include: ["rsc-html-stream/client"],
+                exclude: RSC_ROUTER_EXCLUDE_DEPS,
               },
             },
             ssr: {
@@ -515,6 +601,32 @@ export async function rscRouter(
           const useVirtualRSC = finalEntries.rsc === VIRTUAL_IDS.rsc;
 
           return {
+            // Exclude rsc-router modules from optimization to prevent module duplication
+            // This ensures the same Context instance is used by both browser entry and RSC proxy modules
+            optimizeDeps: {
+              exclude: RSC_ROUTER_EXCLUDE_DEPS,
+            },
+            resolve: {
+              alias: {
+                // Map rsc-router/* to @ivogt/rsc-router/* for virtual entries
+                // This allows the package to work when published under a scoped name
+                "rsc-router/internal/deps/browser":
+                  "@ivogt/rsc-router/internal/deps/browser",
+                "rsc-router/internal/deps/ssr":
+                  "@ivogt/rsc-router/internal/deps/ssr",
+                "rsc-router/internal/deps/rsc":
+                  "@ivogt/rsc-router/internal/deps/rsc",
+                "rsc-router/internal/deps/html-stream-client":
+                  "@ivogt/rsc-router/internal/deps/html-stream-client",
+                "rsc-router/internal/deps/html-stream-server":
+                  "@ivogt/rsc-router/internal/deps/html-stream-server",
+                "rsc-router/browser": "@ivogt/rsc-router/browser",
+                "rsc-router/client": "@ivogt/rsc-router/client",
+                "rsc-router/server": "@ivogt/rsc-router/server",
+                "rsc-router/rsc": "@ivogt/rsc-router/rsc",
+                "rsc-router/ssr": "@ivogt/rsc-router/ssr",
+              },
+            },
             environments: {
               client: {
                 build: {
@@ -524,12 +636,14 @@ export async function rscRouter(
                     },
                   },
                 },
-                ...(useVirtualClient && {
-                  optimizeDeps: {
+                // Always exclude rsc-router modules, conditionally add virtual entry
+                optimizeDeps: {
+                  exclude: RSC_ROUTER_EXCLUDE_DEPS,
+                  ...(useVirtualClient && {
                     // Tell Vite to scan the virtual entry for dependencies
                     entries: [VIRTUAL_IDS.browser],
-                  },
-                }),
+                  }),
+                },
               },
               ...(useVirtualSSR && {
                 ssr: {
@@ -537,6 +651,7 @@ export async function rscRouter(
                     entries: [VIRTUAL_IDS.ssr],
                     // Pre-bundle React for SSR to ensure single instance
                     include: ["react", "react-dom/server.edge", "react/jsx-runtime"],
+                    exclude: RSC_ROUTER_EXCLUDE_DEPS,
                   },
                 },
               }),
@@ -603,6 +718,10 @@ export async function rscRouter(
     plugins.push(createVersionInjectorPlugin(rscEntryPath));
   }
 
+  // Add CJS-to-ESM transform for @vitejs/plugin-rsc vendor files
+  // This must be added to transform the CommonJS client.browser.js to ESM
+  plugins.push(createCjsToEsmPlugin());
+
   return plugins;
 }