Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'loaded')

[ignakk]

I'm upgrading module federation to V2 (I was previously using webpack.container.ModuleFederationPlugin)

"webpack": "5.94.0",

In an attempt to identify the problem, I found the source and cause of this error.

My MF config, when I was using webpack, looked like this:

"@library": {
    "1.0.0": {
        "from": "host",
        "eager": false,
        "loaded": 1
    }
}

config ModuleFederation V2 now:

"@library": {
    "version": "1.0.0",
    "scope": [
        "default"
    ],
    "deps": [],
    "useIn": [
        "host"
    ],
    "from": "host",
    "loading": {},
    "shareConfig": {
        "requiredVersion": "1.0.0",
        "singleton": false,
        "eager": 0,
        "strictVersion": false
    },
    "loaded": 1,
    "strategy": "version-first"
}

according to https://module-federation.io/guide/debug/variables#share

But my runtime code hasn't changed; the mf code contains this function:

 var eagerOnly = function(versions) {
            /******/
            return Object.keys(versions).reduce(function(filtered, version) {
                /******/
                if (versions[version].eager) {
                    /******/
                    filtered[version] = versions[version];
                    /******/
                }
                /******/
                return filtered;
                /******/
            }, {});
            /******/
};

The "eager" field is missing from the "versions[version].eager" line in the new config; it's now in shareConfig.

My config:

new ModuleFederationPlugin({
                name: 'host',
                remotes: {
                       "remote": `new Promise((res, rej) => {
                                 // i load remotes via script with proxy
                                script.onload = () => {
                                       res({
                                            get: (r) => window['remote'].get(r),
                                            init: (...args) => window['remote'].init(...args)
                                       })
                                }
                        })`
                }
                exposes: {'./utils': './src/utils'}
                filename: 'app/remoteEntry.js',
                shared: {
                      '@library': { eager: true }
                 }
});

I didn't have the async boundary option before (because i have multiple entrypoints in my webpack config), but I also tried adding the experimental asyncStartup flag, but the result is the same.

I've spent a lot of time debugging because of this issue. I'd be very grateful if someone could offer to help me with my problem.