zhanghongen / universal-module-federation-plugin Goto Github PK

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.

support webpack-4

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

errors like $ReactRunTime$ has already been declared

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!)

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]

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__
}

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:

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: {...}
})

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

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..