Moving 5 PB modules from Webpack to RS Build

Dnn.AdminExperience/ClientSide/Prompt.Web/package.json

@@ -4,46 +4,30 @@
   "description": "DNN Prompt",
   "private": true,
   "scripts": {
-    "build": "set NODE_ENV=production&&webpack --mode production",
-    "debug": "set NODE_ENV=debug&&webpack --mode production",
-    "watch": "set NODE_ENV=debug & webpack --mode=development --progress --watch",
-    "analyze": "set NODE_ENV=analyze&&webpack-dev-server -d --port 8100 --hot --inline --content-base dist/ --history-api-fallback",
-    "test": "jest",
+    "build": "set NODE_ENV=production&&rsbuild build",
+    "debug": "set NODE_ENV=debug&&rsbuild build",
+    "watch": "set NODE_ENV=debug & rsbuild dev",
     "lint": "eslint --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.28.5",
     "@dnnsoftware/dnn-react-common": "10.1.0",
+    "@rsbuild/core": "^1.6.3",
+    "@rsbuild/plugin-less": "^1.5.0",
+    "@rsbuild/plugin-react": "^1.4.2",
+    "@rsbuild/plugin-svgr": "^1.2.2",
     "array.prototype.find": "2.2.3",
     "array.prototype.findindex": "2.2.4",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^30.2.0",
-    "babel-loader": "^10.0.0",
-    "babel-plugin-transform-object-assign": "6.22.0",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "babel-polyfill": "6.26.0",
     "create-react-class": "^15.7.0",
-    "css-loader": "^7.1.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.8",
     "es6-object-assign": "1.1.0",
     "eslint": "9.38.0",
     "eslint-plugin-react": "7.37.5",
-    "eslint-webpack-plugin": "^5.0.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "6.2.0",
     "globals": "^16.4.0",
-    "i18n-webpack-plugin": "1.0.0",
     "jest": "^30.2.0",
     "less": "4.4.2",
-    "less-loader": "12.3.0",
     "localization": "^1.0.2",
     "prop-types": "^15.8.1",
-    "raw-loader": "4.0.2",
     "react": "^16.14.0",
     "react-click-outside": "^3.0.1",
     "react-dom": "^16.14.0",
@@ -57,13 +41,8 @@
     "redux-immutable-state-invariant": "2.1.0",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "2.4.2",
-    "style-loader": "^4.0.0",
     "throttle-debounce": "^5.0.2",
-    "typescript": "^5.9.3",
-    "url-loader": "4.1.1",
-    "webpack": "5.102.1",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.2"
+    "typescript": "^5.9.3"
   },
   "dependencies": {
     "dompurify": "^3.3.0",

Dnn.AdminExperience/ClientSide/Prompt.Web/rsbuild.config.ts

@@ -0,0 +1,113 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { pluginLess } from "@rsbuild/plugin-less";
+import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import path from "path";
+import { createRequire } from "module";
+
+const requireModule = createRequire(__filename);
+const webpackExternals = requireModule(
+  "@dnnsoftware/dnn-react-common/WebpackExternals"
+);
+
+const resolveWebsitePath = () => {
+  try {
+    const settings = requireModule("../../../settings.local.json");
+    if (settings?.WebsitePath) {
+      return settings.WebsitePath;
+    }
+  } catch {
+    // ignore missing local settings
+  }
+  return "";
+};
+
+const websitePath = resolveWebsitePath();
+const isProduction = process.env.NODE_ENV === "production";
+const useWebsitePath = !isProduction && websitePath;
+
+export default defineConfig({
+  source: {
+    entry: {
+      main: path.resolve(__dirname, "src/main.jsx"),
+    },
+  },
+  output: {
+    target: "web",
+    filenameHash: false,
+    cleanDistPath: false,
+    cssModules: {
+      auto: true,
+      localIdentName: "[local]",
+    },
+    distPath: {
+      root: useWebsitePath
+        ? path.join(
+            websitePath,
+            "DesktopModules/Admin/Dnn.PersonaBar/Modules/Dnn.Prompt/"
+          )
+        : "../../Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Prompt/",
+      js: "scripts/bundles/",
+      css: "css/",
+      html: "",
+    },
+    filename: {
+      js: "prompt-bundle.js",
+      css: "Prompt.css",
+    },
+    legalComments: "none",
+  },
+  performance: {
+    chunkSplit: {
+      strategy: "all-in-one",
+    },
+  },
+  tools: {
+    rspack: {
+      externals: (data) => {
+        const { request } = data;
+        // Handle exact matches
+        if (webpackExternals[request]) {
+          return webpackExternals[request];
+        }
+        // Handle React submodules (e.g., react/jsx-runtime, react-dom/client)
+        if (request?.startsWith('react/') || request?.startsWith('react-dom/')) {
+          const baseModule = request.split('/')[0];
+          if (webpackExternals[baseModule]) {
+            // For submodules, return the base module
+            return webpackExternals[baseModule];
+          }
+        }
+        return undefined;
+      },
+      resolve: {
+        modules: [
+          path.resolve(__dirname, "./src"),
+          path.resolve(__dirname, "./node_modules"),
+          path.resolve(__dirname, "../../../node_modules"),
+        ],
+      },
+    },
+    htmlPlugin: false,
+  },
+  dev: {
+    writeToDisk: true,
+    hmr: false,
+    liveReload: false,
+  },
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: "classic",
+      },
+    }),
+    pluginLess({
+      lessLoaderOptions: {
+        lessOptions: {
+          javascriptEnabled: true,
+        },
+      },
+    }),
+    pluginSvgr(),
+  ],
+});