ModuleFederation conflict with entry output

[Hazlank]

Bug report

What is the current behavior?
ModuleFederation chunk conflict with Entry chunk
If the current behavior is a bug, please provide the steps to reproduce.

// index.ts
export const a = 1;
export const b = 2;
export const c = 3;

// remote.js
import { a } from '.'

// main.js
import { b, c } from '.'

I set main.js to entry and expose remote.js to ModuleFederation.

They will use same moduleId to generate code in chunks.

But remote.js chunks will haven't exports b and c because of tree-shaking.

So, if loaded remoteEntry.js first, webpack runtime will use moduleId to cacheModule, and then loaded main.js will can't find constant b or c.

What is the expected behavior?
It shouldn't have same moduleId

Other relevant information:
webpack version: 5.74.0
Node.js version: v16.18.1
Operating System: mac os
Additional tools:

[alexander-akait]

Expected, because you don't use them and don't export, I can't help without full configuration or minimum reproducible test repo using github

[Hazlank]

@alexander-akait, @ScriptedAlchemy sorry,my code was Incomplete.I used the export constant.I can't provide reproducible test repo, but something I've discovered.

I have two repository, running with production. they have same webpack version.

main-app

The main application，load remoteEntry from sub-app.

sub-app

Another application, use moduleFederation expose module.

constant.ts

export const a = 1;
export const b = 2;
export const c = 3;

remote.js

import { a } from '.'
(() => {
	console.log(a)
})()

index.js

import { b, c } from '.'
(() => {
	console.log(b,c)
})()

webpack.config.js

module.export = {
	entry: index.js,
	output: {
	    path: ...
	    filename: ...
	    chunkFilename: ...,
	    publicPath: ...,
	    clean: true,
	    library: ...,
	    libraryTarget: 'window',
	  },
	  optimization: {
	    minimizer: [
	      new TerserWebpackPlugin({
	        parallel: true
	      }),
	    ],
	    splitChunks: {
	      chunks: 'all',
	     }
	  },
	plugins: [
		new ModuleFederationPlugin({
	      name: 'subApp',
	      filename: 'remoteEntry.js',
	      exposes: {
	        './remote': path.resolve(
	          __dirname,
	          './remote.js'
	        ),
	      },
	]
}

moduleFederation chunk bundled const a。
main chunk bundled const b and c。

when I visit main-app application first, it will load moduleFederation chunk from sub-app. then i use window.pushState to visit sub-app application and loaded main chunk. it will throw the error ReferenceError: b and c is not defined because webpack runtime cache module.

// The module cache
var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {
	// Check if module is in cache
	var cachedModule = __webpack_module_cache__[moduleId];
	if (cachedModule !== undefined) {
		return cachedModule.exports;
	}
	// Create a new module (and put it into the cache)
	var module = __webpack_module_cache__[moduleId] = {
		id: moduleId,
		loaded: false,
		exports: {}
	};

	// Execute the module function
	__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);

	// Flag the module as loaded
	module.loaded = true;

	// Return the exports of the module
	return module.exports;
}

cachedModule[moduleId] only have a exports.

I add optimization.runtimeChunk: 'multiple' to config, and set runtime: false to ModuleFederationPlugin.

the __webpack_module_cache__ not conflict but have another new problem. when i loaded sub-app main chunk first and then loaded moduleFederation chunk.it will throw _webpack_require.o isn't function becase moduleFederation chunk have't runtime chunk?

var webpackJsonpCallback = function(parentChunkLoadingFunction, data) {
	var chunkIds = data[0];
	var moreModules = data[1];
	var runtime = data[2];
	var moduleId, chunkId, i = 0;
	if(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {
		for(moduleId in moreModules) {
			if(__webpack_require__.o(moreModules, moduleId)) {
				__webpack_require__.m[moduleId] = moreModules[moduleId];
			}
		}
        // loaded moduleFederation chunk will jump in this,and throw error.
		if(runtime) var result = runtime(__webpack_require__);
	}
	//...
}

I set optimization.runtimeChunk: 'single' and delete rutime: false in ModuleFederationPlugin to product main~rutime file ，merge it to remoteEntry like this way.

finally, i can switch application with no error.

[ScriptedAlchemy]

I've run into this with runtimeChunk:single

You can do something like this. To solve it.

In the enhanced package we fixed chunk split issues and multiple runtime chunks.

Then under the hood we generate another remote with runtime:undefined and use a runtime plugin in the new api to tell remotes to switch to the single runtime chunk remotes if a remote attempts to load the container of the host otherwise it loads the runtime:false one with its own module graph. module-federation/module-federation-examples#3847

[Hazlank]

yep, i set single and merge main~runtime into remoteEntry.
so this two entrypoint sharing same loading chunk runtime.and the chunk will calculate export collection