feat(rsbuild): enable ESM for SSR examples (#339)

chenjiahan · web-flow · commit 3516e991c6a1 · 2025-08-26T06:24:45.000Z
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -14,5 +14,11 @@
     "**/.DS_Store": true
   },
   "editor.defaultFormatter": "biomejs.biome",
-  "mdx.validate.validateFileLinks": "ignore"
+  "mdx.validate.validateFileLinks": "ignore",
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rsbuild/ssr-express-with-manifest/package.json b/rsbuild/ssr-express-with-manifest/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "rsbuild build",
-    "dev": "node ./server.mjs",
+    "dev": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" node ./server.mjs",
     "preview": "node ./prod-server.mjs"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
     "@types/express": "^5.0.3",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
+    "cross-env": "^10.0.0",
     "express": "^5.1.0",
     "typescript": "^5.9.2"
   }
diff --git a/rsbuild/ssr-express-with-manifest/rsbuild.config.mjs b/rsbuild/ssr-express-with-manifest/rsbuild.config.mjs
@@ -1,37 +1,35 @@
-import { defineConfig } from "@rsbuild/core";
-import { pluginReact } from "@rsbuild/plugin-react";
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   plugins: [pluginReact()],
   environments: {
     web: {
-      output: {
-        target: "web",
-      },
       source: {
         entry: {
-          index: "./src/index",
+          index: './src/index',
         },
       },
       output: {
         manifest: true,
       },
     },
-    ssr: {
+    node: {
       output: {
-        target: "node",
+        module: true,
+        target: 'node',
         distPath: {
-          root: "dist/server",
+          root: 'dist/server',
         },
       },
       source: {
         entry: {
-          index: "./src/index.server",
+          index: './src/index.server',
         },
       },
     },
   },
   tools: {
-    htmlPlugin: false
-  }
+    htmlPlugin: false,
+  },
 });
diff --git a/rsbuild/ssr-express-with-manifest/server.mjs b/rsbuild/ssr-express-with-manifest/server.mjs
@@ -1,31 +1,29 @@
-import express from "express";
 import fs from 'node:fs';
-import { createRsbuild, loadConfig, logger } from "@rsbuild/core";
+import { createRsbuild, loadConfig, logger } from '@rsbuild/core';
+import express from 'express';
 
 const templateHtml = fs.readFileSync('./template.html', 'utf-8');
 
 let manifest;
 
 const serverRender = (serverAPI) => async (_req, res) => {
-  const indexModule = await serverAPI.environments.ssr.loadBundle("index");
+  const indexModule = await serverAPI.environments.node.loadBundle('index');
 
   const markup = indexModule.render();
 
   const { entries } = JSON.parse(manifest);
 
-  const { js = [], css = []} = entries['index'].initial;
+  const { js = [], css = [] } = entries['index'].initial;
 
-  const scriptTags = js
-    .map((url) => `<script src="${url}" defer></script>`)
-    .join('\n');
-  const styleTags = css
-    .map((file) => `<link rel="stylesheet" href="${file}">`)
-    .join('\n');
+  const scriptTags = js.map((url) => `<script src="${url}" defer></script>`).join('\n');
+  const styleTags = css.map((file) => `<link rel="stylesheet" href="${file}">`).join('\n');
 
-  const html = templateHtml.replace("<!--app-content-->", markup).replace('<!--app-head-->', `${scriptTags}\n${styleTags}`);
+  const html = templateHtml
+    .replace('<!--app-content-->', markup)
+    .replace('<!--app-head-->', `${scriptTags}\n${styleTags}`);
 
   res.writeHead(200, {
-    "Content-Type": "text/html",
+    'Content-Type': 'text/html',
   });
   res.end(html);
 };
@@ -41,7 +39,7 @@ export async function startDevServer() {
   rsbuild.onDevCompileDone(async () => {
     // update manifest info when rebuild
     manifest = await fs.promises.readFile('./dist/manifest.json', 'utf-8');
-  })
+  });
 
   const app = express();
 
