feat(browser): introduce BrowserRequirePlugin and remove nonWebpackRequire (#11470)

* BrowserRequirePlugin

* Update docs

* Fix

* Update api

Author: CPunisher

packages/rspack/etc/core.api.md

@@ -1114,6 +1114,8 @@ export class Compiler {
     get __internal__ruleSet(): RuleSetCompiler;
     // @internal
     __internal__takeModuleExecutionResult(id: number): any;
+    // @internal
+    __internal_browser_require: (id: string) => unknown;
     // (undocumented)
     cache: Cache_2;
     // (undocumented)

packages/rspack/src/Compiler.ts

@@ -162,6 +162,12 @@ class Compiler {
 	compilerPath: string;
 	options: RspackOptionsNormalized;
 
+	/**
+	 * Note: This is not a webpack public API, maybe removed in future.
+	 * @internal
+	 */
+	__internal_browser_require: (id: string) => unknown;
+
 	constructor(context: string, options: RspackOptionsNormalized) {
 		this.#initial = true;
 
@@ -241,6 +247,12 @@ class Compiler {
 		this.idle = false;
 
 		this.watchMode = false;
+
+		this.__internal_browser_require = () => {
+			throw new Error(
+				"Cannot execute user defined code in browser without `BrowserRequirePlugin`"
+			);
+		};
 		// this is a bit tricky since applyDefaultOptions is executed later, so we don't get the `resolve.pnp` default value
 		// we need to call pnp defaultValue early here
 		this.resolverFactory = new ResolverFactory(

packages/rspack/src/browser/BrowserRequire.ts

@@ -0,0 +1,70 @@
+import fs from "node:fs";
+import { sync as resolveSync, transformSync } from "@rspack/binding";
+import type { Compiler } from "../Compiler";
+
+type BrowserRequire = typeof Compiler.prototype.__internal_browser_require;
+
+/**
+ * Represents the runtime context for CommonJS modules in a browser environment.
+ */
+interface CommonJsRuntime {
+	module: any;
+	exports: any;
+	require: BrowserRequire;
+}
+
+interface BrowserRequirePluginOptions {
+	/**
+	 * This function defines how to execute CommonJS code.
+	 */
+	execute: (code: string, runtime: CommonJsRuntime) => void;
+}
+
+const unsafeExecute: BrowserRequirePluginOptions["execute"] = (
+	code,
+	runtime
+) => {
+	const wrapper = new Function("module", "exports", "require", code);
+	wrapper(runtime.module, runtime.exports, runtime.require);
+};
+
+/**
+ * This plugin inject browser-compatible `require` function to the `Compiler`.
+ * 1. It resolves the JavaScript in the memfs with Node.js resolution algorithm rather than in the host filesystem.
+ * 2. It transform ESM to CommonJS which will be executed with a user-defined `execute` function.
+ */
+export class BrowserRequirePlugin {
+	/**
+	 * This is an unsafe way to execute code in the browser using `new Function`.
+	 * It is your responsibility to ensure that your application is not vulnerable to attacks due to this function.
+	 */
+	static unsafeExecute = unsafeExecute;
+
+	constructor(private options: BrowserRequirePluginOptions) {}
+
+	apply(compiler: Compiler) {
+		const execute = this.options.execute;
+		compiler.__internal_browser_require = function browserRequire(id: string) {
+			const { path: loaderPath } = resolveSync("", id);
+			if (!loaderPath) {
+				throw new Error(`Cannot find loader of ${id}`);
+			}
+
+			const data = fs.readFileSync(loaderPath);
+			const code = data?.toString() || "";
+
+			const module: any = { exports: {} };
+			const exports = module.exports;
+
+			const cjs = transformSync(
+				code,
+				JSON.stringify({
+					module: { type: "commonjs" }
+				})
+			);
+
+			execute(cjs.code, { exports, module, require: browserRequire });
+			return exports.default ?? module.exports;
+		};
+	}
+}

packages/rspack/src/browser/index.ts

@@ -1,5 +1,6 @@
 export * from "../index";
 export { BrowserHttpImportEsmPlugin } from "./BrowserHttpImportEsmPlugin";
+export { BrowserRequirePlugin } from "./BrowserRequire";
 
 import { fs, volume } from "./fs";
 export const builtinMemFs = {

packages/rspack/src/builtin-plugin/SubresourceIntegrityPlugin.ts

@@ -13,7 +13,6 @@ import type { Compiler } from "../Compiler";
 import type { CrossOriginLoading } from "../config/types";
 import { getSRIPluginOptionsSchema } from "../schema/plugins";
 import { validate } from "../schema/validate";
-import { nonWebpackRequire } from "../util/require";
 import { create } from "./base";
 
 const PLUGIN_NAME = "SubresourceIntegrityPlugin";
@@ -297,27 +296,17 @@ export class SubresourceIntegrityPlugin extends NativeSubresourceIntegrityPlugin
 				}
 			}
 
-			if (IS_BROWSER) {
-				nonWebpackRequire()(this.options.htmlPlugin)
-					.then(bindingHtmlHooks)
-					.catch(e => {
-						if (
-							!isErrorWithCode(e as Error) ||
-							(e as Error & { code: string }).code !== "MODULE_NOT_FOUND"
-						) {
-							throw e;
-						}
-					});
-			} else {
-				try {
-					bindingHtmlHooks(require(this.options.htmlPlugin));
-				} catch (e) {
-					if (
-						!isErrorWithCode(e as Error) ||
-						(e as Error & { code: string }).code !== "MODULE_NOT_FOUND"
-					) {
-						throw e;
-					}
+			try {
+				const htmlPlugin = IS_BROWSER
+					? compiler.__internal_browser_require(this.options.htmlPlugin)
+					: require(this.options.htmlPlugin);
+				bindingHtmlHooks(htmlPlugin);
+			} catch (e) {
+				if (
+					!isErrorWithCode(e as Error) ||
+					(e as Error & { code: string }).code !== "MODULE_NOT_FOUND"
+				) {
+					throw e;
 				}
 			}
 		}

packages/rspack/src/builtin-plugin/html-plugin/plugin.ts

@@ -8,7 +8,6 @@ import {
 
 import type { Compilation } from "../../Compilation";
 import type { Compiler } from "../../Compiler";
-import { nonWebpackRequire } from "../../util/require";
 import { create } from "../base";
 import {
 	cleanPluginHooks,
@@ -137,9 +136,11 @@ const HtmlRspackPluginImpl = create(
 						);
 					}
 					try {
-						const renderer = (await nonWebpackRequire()(templateFilePath)) as (
-							data: Record<string, unknown>
-						) => Promise<string> | string;
+						const renderer = (
+							IS_BROWSER
+								? this.__internal_browser_require(templateFilePath)
+								: require(templateFilePath)
+						) as (data: Record<string, unknown>) => Promise<string> | string;
 						if (c.templateParameters === false) {
 							return await renderer({});
 						}

packages/rspack/src/container/ModuleFederationPlugin.ts

@@ -191,7 +191,11 @@ function getDefaultEntryRuntime(
 			options.shareStrategy ?? "version-first"
 		)}`,
 		compiler.webpack.Template.getFunctionContent(
-			require("./moduleFederationDefaultRuntime.js")
+			IS_BROWSER
+				? compiler.__internal_browser_require(
+						"@rspack/browser/moduleFederationDefaultRuntime.js"
+					)
+				: require("./moduleFederationDefaultRuntime.js")
 		)
 	].join(";");
 	return `@module-federation/runtime/rspack.js!=!data:text/javascript,${content}`;

packages/rspack/src/loader-runner/loadLoader.ts

@@ -12,7 +12,6 @@ import type Url from "node:url";
 import type { LoaderDefinitionFunction } from "../config";
 import type { PitchLoaderDefinitionFunction } from "../config/adapterRuleUse";
 import type { Compiler } from "../exports";
-import { nonWebpackRequire } from "../util/require";
 import type { LoaderObject } from ".";
 import LoaderLoadingError from "./LoaderLoadingError";
 
@@ -31,12 +30,13 @@ export default function loadLoader(
 	callback: (err: unknown) => void
 ): void {
 	if (IS_BROWSER) {
-		// Why is IS_BROWSER used here:
-		// @see [../utils/require.ts]
-		nonWebpackRequire()(loader.path).then(module => {
-			handleResult(loader, module, callback);
-		}, callback);
-		return;
+		let module: any;
+		try {
+			module = compiler.__internal_browser_require(loader.path);
+		} catch (e) {
+			return callback(e);
+		}
+		return handleResult(loader, module, callback);
 	}
 
 	if (loader.type === "module") {