module-federation/utilities

Various Utilities for Module Federation

Module Federation Utilities

This repository contains various runtime and buildtime utilities for Module Federation

Legend:

• ⚠️: In Progress/Incomplete

Runtime

• Import Remote — Dynamically import a remotely exposed module
• CSS Boundary — Block outside CSS from affecting your microfrontend application

Buildtime ⚠️

utilities's Issues

Authenticated Access to Remote Modules

My team is looking for a way to fetch remote modules from an authenticated HTTP endpoint.
This doesn't appear to be possible for the loading method used by webpack's __webpack_require__.l, which simply creates a <script src={libraryUrl} /> tag (which makes it impossible to e.g. inject auth headers).

Do you have any recommendations?

Prepare to publish

Should prep to publish this soon.

Documentation

Readme to document current utilities added to package, in prep for release.

Ideally with a format we can use to expand upon as more tools are added to the package

Build adjustments

Lets keep rollup since it works great for libraries, but we should adjust the config.

1. consider disable tree shaking on library so all exports are retained - let the consumer's compiler do the tree shaking
2. lets use perserveModules to reflect the source directory structure in the build output
3. commonJS output as well as ESM output? might be useful for max compatibility
4. lets adjust the src directory structure in prep for supporting more utilities
   4.1) We should create src/runtime and src/buildtime directories so we can organize various utils depending on if they are tools that can be leveraged in/on webpack config and plugin side as well as tools that are intended to be used within the application when its executing
5. Lets not create this just yet, but it might be a good idea to make a src/server directory for SSR-specific tools when using module federation in a node-like environment.

TypeScript plugin support

Does the importRemote util work with the MF typescript plugin?

Meaning, if you import a React component like this, does it also preserve any types?

importRemote({ url: "http://localhost:3001", scope: 'Foo', module: 'Bar' }).then(({/* list of Bar exports */}) => {

React Library with importRemote not loading the remoteEntry.js

We build a container inside Nx Monorepo project as library . This container accepts the module federate component details(url,name ..) and load using importRemote library.
This issue occurs only if the usage of importRemote is inside a Nx Monorepo and same library used in another project as npm dependency

issue:
The importRemote always fails with error
"Remote Extension Loading failed with error Error: Remote loaded successfully but <<Module>> could not be found! Verify that the name is correct in the Webpack configuration!"

workaround : add the remoteEntry.js as a script manually and call the importRemote . It works without any issues.

is there any fix for the same?
TIA

Comb over nextjs-mf and pull out any useful utilities into this project

Ive developed many good utils under nextjs-mf.
It wold be great to extract some useful pieces of code from that project and move them over here - then have nextjs-mf depend on this project instead