@@ -50,11 +48,12 @@ export async function startDevServer() {
 
   const serverRenderMiddleware = serverRender(rsbuildServer);
 
-  app.get("/", async (req, res, next) => {
+  app.get('/', async (req, res, next) => {
     try {
       await serverRenderMiddleware(req, res, next);
     } catch (err) {
-      logger.error("SSR render error, downgrade to CSR...\n", err);
+      logger.error('SSR render error, downgrade to CSR...');
+      logger.error(err);
       next();
     }
   });
diff --git a/rsbuild/ssr-express/package.json b/rsbuild/ssr-express/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "rsbuild build",
-    "dev": "node ./server.mjs",
+    "dev": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" node ./server.mjs",
     "preview": "node ./prod-server.mjs"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
     "@types/express": "^5.0.3",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
+    "cross-env": "^10.0.0",
     "express": "^5.1.0",
     "typescript": "^5.9.2"
   }
diff --git a/rsbuild/ssr-express/rsbuild.config.mjs b/rsbuild/ssr-express/rsbuild.config.mjs
@@ -1,34 +1,32 @@
-import { defineConfig } from "@rsbuild/core";
-import { pluginReact } from "@rsbuild/plugin-react";
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   plugins: [pluginReact()],
   environments: {
     web: {
-      output: {
-        target: "web",
-      },
       source: {
         entry: {
-          index: "./src/index",
+          index: './src/index',
         },
       },
     },
-    ssr: {
+    node: {
       output: {
-        target: "node",
+        module: true,
+        target: 'node',
         distPath: {
-          root: "dist/server",
+          root: 'dist/server',
         },
       },
       source: {
         entry: {
-          index: "./src/index.server",
+          index: './src/index.server',
         },
       },
     },
   },
   html: {
-    template: "./template.html",
+    template: './template.html',
   },
 });
diff --git a/rsbuild/ssr-express/server.mjs b/rsbuild/ssr-express/server.mjs
@@ -1,17 +1,17 @@
-import express from "express";
-import { createRsbuild, loadConfig, logger } from "@rsbuild/core";
+import { createRsbuild, loadConfig, logger } from '@rsbuild/core';
+import express from 'express';
 
 const serverRender = (serverAPI) => async (_req, res) => {
-  const indexModule = await serverAPI.environments.ssr.loadBundle("index");
+  const indexModule = await serverAPI.environments.node.loadBundle('index');
 
   const markup = indexModule.render();
 
-  const template = await serverAPI.environments.web.getTransformedHtml("index");
+  const template = await serverAPI.environments.web.getTransformedHtml('index');
 
-  const html = template.replace("<!--app-content-->", markup);
+  const html = template.replace('<!--app-content-->', markup);
 
   res.writeHead(200, {
-    "Content-Type": "text/html",
+    'Content-Type': 'text/html',
   });
   res.end(html);
 };
@@ -31,11 +31,12 @@ export async function startDevServer() {
 
   const serverRenderMiddleware = serverRender(rsbuildServer);
 
-  app.get("/", async (req, res, next) => {
+  app.get('/', async (req, res, next) => {
     try {
       await serverRenderMiddleware(req, res, next);
     } catch (err) {
-      logger.error("SSR render error, downgrade to CSR...\n", err);
+      logger.error('SSR render error, downgrade to CSR...');
+      logger.error(err);
       next();
     }
   });
diff --git a/rsbuild/ssr/package.json b/rsbuild/ssr/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "rsbuild build",
-    "dev": "rsbuild dev --open",
+    "dev": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" rsbuild dev --open",
     "preview": "rsbuild preview"
   },
   "dependencies": {
@@ -16,6 +16,7 @@
     "@rsbuild/plugin-react": "1.3.5",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
+    "cross-env": "^10.0.0",
     "typescript": "^5.9.2"
   }
 }
diff --git a/rsbuild/ssr/rsbuild.config.ts b/rsbuild/ssr/rsbuild.config.ts
@@ -1,10 +1,15 @@
-import { type RequestHandler, type SetupMiddlewaresContext, defineConfig, logger } from '@rsbuild/core';
+import {
+  defineConfig,
+  logger,
+  type RequestHandler,
+  type SetupMiddlewaresContext,
+} from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 
 export const serverRender =
   (serverContext: SetupMiddlewaresContext): RequestHandler =>
   async (_req, res, _next) => {
-    const indexModule = await serverContext.environments.ssr.loadBundle<{
+    const indexModule = await serverContext.environments.node.loadBundle<{
       render: () => string;
     }>('index');
 
@@ -32,7 +37,8 @@ export default defineConfig({
             try {
               await serverRenderMiddleware(req, res, next);
             } catch (err) {
-              logger.error('SSR render error, downgrade to CSR...\n', err);
+              logger.error('SSR render error, downgrade to CSR...');
+              logger.error(err);
               next();
             }
           } else {
@@ -44,17 +50,15 @@ export default defineConfig({
   },
   environments: {
     web: {
-      output: {
-        target: 'web',
-      },
       source: {
         entry: {
           index: './src/index',
         },
       },
     },
-    ssr: {
+    node: {
       output: {
+        module: true,
         target: 'node',
         distPath: {
           root: 'dist/server',
