Use your plugin!!

[rustam-gasymov]

Hi, i want to try your plugin, but i cannt install him
I get this error
error Command "@module-federation/ModuleFederationEnhacedPlugin" not found.

[schirrel]

hey @rustam-gasymov thanks, it is not yet publish because its gona be part of the RC for Module federation under the https://github.com/module-federation/enhanced i am in touch with zack thru this issue module-federation/enhanced#5 to see if we can publihs as soon as possible

[schirrel]

@rustam-gasymov now you can install, look here https://github.com/schirrel/ModuleFederationEnhancedPlugin/pkgs/npm/module-federation-enhanced-plugin

[rustam-gasymov]

hi, thanks a lot, but I cannt open, its appear me page not found "404"

[schirrel]

@rustam-gasymov thanks for the patience, i had a couple of troubles.
Now you can choose:

• https://www.npmjs.com/package/@schirrel/module-federation-enhanced-plugin
• https://github.com/schirrel/ModuleFederationEnhancedPlugin/pkgs/npm/module-federation-enhanced-plugin

[aditya-agarwal]

Hi Has this been merged to make it part of module-federation ?

[aditya-agarwal]

I am still getting ReferenceError: ModuleFederationEnhancedPlugin is not defined

[aditya-agarwal]

I am facing the same issue as you here module-federation/module-federation-examples#1323

[schirrel]

Hi @aditya-agarwal sadly not yet merged to part of the webpack module federation itself, it must be used as stated in here:https://github.com/schirrel/ModuleFederationEnhancedPlugin#usage

Did you import it as const ModuleFederationEnhacedPlugin = require("@schirrel/module-federation-enhanced-plugin");
after installation?

[aditya-agarwal]

Okay i was able to resolve the undefined error. It seems like there are some typos in the README file.
at one place its mentioned
const ModuleFederationEnhacedPlugin = require("@schirrel/module-federation-enhanced-plugin");
and in other example its
const ModuleFederationEnhacedPlugin = require("@schirrel/ModuleFederationEnhancedPlugin");
not sure if that is intentional.

Also i had the copy pasta error :). There is a typo in the spelling of Enhanced

But even after fixing those i am getting Cannot find module 'elements/remoteMap' or its corresponding type declarations

This is my setup

const ModuleFederationEnhancedPlugin = require('@schirrel/module-federation-enhanced-plugin');
...
new ModuleFederationEnhancedPlugin({
      name: 'scenes',
      filename: 'remoteEntry.js',
      remotes: {
        elements: 'panels@http://localhost:8080/remoteEntry.js'
      }
    })

Even tried import remoteMap from 'scenes/remoteMap'; same result.

[schirrel]

Hey @aditya-agarwal thanks, indeed i had some worngs on my readme that i am fixing as i wam having time, sadly i had these two mistages.

for the remote maps to be usefull use the approach described on here : https://github.com/schirrel/ModuleFederationEnhancedPlugin#remotes-url-map
such as

const remoteMapGetFn = window. scenes.get('./remoteMap')
const remoteMapList = remoteMapGetFn()

For the import remoteMap from to work, iyou will have to add the scenes the the remote list

[aditya-agarwal]

Got it and Thanks for your response!

Actually I am looking to use the moduleMap on the child/consumer application side not sure if that is even possible but something like this

const ModuleFederationEnhancedPlugin = require('@schirrel/module-federation-enhanced-plugin');
...
new ModuleFederationEnhancedPlugin({
      name: 'scenes',
      filename: 'remoteEntry.js',
      remotes: {
        elements: 'panels@http://localhost:8080/remoteEntry.js'
      }
    })

and then do import moduleMap from 'elements/moduleMap'; because i want to be able to dynamically fetch modules at runtime as you were trying to do here module-federation/module-federation-examples#1323.

Is that even possible? Like to know what modules the remote is exposing at runtime?

[schirrel]

Actually I am looking to use the moduleMap on the child/consumer application side not sure if that is even possible but something like this

