works with rspack

Author: fi3ework

pnpm-lock.yaml

@@ -1,3 +1,3 @@
 import React from "react";
 
-export const App: React.FC = () => <p>Hello from Client</p>;
+export const App: React.FC = () => <p>Rspack + React + SSR + ESM</p>;

rspack/react-ssr-esm/client/components/app.tsx

@@ -1,26 +1,26 @@
 import { spawn } from "cross-spawn";
 import path from "path";
-import webpack from "webpack";
-import webpackConfigClient from "./webpack.config.client.js";
-import webpackConfigServer from "./webpack.config.server.js";
+import rspack from "@rspack/core";
+import rspackConfigClient from "./rspack.config.client.js";
+import rspackConfigServer from "./rspack.config.server.js";
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-const compiler = webpack([
+const compiler = rspack([
   {
-    ...webpackConfigClient,
+    ...rspackConfigClient,
     mode: "development",
     devtool: "source-map",
     output: {
-      ...webpackConfigClient.output,
+      ...rspackConfigClient.output,
       filename: "[name].js",
     },
   },
   {
-    ...webpackConfigServer,
+    ...rspackConfigServer,
     mode: "development",
     devtool: "source-map",
   },

rspack/react-ssr-esm/dev.js

@@ -3,31 +3,27 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "build:server": "webpack --config webpack.config.server.js",
-    "build:client": "webpack --config webpack.config.client.js",
+    "build:server": "rspack --config rspack.config.server.js",
+    "build:client": "rspack --config rspack.config.client.js",
     "start": "node ./dist/server.js",
     "start:dev": "node dev.js"
   },
   "devDependencies": {
-    "@types/cross-spawn": "^6.0.2",
-    "@types/express": "^4.17.11",
-    "@types/node": "^14.14.35",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^8.1.0",
-    "cross-spawn": "^7.0.3",
-    "ts-loader": "^8.0.18",
-    "typescript": "^4.2.3",
-    "webpack": "^5.101.1",
-    "webpack-cli": "^4.5.0",
-    "webpack-manifest-plugin": "^3.1.0",
-    "webpack-node-externals": "^2.5.2"
+    "@types/cross-spawn": "^6.0.6",
+    "@types/express": "^5.0.3",
+    "@types/node": "^22.17.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "cross-spawn": "^7.0.6",
+    "typescript": "^5.9.2",
+    "rspack-manifest-plugin": "^5.0.3",
+    "@rspack/core": "1.4.11",
+    "@rspack/cli": "1.4.11"
   },
   "dependencies": {
-    "ejs": "^3.1.6",
-    "express": "^4.17.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "ejs": "^3.1.10",
+    "express": "^5.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   }
 }

rspack/react-ssr-esm/package.json

@@ -1,6 +1,5 @@
 import path from "path";
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
-import { WebpackManifestPlugin } from "webpack-manifest-plugin";
+import { RspackManifestPlugin } from "rspack-manifest-plugin";
 import { fileURLToPath } from "url";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -13,6 +12,7 @@ export default {
   },
   mode: "production",
   output: {
+    clean: true,
     path: path.resolve(__dirname + "/dist/static"),
     filename: "[name].[contenthash].js",
     publicPath: "",
@@ -24,13 +24,16 @@ export default {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: "ts-loader",
-        options: {
-          configFile: "tsconfig.client.json",
-        },
+        loader: "builtin:swc-loader",
       },
     ],
   },
   target: "web",
-  plugins: [new CleanWebpackPlugin(), new WebpackManifestPlugin()],
+  plugins: [new RspackManifestPlugin()],
+  output: {
+    module: true,
+  },
+  experiments: {
+    outputModule: true,
+  },
 };

…k/react-ssr-esm/webpack.config.client.js …ck/react-ssr-esm/rspack.config.client.jsrspack/react-ssr-esm/webpack.config.client.js renamed to rspack/react-ssr-esm/rspack.config.client.js rspack/react-ssr-esm/webpack.config.client.js renamed to rspack/react-ssr-esm/rspack.config.client.js

@@ -1,7 +1,5 @@
-// import nodeExternals from 'webpack-node-externals'
 import path from 'path'
-import CopyPlugin from 'copy-webpack-plugin'
-import * as webpack from 'webpack'
+import rspack from '@rspack/core'
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
 
@@ -31,10 +29,7 @@ export default {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: 'ts-loader',
-        options: {
-          configFile: 'tsconfig.server.json',
-        },
+        loader: "builtin:swc-loader",
       },
     ],
   },
@@ -45,16 +40,16 @@ export default {
   },
 
   plugins: [
-    new webpack.default.BannerPlugin({
+    new rspack.BannerPlugin({
       banner: `
-    import { fileURLToPath as __rspack_fileURLToPath } from 'url';
-    import { dirname as __rspack_dirname } from 'path'
-    const __filename = __rspack_fileURLToPath(import.meta.url);
-    const __dirname = __rspack_dirname(__filename);
+import { fileURLToPath as __rspack_fileURLToPath } from 'url';
+import { dirname as __rspack_dirname } from 'path'
+const __filename = __rspack_fileURLToPath(import.meta.url);
+const __dirname = __rspack_dirname(__filename);
     `,
       raw: true,
     }),
-    new CopyPlugin({
+    new rspack.CopyRspackPlugin({
       patterns: [{ context: 'server', from: 'views', to: 'views' }],
     }),
   ],

…k/react-ssr-esm/webpack.config.server.js …ck/react-ssr-esm/rspack.config.server.jsrspack/react-ssr-esm/webpack.config.server.js renamed to rspack/react-ssr-esm/rspack.config.server.js rspack/react-ssr-esm/webpack.config.server.js renamed to rspack/react-ssr-esm/rspack.config.server.js

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>React + Node.js App</title>
+    <title>Rspack + React + Node.js App</title>
   </head>
   <body>
     <div id="root"><%- component %></div>