zhanghongen / universal-module-federation-plugin Goto Github PK
View Code? Open in Web Editor NEWVersioned remote module manager based on npm and module-federation
Versioned remote module manager based on npm and module-federation
errors like
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
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.
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..
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]
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
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.
two ideas:
// 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: {...}
})
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!)
support webpack-4
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__
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.