ESM/MJS consumer/remote support for NodeFederationPlugin?

[JasonKleban]

I see there are some unpublished edits of the NodeFederationPlugin. I'm currently stuck with the Aug 2023 version where my ESM host cannot fetch the remote bundle because require is not defined. Client-side behavior is working perfectly.

If I hack the plugin's output to include const require = __WEBPACK_EXTERNAL_createRequire(import.meta.url); then it performs the fetch, but fails in loading the mjs remote with ScriptExternalLoadError.

The recent revisions look substantial. Will they support ESM formats? Are they stable? What is the easiest recommended way to experiment with it prior to you publishing? There's a lot of other code in this repo - not sure how small I can stay.

Thanks!

[JasonKleban]

Update:

Using version "@module-federation/node": "2.0.2-beta.6",

I am needing to add these lines 2 & 3 to my output bundle:

1: import { createRequire as __WEBPACK_EXTERNAL_createRequire } from "module";  // (existing)
2: const require = __WEBPACK_EXTERNAL_createRequire(import.meta.url);
3: const remoteContainerRegistry = import.meta;

otherwise webpack's lines like module.exports = __WEBPACK_EXTERNAL_createRequire(remoteContainerRegistry.url)("react"); fail - seems to be because of this plugin's compiler.options.output.importMetaName = 'remoteContainerRegistry'; and require is not defined before the script fetch can occur.

I also have to add a webpack.config's output.publicPath: '/whatever', - (literally that, so far) or I get "Unable to calculate automatic public path". I wasn't getting this problem in "@module-federation/node": "^1.0.7"

But then I'm stuck on this error: Cannot use import statement outside a module when vm.runInThisContext(...) after the remote script content is successfully retrieved. What will it take to get this to successfully load an esmodule mjs remote bundle?

If I further hack the loader code (__webpack_require__.l) with the following:

/******/            const m = require('module');
/******/ 	    //const remoteCapsule = vm.runInThisContext(m.wrap(scriptContent), 'node-federation-loader-' + name + '.vm')
/******/        //const exp = {};
/******/        //remote = {exports:{}};
/******/        //remoteCapsule(exp,require,remote,'node-federation-loader-' + name + '.vm',__dirname);
/******/        //remote = remote.exports || remote;
/******/        const remoteCapsule = new vm.SourceTextModule(scriptContent);
                    await remoteCapsule.link((specifier) => {
                        const resolved = require(specifier);
                        const keys = Object.keys(resolved);

                        return new vm.SyntheticModule(keys, function () {
                            keys.forEach(k => {
                                this.setExport(k, resolved[k]);
                            });
                        });
                    });
                    await remoteCapsule.evaluate();
                    remote = {
                        get: async (...args) => {
                            return () => remoteCapsule.namespace;  // an object displayed only as `Module {Symbol(Symbol.toStringTag): 'Module'}`
                        }
                    }

in an attempt to satisfy:

var onInitialized = function(_, external, first) {
    return handleFunction(external.get, data[1], getScope, 0, onFactory, first);
};

I realize the initial call is for the manifest bundle pointing to the other entry points. It looks to me like this get callback - for which data[1] is the entrypoint name (ex. './main-exposes') - should somehow be able to use the evaluated remoteCapsule to further fetch the exposed bundle. But since all I get is Module {Symbol(Symbol.toStringTag): 'Module'} I'm not sure what to do next.

Of course, this all seems pretty far from what the plugin supports right now and I'm not approaching this from a ESM-first angle since I don't have the background. More like trying to fit a ESM peg in a CJS hole.