@cedarjs/vite 4.0.0-rc.129 → 5.0.0-canary.0

package/dist/cjs/runFeServer.js

@@ -37,13 +37,13 @@ var import_server = require("@whatwg-node/server");
 var import_dotenv_defaults = require("dotenv-defaults");
 var import_express = __toESM(require("express"), 1);
 var import_http_proxy_middleware = require("http-proxy-middleware");
-var import_ws = __toESM(require("ws"), 1);
 var import_project_config = require("@cedarjs/project-config");
 var import_rscCss = require("@cedarjs/router/rscCss");
 var import_server_store = require("@cedarjs/server-store");
 var import_registerFwGlobalsAndShims = require("./lib/registerFwGlobalsAndShims.js");
 var import_invokeMiddleware = require("./middleware/invokeMiddleware.js");
 var import_register = require("./middleware/register.js");
+var import_rscWebSocketServer = require("./rsc/rscWebSocketServer.js");
 var import_createReactStreamingHandler = require("./streaming/createReactStreamingHandler.js");
 var import_utils = require("./utils.js");
 (0, import_dotenv_defaults.config)({
@@ -59,7 +59,7 @@ async function runFeServer() {
   (0, import_registerFwGlobalsAndShims.registerFwGlobalsAndShims)();
   if (rscEnabled) {
     const { setClientEntries } = await import("./rsc/rscRenderer.js");
-    createWebSocketServer();
+    (0, import_rscWebSocketServer.createWebSocketServer)();
     try {
       await setClientEntries();
     } catch (e) {
@@ -118,7 +118,7 @@ async function runFeServer() {
     const { createRscRequestHandler } = await import("./rsc/rscRequestHandler.js");
     app.use(
       "/rw-rsc",
-      createRscRequestHandler({
+      await createRscRequestHandler({
         getMiddlewareRouter: async () => middlewareRouter
       })
     );
@@ -138,25 +138,6 @@ async function runFeServer() {
     `Started production FE server on http://localhost:${rwConfig.web.port}`
   );
 }
-function createWebSocketServer() {
-  const wsServer = new import_ws.WebSocketServer({ port: 18998 });
-  wsServer.on("connection", (ws) => {
-    console.log("A new client connected.");
-    ws.on("message", (data) => {
-      const message = data.toString();
-      console.log("runFeServer.ts: Received message:");
-      console.log(message.slice(0, 120) + "...");
-      wsServer.clients.forEach((client) => {
-        if (client.readyState === import_ws.default.OPEN) {
-          client.send(message);
-        }
-      });
-    });
-    ws.on("close", () => {
-      console.log("A client disconnected.");
-    });
-  });
-}
 runFeServer();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/streaming/createReactStreamingHandler.js

@@ -50,10 +50,10 @@ const createReactStreamingHandler = async ({
   clientEntryPath,
   getStylesheetLinks,
   getMiddlewareRouter
-}, viteDevServer) => {
+}, viteSsrDevServer) => {
   const rwPaths = (0, import_project_config.getPaths)();
   const rwConfig = (0, import_project_config.getConfig)();
-  const isProd = !viteDevServer;
+  const isProd = !viteSsrDevServer;
   const middlewareRouter = await getMiddlewareRouter();
   let entryServerImport;
   let fallbackDocumentImport;
@@ -97,7 +97,7 @@ const createReactStreamingHandler = async ({
           route: currentRoute,
           cssPaths: cssLinks,
           params: matchedMw?.params,
-          viteDevServer
+          viteSsrDevServer
         }
       );
       if (mwResponse.isRedirect() || mwResponse.body) {
@@ -116,8 +116,8 @@ const createReactStreamingHandler = async ({
       });
     }
     if (!isProd) {
-      entryServerImport = await (0, import_utils.ssrLoadEntryServer)(viteDevServer);
-      fallbackDocumentImport = await viteDevServer.ssrLoadModule(
+      entryServerImport = await (0, import_utils.ssrLoadEntryServer)(viteSsrDevServer);
+      fallbackDocumentImport = await viteSsrDevServer.ssrLoadModule(
         rwPaths.web.document
       );
     }
@@ -134,10 +134,12 @@ const createReactStreamingHandler = async ({
         req,
         parsedParams
       },
-      viteDevServer
+      viteSsrDevServer
     });
     metaTags = routeHookOutput.meta;
-    const jsBundles = [viteDevServer ? clientEntryPath : "/" + clientEntryPath];
+    const jsBundles = [
+      viteSsrDevServer ? clientEntryPath : "/" + clientEntryPath
+    ];
     if (currentRoute.bundle) {
       jsBundles.push("/" + currentRoute.bundle);
     }
@@ -157,12 +159,13 @@ const createReactStreamingHandler = async ({
       {
         waitForAllReady: isSeoCrawler,
         onError: (err) => {
-          if (!isProd && viteDevServer) {
-            viteDevServer.ssrFixStacktrace(err);
+          if (!isProd && viteSsrDevServer) {
+            viteSsrDevServer.ssrFixStacktrace(err);
           }
           console.error(err);
         }
-      }
+      },
+      viteSsrDevServer
     );
     return reactResponse;
   };

package/dist/cjs/streaming/streamHelpers.js

@@ -28,7 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var streamHelpers_exports = {};
 __export(streamHelpers_exports, {
-  importModule: () => importModule,
   reactRenderToStreamResponse: () => reactRenderToStreamResponse
 });
 module.exports = __toCommonJS(streamHelpers_exports);
@@ -62,7 +61,7 @@ globalThis.__webpack_require__ ||= (id) => {
   return globalThis.__rw_module_cache__.get(id)
 };
 `;
-async function reactRenderToStreamResponse(mwRes, renderOptions, streamOptions) {
+async function reactRenderToStreamResponse(mwRes, renderOptions, streamOptions, viteDevServer) {
   const { waitForAllReady = false } = streamOptions;
   const {
     ServerEntry,
@@ -84,13 +83,13 @@ async function reactRenderToStreamResponse(mwRes, renderOptions, streamOptions)
     meta: metaTags
   });
   const rscEnabled = (0, import_project_config.getConfig)().experimental?.rsc?.enabled;
-  const { createElement } = rscEnabled ? await importModule("__cedarjs__react") : await import("react");
+  const { createElement } = rscEnabled ? await importModule("__cedarjs__react", !!viteDevServer) : await import("react");
   const {
     createInjector,
     ServerHtmlProvider,
     ServerInjectedHtml
-  } = rscEnabled ? await importModule("__cedarjs__server_inject") : await import("@cedarjs/web/serverInject");
-  const { renderToString } = rscEnabled ? await importModule("rd-server") : await import("react-dom/server");
+  } = rscEnabled ? await importModule("__cedarjs__server_inject", !!viteDevServer) : await import("@cedarjs/web/serverInject");
+  const { renderToString } = rscEnabled ? await importModule("rd-server", !!viteDevServer) : await import("react-dom/server");
   const { injectionState, injectToPage } = createInjector();
   const bufferTransform = (0, import_bufferedTransform.createBufferedTransformStream)();
   const serverInjectionTransform = (0, import_serverInjectionTransform.createServerInjectionTransform)({
@@ -105,8 +104,8 @@ async function reactRenderToStreamResponse(mwRes, renderOptions, streamOptions)
     controller.abort();
   }, 1e4);
   const timeoutTransform = (0, import_cancelTimeoutTransform.createTimeoutTransform)(timeoutHandle);
-  const { ServerAuthProvider } = rscEnabled ? await importModule("__cedarjs__server_auth_provider") : await import("@cedarjs/auth/dist/AuthProvider/ServerAuthProvider.js");
-  const { LocationProvider } = rscEnabled ? await importModule("__cedarjs__location") : await import("@cedarjs/router/location");
+  const { ServerAuthProvider } = rscEnabled ? await importModule("__cedarjs__server_auth_provider", !!viteDevServer) : await import("@cedarjs/auth/dist/AuthProvider/ServerAuthProvider.js");
+  const { LocationProvider } = rscEnabled ? await importModule("__cedarjs__location", !!viteDevServer) : await import("@cedarjs/router/location");
   const renderRoot = (url) => {
     return createElement(
       ServerAuthProvider,
@@ -138,7 +137,7 @@ async function reactRenderToStreamResponse(mwRes, renderOptions, streamOptions)
     ),
     bootstrapModules: jsBundles
   };
-  const { renderToReadableStream } = rscEnabled ? await importModule("rd-server") : await import("react-dom/server.edge");
+  const { renderToReadableStream } = rscEnabled ? await importModule("rd-server", !!viteDevServer) : await import("react-dom/server.edge");
   try {
     let didErrorOutsideShell = false;
     const renderToStreamOptions = {
@@ -197,34 +196,52 @@ function applyStreamTransforms(reactStream, transformsToApply) {
   }
   return outputStream;
 }
-async function importModule(mod) {
-  const distSsr = (0, import_project_config.getPaths)().web.distSsr;
-  const rdServerPath = (0, import_utils.makeFilePath)(import_node_path.default.join(distSsr, "rd-server.mjs"));
-  const reactPath = (0, import_utils.makeFilePath)(import_node_path.default.join(distSsr, "__cedarjs__react.mjs"));
-  const locationPath = (0, import_utils.makeFilePath)(
-    import_node_path.default.join(distSsr, "__cedarjs__location.mjs")
-  );
-  const ServerAuthProviderPath = (0, import_utils.makeFilePath)(
-    import_node_path.default.join(distSsr, "__cedarjs__server_auth_provider.mjs")
-  );
-  const ServerInjectPath = (0, import_utils.makeFilePath)(
-    import_node_path.default.join(distSsr, "__cedarjs__server_inject.mjs")
-  );
-  if (mod === "rd-server") {
-    return (await import(rdServerPath)).default;
-  } else if (mod === "__cedarjs__react") {
-    return (await import(reactPath)).default;
-  } else if (mod === "__cedarjs__location") {
-    return await import(locationPath);
-  } else if (mod === "__cedarjs__server_auth_provider") {
-    return await import(ServerAuthProviderPath);
-  } else if (mod === "__cedarjs__server_inject") {
-    return await import(ServerInjectPath);
+async function importModule(mod, isDev) {
+  if (isDev) {
+    if (mod === "rd-server") {
+      const loadedMod = await import("react-dom/server.edge");
+      return loadedMod.default;
+    } else if (mod === "__cedarjs__react") {
+      const loadedMod = await import("react");
+      return loadedMod.default;
+    } else if (mod === "__cedarjs__location") {
+      const loadedMod = await import("@cedarjs/router/location");
+      return loadedMod;
+    } else if (mod === "__cedarjs__server_auth_provider") {
+      const loadedMod = await import("@cedarjs/auth/dist/AuthProvider/ServerAuthProvider.js");
+      return loadedMod;
+    } else if (mod === "__cedarjs__server_inject") {
+      const loadedMod = await import("@cedarjs/web/serverInject");
+      return loadedMod;
+    }
+  } else {
+    const distSsr = (0, import_project_config.getPaths)().web.distSsr;
+    const rdServerPath = (0, import_utils.makeFilePath)(import_node_path.default.join(distSsr, "rd-server.mjs"));
+    const reactPath = (0, import_utils.makeFilePath)(import_node_path.default.join(distSsr, "__cedarjs__react.mjs"));
+    const locationPath = (0, import_utils.makeFilePath)(
+      import_node_path.default.join(distSsr, "__cedarjs__location.mjs")
+    );
+    const serverAuthProviderPath = (0, import_utils.makeFilePath)(
+      import_node_path.default.join(distSsr, "__cedarjs__server_auth_provider.mjs")
+    );
+    const serverInjectPath = (0, import_utils.makeFilePath)(
+      import_node_path.default.join(distSsr, "__cedarjs__server_inject.mjs")
+    );
+    if (mod === "rd-server") {
+      return (await import(rdServerPath)).default;
+    } else if (mod === "__cedarjs__react") {
+      return (await import(reactPath)).default;
+    } else if (mod === "__cedarjs__location") {
+      return await import(locationPath);
+    } else if (mod === "__cedarjs__server_auth_provider") {
+      return await import(serverAuthProviderPath);
+    } else if (mod === "__cedarjs__server_inject") {
+      return await import(serverInjectPath);
+    }
   }
   throw new Error("Unknown module " + mod);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  importModule,
   reactRenderToStreamResponse
 });

package/dist/cjs/streaming/triggerRouteHooks.js

@@ -55,11 +55,11 @@ const defaultRouteHookOutput = {
 const loadAndRunRouteHooks = async ({
   paths = [],
   reqMeta,
-  viteDevServer,
+  viteSsrDevServer,
   previousOutput = defaultRouteHookOutput
 }) => {
   const loadModule = async (path) => {
-    return viteDevServer ? viteDevServer.ssrLoadModule(path) : import(path);
+    return viteSsrDevServer ? viteSsrDevServer.ssrLoadModule(path) : import(path);
   };
   let currentRouteHooks;
   let rhOutput = defaultRouteHookOutput;
@@ -79,7 +79,7 @@ const loadAndRunRouteHooks = async ({
         paths,
         reqMeta,
         previousOutput: rhOutput,
-        viteDevServer
+        viteSsrDevServer
       });
     } else {
       return rhOutput;

package/dist/devFeServer.js

@@ -1,6 +1,11 @@
+import http from "node:http";
 import { createServerAdapter } from "@whatwg-node/server";
 import express from "express";
-import { createServer as createViteServer } from "vite";
+import {
+  createServer as createViteServer,
+  createServerModuleRunner,
+  defaultServerConditions
+} from "vite";
 import { cjsInterop } from "vite-plugin-cjs-interop";
 import { getProjectRoutes } from "@cedarjs/internal/dist/routes.js";
 import { getConfig, getPaths } from "@cedarjs/project-config";
@@ -9,6 +14,10 @@ import { registerFwGlobalsAndShims } from "./lib/registerFwGlobalsAndShims.js";
 import { invoke } from "./middleware/invokeMiddleware.js";
 import { createMiddlewareRouter } from "./middleware/register.js";
 import { rscRoutesAutoLoader } from "./plugins/vite-plugin-rsc-routes-auto-loader.js";
+import { rscRoutesImports } from "./plugins/vite-plugin-rsc-routes-imports.js";
+import { rscSsrRouterImport } from "./plugins/vite-plugin-rsc-ssr-router-import.js";
+import { rscTransformUseServerPlugin } from "./plugins/vite-plugin-rsc-transform-server.js";
+import { createWebSocketServer } from "./rsc/rscWebSocketServer.js";
 import { collectCssPaths, componentsModules } from "./streaming/collectCss.js";
 import { createReactStreamingHandler } from "./streaming/createReactStreamingHandler.js";
 import {
@@ -17,10 +26,13 @@ import {
   getFullUrl
 } from "./utils.js";
 globalThis.__REDWOOD__PRERENDER_PAGES = {};
+globalThis.__cedarjs__vite_ssr_runtime = void 0;
+globalThis.__cedarjs__vite_rsc_runtime = void 0;
 async function createServer() {
   ensureProcessDirWeb();
   registerFwGlobalsAndShims();
   const app = express();
+  const server = http.createServer(app);
   const rwPaths = getPaths();
   const rscEnabled = getConfig().experimental.rsc?.enabled ?? false;
   const serverStorage = createServerStorage();
@@ -43,8 +55,78 @@ async function createServer() {
       "Vite config not found. You need to setup your project with Vite using `yarn cedar setup vite`"
     );
   }
-  const vite = await createViteServer({
+  const viteSsrDevServer = await createViteServer({
     configFile: rwPaths.web.viteConfig,
+    envFile: false,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
+    },
+    ssr: {
+      // Inline every file apart from node built-ins. We want vite/rollup to
+      // inline dependencies in the server build. This gets round runtime
+      // importing of "server-only" and other packages with poisoned imports.
+      //
+      // Files included in `noExternal` are files we want Vite to analyze
+      // As of vite 5.2 `true` here means "all except node built-ins"
+      // noExternal: true,
+      // TODO (RSC): Other frameworks build for RSC without `noExternal: true`.
+      // What are we missing here? When/why is that a better choice? I know
+      // we would have to explicitly add a bunch of packages to noExternal, if
+      // we wanted to go that route.
+      // noExternal: ['@tobbe.dev/rsc-test'],
+      // Can't inline prisma client (db calls fail at runtime) or react-dom
+      // (css pre-init failure)
+      // Server store has to be externalized, because it's a singleton (shared between FW and App)
+      external: [
+        "@prisma/client",
+        "@prisma/adapter-better-sqlite3",
+        "@prisma/fetch-engine",
+        "@prisma/internals",
+        "better-sqlite3",
+        "@cedarjs/auth-dbauth-api",
+        "@cedarjs/cookie-jar",
+        "@cedarjs/server-store",
+        "@simplewebauthn/server",
+        "graphql-scalars",
+        "minimatch",
+        "playwright",
+        "react-dom"
+      ],
+      resolve: {
+        // These conditions are used in the plugin pipeline, and only affect non-externalized
+        // dependencies during the SSR build. Which because of `noExternal: true` means all
+        // dependencies apart from node built-ins.
+        // TODO (RSC): What's the difference between `conditions` and
+        // `externalConditions`? When is one used over the other?
+        // conditions: ['react-server'],
+        // externalConditions: ['react-server'],
+      },
+      optimizeDeps: {
+        // We need Vite to optimize these dependencies so that they are resolved
+        // with the correct conditions. And so that CJS modules work correctly.
+        // include: [
+        //   'react/**/*',
+        //   'react-dom/server',
+        //   'react-dom/server.edge',
+        //   'rehackt',
+        //   'react-server-dom-webpack/server',
+        //   'react-server-dom-webpack/client',
+        //   '@apollo/client/cache/*',
+        //   '@apollo/client/utilities/*',
+        //   '@apollo/client/react/hooks/*',
+        //   'react-fast-compare',
+        //   'invariant',
+        //   'shallowequal',
+        //   'graphql/language/*',
+        //   'stacktracey',
+        //   'deepmerge',
+        //   'fast-glob',
+        // ],
+      }
+    },
+    resolve: {
+      // conditions: ['react-server'],
+    },
     plugins: [
       cjsInterop({
         dependencies: [
@@ -58,16 +140,195 @@ async function createServer() {
           "@cedarjs/auth-!(dbauth)-web"
         ]
       }),
-      rscEnabled && rscRoutesAutoLoader()
+      rscEnabled && rscRoutesAutoLoader(),
+      rscEnabled && rscSsrRouterImport()
     ],
     server: { middlewareMode: true },
     logLevel: "info",
     clearScreen: false,
     appType: "custom"
   });
+  globalThis.__cedarjs__vite_ssr_runtime = createServerModuleRunner(
+    viteSsrDevServer.environments.ssr
+  );
+  globalThis.__cedarjs__client_references = /* @__PURE__ */ new Set();
+  globalThis.__cedarjs__server_references = /* @__PURE__ */ new Set();
+  const viteRscServer = await createViteServer({
+    envFile: false,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
+    },
+    ssr: {
+      // Inline every file apart from node built-ins. We want vite/rollup to
+      // inline dependencies in the server build. This gets round runtime
+      // importing of "server-only" and other packages with poisoned imports.
+      //
+      // Files included in `noExternal` are files we want Vite to analyze
+      // As of vite 5.2 `true` here means "all except node built-ins"
+      noExternal: true,
+      // TODO (RSC): Other frameworks build for RSC without `noExternal: true`.
+      // What are we missing here? When/why is that a better choice? I know
+      // we would have to explicitly add a bunch of packages to noExternal, if
+      // we wanted to go that route.
+      // noExternal: ['@tobbe.dev/rsc-test'],
+      // Can't inline prisma client (db calls fail at runtime) or react-dom
+      // (css pre-init failure)
+      // Server store has to be externalized, because it's a singleton (shared between FW and App)
+      external: [
+        "@prisma/client",
+        "@prisma/adapter-better-sqlite3",
+        "@prisma/fetch-engine",
+        "@prisma/internals",
+        "better-sqlite3",
+        "@cedarjs/auth-dbauth-api",
+        "@cedarjs/cookie-jar",
+        "@cedarjs/server-store",
+        "@cedarjs/structure",
+        "@simplewebauthn/server",
+        "graphql-scalars",
+        "minimatch",
+        "playwright",
+        "react-dom"
+      ],
+      resolve: {
+        // These conditions are used in the plugin pipeline, and only affect non-externalized
+        // dependencies during the SSR build. Which because of `noExternal: true` means all
+        // dependencies apart from node built-ins.
+        // TODO (RSC): What's the difference between `conditions` and
+        // `externalConditions`? When is one used over the other?
+        // In Vite 6, we must include `defaultServerConditions` alongside
+        // `react-server` so that nested condition maps (e.g. the `node`
+        // sub-condition inside `react-server-dom-webpack/server`'s exports)
+        // can still be resolved. Without `node` (or another environment
+        // condition), the resolver throws "No known conditions for
+        // './server' specifier in 'react-server-dom-webpack' package".
+        conditions: ["react-server", ...defaultServerConditions],
+        externalConditions: ["react-server", ...defaultServerConditions]
+      },
+      optimizeDeps: {
+        // We need Vite to optimize these dependencies so that they are resolved
+        // with the correct conditions. And so that CJS modules work correctly.
+        include: [
+          "react/**/*",
+          "react-dom/server",
+          "react-dom/server.edge",
+          "rehackt",
+          "react-server-dom-webpack/server",
+          "react-server-dom-webpack/server.edge",
+          "react-server-dom-webpack/client",
+          "react-server-dom-webpack/client.edge",
+          "@apollo/client/cache/*",
+          "@apollo/client/utilities/*",
+          "@apollo/client/react/hooks/*",
+          "react-fast-compare",
+          "invariant",
+          "shallowequal",
+          "graphql/language/*",
+          "stacktracey",
+          "deepmerge",
+          "fast-glob",
+          "@whatwg-node/fetch",
+          "busboy",
+          "cookie"
+        ],
+        // Without excluding `util` we get "TypeError: util.TextEncoder is not
+        // a constructor" in react-server-dom-webpack.server because it'll try
+        // to use Browserify's `util` instead of Node's. And Browserify's
+        // polyfill is missing TextEncoder+TextDecoder. The reason it's using
+        // the Browserify polyfill is because we have
+        // `vite-plugin-node-polyfills` as a dependency, and that'll add
+        // Browserify's `node-util` to `node_modules`, so when Vite goes to
+        // resolve `import { TextEncoder } from 'util` it'll find the one in
+        // `node_modules` instead of Node's internal version.
+        // We only see this in dev, and not in prod. I'm not entirely sure why
+        // but I have two guesses: 1. When RSC is enabled we don't actually use
+        // `vite-plugin-node-polyfill`, so some kind of tree shaking is
+        // happening, which prevents the issue from occurring. 2. In prod we
+        // only use Node's dependency resolution. Vite is not involved. And
+        // that difference in resolution is what prevents the issue from
+        // occurring.
+        exclude: ["util"]
+      }
+    },
+    resolve: {
+      // See comment above in ssr.resolve for why we include defaultServerConditions.
+      conditions: ["react-server", ...defaultServerConditions]
+    },
+    plugins: [
+      {
+        name: "rsc-record-and-tranform-use-client-plugin",
+        transform(code, id, _options) {
+          globalThis.__cedarjs__client_references?.delete(id);
+          if (!/^(["'])use client\1/.test(code)) {
+            return void 0;
+          }
+          console.log(
+            "rsc-record-and-transform-use-client-plugin: adding client reference",
+            id
+          );
+          globalThis.__cedarjs__client_references?.add(id);
+          const fns = code.matchAll(/export function (\w+)\(/g);
+          const consts = code.matchAll(/export const (\w+) = \(/g);
+          const names = [...fns, ...consts].map(([, name]) => name);
+          const result = [
+            `import { registerClientReference } from "react-server-dom-webpack/server.edge";`,
+            "",
+            ...names.map((name) => {
+              return name === "default" ? `export default registerClientReference({}, "${id}", "${name}");` : `export const ${name} = registerClientReference({}, "${id}", "${name}");`;
+            })
+          ].join("\n");
+          console.log("rsc-record-and-transform-use-client-plugin result");
+          console.log(
+            result.split("\n").map((line, i) => `  ${i + 1}: ${line}`).join("\n")
+          );
+          return { code: result, map: null };
+        }
+      },
+      rscTransformUseServerPlugin("", {}),
+      // The rscTransformUseClientPlugin maps paths like
+      // /Users/tobbe/.../rw-app/node_modules/@tobbe.dev/rsc-test/dist/rsc-test.es.js
+      // to
+      // /Users/tobbe/.../rw-app/web/dist/ssr/assets/rsc0.js
+      // That's why it needs the `clientEntryFiles` data
+      // (It does other things as well, but that's why it needs clientEntryFiles)
+      // rscTransformUseClientPlugin(clientEntryFiles),
+      // rscTransformUseServerPlugin(outDir, serverEntryFiles),
+      rscRoutesImports(),
+      {
+        name: "rsc-hot-update",
+        handleHotUpdate(ctx) {
+          console.log("rsc-hot-update ctx.modules", ctx.modules);
+          return [];
+        }
+      }
+    ],
+    build: {
+      ssr: true
+    },
+    server: {
+      // We never call `viteRscServer.listen()`, so we should run this in
+      // middleware mode
+      middlewareMode: true,
+      // The hmr/fast-refresh websocket in this server collides with the one in
+      // the other Vite server. So we can either disable it or run it on a
+      // different port.
+      // TODO (RSC): Figure out if we should disable or just pick a different
+      // port
+      ws: false
+      // hmr: {
+      //   port: 24679,
+      // },
+    },
+    appType: "custom",
+    // Using a unique cache dir here to not clash with our other vite server
+    cacheDir: "../node_modules/.vite-rsc"
+  });
+  globalThis.__cedarjs__vite_rsc_runtime = createServerModuleRunner(
+    viteRscServer.environments.ssr
+  );
   const handleWithMiddleware = (route) => {
     return createServerAdapter(async (req) => {
-      const middlewareRouter = await createMiddlewareRouter(vite);
+      const middlewareRouter = await createMiddlewareRouter(viteSsrDevServer);
       const middleware = middlewareRouter.find(
         req.method,
         req.url
@@ -77,19 +338,22 @@ async function createServer() {
       }
       const [mwRes] = await invoke(req, middleware, {
         route,
-        viteDevServer: vite
+        viteSsrDevServer
       });
       return mwRes.toResponse();
     });
   };
-  app.use(vite.middlewares);
+  app.use(viteSsrDevServer.middlewares);
   if (rscEnabled) {
-    const { createRscRequestHandler } = await import("./rsc/rscRequestHandler.js");
+    createWebSocketServer();
+    const { createRscRequestHandler } = await globalThis.__cedarjs__vite_rsc_runtime.import(
+      new URL("./rsc/rscRequestHandler.js", import.meta.url).pathname
+    );
     app.use(
       "/rw-rsc",
-      createRscRequestHandler({
-        getMiddlewareRouter: async () => createMiddlewareRouter(vite),
-        viteDevServer: vite
+      await createRscRequestHandler({
+        getMiddlewareRouter: async () => createMiddlewareRouter(viteSsrDevServer),
+        viteSsrDevServer
       })
     );
   }
@@ -99,18 +363,22 @@ async function createServer() {
       routes,
       clientEntryPath: rwPaths.web.entryClient,
       getStylesheetLinks: (route) => {
-        return getCssLinks({ rwPaths, route, vite });
+        return getCssLinks({
+          rwPaths,
+          route,
+          viteSsrDevServer
+        });
       },
       // Recreate middleware router on each request in dev
-      getMiddlewareRouter: async () => createMiddlewareRouter(vite)
+      getMiddlewareRouter: async () => createMiddlewareRouter(viteSsrDevServer)
     },
-    vite
+    viteSsrDevServer
   );
   app.get("*", createServerAdapter(routeHandler));
   app.post("*", handleWithMiddleware());
   const port = getConfig().web.port;
   console.log(`Started server on http://localhost:${port}`);
-  return app.listen(port);
+  return server.listen(port);
 }
 let devApp = createServer();
 process.stdin.on("data", async (data) => {
@@ -125,11 +393,11 @@ process.stdin.on("data", async (data) => {
 function getCssLinks({
   rwPaths,
   route,
-  vite
+  viteSsrDevServer
 }) {
   const appAndRouteModules = componentsModules(
     [rwPaths.web.app, route?.filePath].filter(Boolean),
-    vite
+    viteSsrDevServer
   );
   const collectedCss = collectCssPaths(appAndRouteModules);
   const cssLinks = Array.from(collectedCss);