Research Webpack's module federation API

[jodator]

Provide a description of the task

Research the feasibility of using Wepback's module federation API in order to enable #8395.

Requirements to met:

• Adding a plugin to a build (might be a new build type).
• Using imports from base editor plugins (core, engine, utils <EmitterMixin>, ui).
• Using imports from "common" plugins (widget, clipboard, ... ).
• Potential to solve CSS double import issue Reseach CSS de-duplication on multiple imports #8400.

[pomek]

First of all, the documentation for the Module Federation plugin is poor. I needed to search available options via TypeScript types.. But before I started doing anything, I upgraded webpack to the version 5.x, because MF comes with the latest version.

Since the lack of examples in the official documentation, I was also looking for some articles on the Web. I found two that I used as an introduction to the topic:

• https://dev.to/brandonvilla21/micro-frontends-module-federation-with-webpack-5-426
• https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture

Unfortunately, I wasn't able to prepare a bundle file that will expose ClassicEditor as the umd build and share our internals. Our dev sample didn't work.

I added the following code as a plugin to the webpack.config.js file in the build-classic/ directory.

new webpack.container.ModuleFederationPlugin( {
	name: 'ClassicEditor',
	filename: 'ckeditor-libs.js',
	shared: [
		'@ckeditor/ckeditor5-core',
		'@ckeditor/ckeditor5-engine',
		'@ckeditor/ckeditor5-ui',
		'@ckeditor/ckeditor5-utils',
		'@ckeditor/ckeditor5-widget'
	],
	library: {
		name: 'ClassicEditor',
		type: 'umd',
		export: 'ClassicEditor'
	}
} );

After commenting out the library option, the build worked again but any additional file (that could contain our internals or things that we want to "share") was not created.

Going through examples I found in the articles above, I noticed that I need to use the import() function to load my entry point (the editor build definition) and pass it through to webpack. After that, additional files were created:

1. the main bundle that should be imported in the *.html file,
2. assets with our code (including the ClassicBuild definition),
3. dependencies from the node_modules/ (mostly lodash).

Unfortunately, everything now is asynchronous, and having the snippet: ClassicEditor.create() below the <script> tag ends with an error:

Uncaught ReferenceError: ClassicEditor is not defined

I tried to mix many different ways to get it working but with no luck. All examples I found were focused on React applications that could load things asynchronously.

I'm thinking that the Module Federation plugin can be good for such things as sharing a single component or load something asynchronously from some external library but in the editor's topic, where things must be done synchronously, it won't work.

[jodator]

@pomek Thanks! It looks like we've missed the biggest premise of the Module Federation - to load code from external entry points at run time. This is a killer feature for micro-frontends but it uses an asynchronous-first approach. AFAICS this might not be feasible to use for sharing a code.