zhanghongen/universal-module-federation-plugin

Versioned remote module manager based on npm and module-federation

universal-module-federation-plugin

中文文档

wpmjs（web package manager）

Versioned remote module manager based on npm and module-federation, View online demo

module-federation-runtime

this package simulates and exposes the module-federation API

universal-module-federation-plugin

Keep the original API of module-federation, support the integration of various module specifications

npm-federation

You can directly introduce remote npm packages in umd, system, and module-federation formats

single-react-refresh-plugin

This package is used with @pmmmwh/react-refresh-webpack-plugin and module-federation for hot update

universal-module-federation-plugin's Issues

umi3.5 umi4/max didn't worker

errors like $ReactRunTime$ has already been declared

"__webpack_share_scopes__" is not defined

Using this with webpack v4 + server-side rendering and getting ReferenceError: __webpack_share_scopes__ is not defined error.

function getDefaultShareScopes() {
  return typeof __global_share_scopes__ === "undefined" ? 
    __webpack_share_scopes__ || {} : __global_share_scopes__
}

Relies on optional webpack "entry" configuration

When the optional entry: "./src/index", is missing from the webpack configuration, it errors out with a message of: TypeError: Cannot read properties of undefined (reading 'containerImportMap'). This package should respect webpack default configurations generally, and entry specifically..

Does not work with web workers

I've created a minimal reproducible example here with this error. In short, when trying to import a UMD module in a web worker, this error is raised:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'containerImportMap')

because the following line is run in the web worker:

var containerImportMap = _global.__umfplugin__.containerImportMap

but the __umfplugin__ is only instatntiated in the main thread (dist/main.js in the compiled package) by the inject Plugin.

PS. Sorry for all the issues. I hope they are helpful (and I wouldn't bother if I didn't think this package was so useful!)

Does not work in top level imports

Like the ModuleFederationPlugin, modules imported with this plugin need to be bootstrapped in the usual way. For example, putting the import remixRunRouter from "@remix-run/router" import in the top-level app1/src/index.js in the example repo, errors out with a very unhelpful message (Uncaught TypeError: Cannot read properties of undefined (reading 'call')).

Probably worth mentioning this in the README like the module federation plugin does.

Doesn't play well with UMD packages served by the webpack-cli dev server

I was trying to work on a UMD package to import with this plugin and was using the usual webpack-cli serve to serve the package. Curiously, when I try and import the UMD package served from the webpack-cli every import is undefined. E.g:

import { something } from "MyUMDpackage"
console.log(typeof something) // always returns "undefined" when MyUMDpackage is served from the webpack-cli

However when I build my UMD package with npx webpack --watch in one process and serve it in another process with serve dist --cors -p $PORT, it seems to work just fine. Probably something to do with all the extra debugging code injected by the webpack-cli dev server. However, while this is still an issue, probably worth mentioning in the README.

[module-federation-runtime] Warnings importing as a CommonJs module

I have a React application using Node 12, so I can not use ES modules. When I try to import the module-federation-runtime package as a Common JS module like this:

import { registerRemotes, findModule } from "module-federation-runtime/dist/node";

I get these warnings:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

and

Error: Can’t resolve ‘module’ in ‘.../packages/widgets/node_modules/module-federation-runtime/dist/node

exception: customContainer.init is not a function

remotes[global] = {
url,
shareScope,
container: null,
containerPromise: Promise.resolve(useLoadScript(url))
.then(customContainer => {
var container = customContainer || _global[global]
_global[global] = _global[global] || container
if (!container) {
if (!container) throw new Error(not found container from global["${global}"])
}
remotes[global].container = container
return container.init(shareScopes[shareScope])
})
}

export default function loadScript(url) {
const {
promise,
reject,
resolve
} = getPromise()
const element = document.createElement('script');
element.src = url;
element.type = 'text/javascript';
element.async = true;
element.onload = () => {
resolve(element)
};
element.onerror = () => {
reject(element)
};
try {
return promise
} finally {
document.head.appendChild(element);
}
}

after exec Promise.resolve(useLoadScript(url)), found the customContainer was script dom, the useLoadScript function resolve a element dom obj, at the end of containerPromise but to call customContainer init function, at this time exception happened, customContainer.init was not a function, it as expected when i assign the variable container equal _global[global]

support webpack-4

support webpack-4

API-1.0

two ideas:

1. Use ContainerReferencePlugin to simplify usage
2. set moduleFederationInstance._options.remotes + internal to simplify usage

// webpack.config.js
// umd examples
new ModuleFederation({...}),
new UmdPlugin({
  remotes: {
    app2: "app2@http://xx.com/umd.js"
  }
})

// webpack.config.js
// DelegateModules examples
new ModuleFederation({...}),
new DelegateModules ({
  remotes: {
    app2: "app2@http://xx.com/custom.js"
  },
  // runtimeInject is a url, These remotes delegate to a module
  runtimeInject: "./src/delegate-modules.js",
  // runtimeInject is a config, These remotes will use runtime inject code
  runtimeInject: {...}
})

Connecting with you

Good Evening! Wanted to see if you'd like to chat on module-federation/core#444, maybe you can join us in the Module Federation Discord we just opened https://discord.com/channels/1055442562959290389/1060923175623462973