diff --git a/.vscode/settings.json b/.vscode/settings.json index 7a7bfef11..f5ca882b0 100644 --- 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 index 3f667e407..a8fb4849d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -639,6 +639,9 @@ importers: '@types/react-dom': specifier: ^19.1.7 version: 19.1.7(@types/react@19.1.11) + cross-env: + specifier: ^10.0.0 + version: 10.0.0 typescript: specifier: ^5.9.2 version: 5.9.2 @@ -667,6 +670,9 @@ importers: '@types/react-dom': specifier: ^19.1.7 version: 19.1.7(@types/react@19.1.11) + cross-env: + specifier: ^10.0.0 + version: 10.0.0 express: specifier: ^5.1.0 version: 5.1.0 @@ -698,6 +704,9 @@ importers: '@types/react-dom': specifier: ^19.1.7 version: 19.1.7(@types/react@19.1.11) + cross-env: + specifier: ^10.0.0 + version: 10.0.0 express: specifier: ^5.1.0 version: 5.1.0 diff --git a/rsbuild/ssr-express-with-manifest/package.json b/rsbuild/ssr-express-with-manifest/package.json index da7e12681..8198518ec 100644 --- 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 index 6f2eb084b..24f84bc8b 100644 --- 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 index 1c22777f5..c1ca3f10c 100644 --- 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) => ``) - .join('\n'); - const styleTags = css - .map((file) => ``) - .join('\n'); + const scriptTags = js.map((url) => ``).join('\n'); + const styleTags = css.map((file) => ``).join('\n'); - const html = templateHtml.replace("", markup).replace('', `${scriptTags}\n${styleTags}`); + const html = templateHtml + .replace('', markup) + .replace('', `${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 index 7f3ffea5c..f2489217d 100644 --- 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 index 8d21d7b00..f7d5fa9c1 100644 --- 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 index 39d42c271..0adfb2d62 100644 --- 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("", markup); + const html = template.replace('', 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 index e7ebe7062..36d169b4a 100644 --- 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 index 8d2d2f4a6..f92cdcbc1 100644 --- 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',