TypeError: __webpack_require__.O is not a function

[mmmmmmmgo]

Bug report

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const rules = [
	{
		test: /\.js$/,
		include: path.resolve(__dirname, "src"),
		use: {
			loader: "babel-loader",
			options: {
				presets: ["@babel/react"]
			}
		}
	}
];
const getConfig = (env = "development") => {
	env = "development";
	return [
		{
			name: "app",
			context: __dirname,
			mode: env,
			devtool: "source-map",
			entry: {
				app: "./src/index.js"
			},
			output: {
				filename: "[name].js",
				path: path.resolve(__dirname, "dist/aaa"),
				uniqueName: "module-federation-aaa"
			},
			module: { rules },
			optimization: {
				runtimeChunk: "single",
				splitChunks: {
					chunks: "all",
					cacheGroups: {
						efg:{
							// react
							test: /[\\/]node_modules[\\/]react[\\/]/,
							name: "npm.react",
							priority: 10
						}
					},
				},
			},
			plugins: [
				new ModuleFederationPlugin({
					remoteType: "script", 
					name: "mfeAAA",
					library: {
						type: "umd",
						name: "mfeAAA"
					},
					runtime: false,
					// List of remotes with URLs
					remotes: {
						"mfe-a": "mfeAAA@/mfeAAA.js"
					},
					exposes: {
						"./Component": "./src/D"
					},
				}),
				new HtmlWebpackPlugin({
					template: "./index.html"
				})
			],
		},
	]
};
module.exports = getConfig;

This is an example of using module federation for self-use.

This webpack configuration will output app.js, runtime.js, mfeAAA.js, and other unimportant JS files. The order they are included in index.html is runtime.js, app.js, mfeAAA.js.

The key points of this issue are:

• webpack has runtime: 'single', and ModuleFederationPlugin has option runtime: false.
• Both runtime.js and mfeAAA.js internally register webpackJsonpCallback.
• When app.js loaded, there is a callback __webpack_require__.O(0, ["npm.react","vendors......,

__webpack_require__ => { // webpackRuntimeModules
var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
  __webpack_require__.O(0, ["npm.react","vendors-node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_index_js"], () => (__webpack_exec__("./src/index.js")));
var __webpack_exports__ = __webpack_require__.O();
}

• But here, the __webpack_require__ is from inside mfeAAA.js, and it does not define `webpack_require.O

What is the expected behavior?

Other relevant information:

webpack version: 5.95.0
Node.js version:
Operating System:
Additional tools:

Why would use self module federation?

In some micro-front-end scenarios，appA will be embedded in appB, and appB will use the module federation of appA

The above example is not realistic; module federation in Webpack will not have a configuration that uses itself. I'm referring to the situation where mfeAAA.js and runtime.js are loaded together at runtime

[alexander-akait]

Please provide a reproducible repository with code using github, single configuration is not enough because the problem is not reproducible, thank you

[mmmmmmmgo]

Just for the record, because I'm sure the officials won't fix it.

The possible solutions (not verified):

1. When using module federation, do not modify splitChunk, so that app.js will not call __webpack_require__.O.
2. Do not set single for optimization.runtimeChunk, but instead provide a dedicated runtime for mfeAAA.js. Or do not use runtime at all

[alexander-akait]

Well, I studied your case more deeply through my own simple code.

Just for the record, because I'm sure the officials won't fix it.

It is not entirely correct to say this, you want to share the runtime between a regular application and ModuleFederationPlugin, ideally we should output an error for this case, because it is not entirely possible for shared runtime (splitChunk and ModuleFederationPlugin) which you want to make single, and your answers above are the answer to your own question. I can't imagine how this situation can be resolved at all. If you have any ideas, I'm ready to listen.

[mmmmmmmgo]

I realized that my answer doesn't solve the problem either, mfeAAA.js and app.js use the same chunkLoadingGlobal, and the risk of this problem is still there.
If the ModuleFederationPlugin supports configuring chunkLoadingGlobal it might be possible to isolate the two environments.
I don't know much about the internals of webpack, so I'm probably not giving the right advice.

---

Sharing an interesting experience with my project. Using module federation to share modules within a micro front-end has been implemented for a long time, but it hasn't been a problem because the micro front-end framework we are using (qiankun) effectively avoids the problem by isolating the window by default (create fake window before executing js script). In this scenario I encountered, window is not isolated by qiankun.

[mmmmmmmgo]

or ModuleFederationPlugin({ runtime:false }) mean not use runtime , rather than reusing other runtime.

[alexander-akait]

You have chunks: "all",, it means all chunks will be shared and so runtime required, you can use as function and return only necessary chunks

[AsaRory]

Hello, I have the same scenario and am facing the same problem. Have you resolved it?