you want to your child to get the module map from the shell app?
like,
you elements need to know scene module map?

[aditya-agarwal]

If by shell app you mean the app hosting the modules then yes. So just to be clear

I have App-1 which is exposing two modules like:

new ModuleFederationPlugin({
      name: 'elements',
      filename: 'remoteEntry.js',
      exposes: {
        './modules1': './module1.js',
        './modules2': './module2.js',
      }
    })

and i have App-2 which is using these modules from App-1

new ModuleFederationPlugin({
      name: 'scenes',
      filename: 'remoteEntry.js',
      remotes: {
        elements: 'elements@https://localhost:8080/remoteEntry.js'
      }
    })

Then in App-2 can I do import moduleMap from 'elements/moduleMap'; then pick a module from this map and import it. Because for my use case App-2 would need to check which modules are being exposed by App-1 and pick one at runtime. I hope that makes sense.

[aditya-agarwal]

Hi @schirrel would you know if what i am looking for in my last comment makes sense ?

[schirrel]

hey @aditya-agarwal i got it now.
For you to use the remote map on element, app two, you have to make app one to use the ModuleFederationEnhancedPlugin, like:

new ModuleFederationEnhancedPlugin({
      name: 'elements',
      filename: 'remoteEntry.js',
      exposes: {
        './modules1': './module1.js',
        './modules2': './module2.js',
      }
    })

The in App 2 you dont need to change nothing, and then import moduleMap from 'elements/moduleMap'; should work.
Also, you can take a look at the remove entry file generate after build and search for moduleMap.
it should have something like this:

Does it show up on search?

[aditya-agarwal]

Okay I got moduleMap to work and i can get the keys for the modules that are available. But sorry if this is an obvious question but how do i import the module using the keys. I tried this and it throws compilation errors.

let moduleMap = await import('elements/moduleMap');
let module1 = await import(`elements/${moduleMap[0]`);

Error is :

Module not found: Error: Can't resolve 'elements'

[schirrel]

@aditya-agarwal Sadly the import function doesn't work with dynamic passed names, @ScriptedAlchemy talked about at module-federation/module-federation-examples#1323,
so to you import dynamic you need to use a low level approach like said in module-federation/module-federation-examples#1323

const loadComponent = function (scope, module) {
    return async () => {
        const factory = await window[scope].get(`./${module}`);
        const Module = factory();
        return Module;
    };
}

let moduleMap = await import('elements/moduleMap');
let module1 = await loadComponent('elements', moduleMap[0]);

[aditya-agarwal]

Got it. Thanks that works!

Looking forward to when this gets merged to webpack

[aditya-agarwal]

Hi @schirrel Maybe I missing something here but in loadComponent() I am getting window[scope] as undefined when I am just calling let module1 = await loadComponent('elements', 'module1'); but when i do this it works

let someModule = await import('elements/someModule');
let module1 = await loadComponent('elements', 'module1');

So if i am importing something in a hardcoded way before using the loadComponent() method it works. But if i just call the loadComponent() method with the params window[scope] is returned as undefined.

Do i need to import the container in some other way?

[schirrel]

hi @aditya-agarwal sorry for the huge delay.
Did it worked or still a issue?

[aditya-agarwal]

Hi @schirrel I got it to work thanks!

Running into a separate issue and wondering if you had any insights. How do i bundle static images with module federation?

So I have an application that I am trying to expose thru module federation that has some static images under assets directory. Suppose my remote is running on localhost:8081 and my shell is running on localhost:8080, Firstly the shell application is looking for the assets directory on localhost:8080 instead of localhost:8081. Second i dont think module federation is bundling the assets in the bundle its serving to shell application.

Would you know if there is certain configuration for this.

Thanks!

[schirrel]

@aditya-agarwal sadly i am current having the same trouble. But one thing that i know that this may happen according to the way the image is being used. LIke ir you are importing or using at beigin of the figure the name './' , this may lead to usage