add a module "magic comment" to force federated import
See original GitHub issueFeature request
Add a “magic comment” (see here https://webpack.js.org/api/module-methods/#magic-comments) to help Webpack understand imported module is federated.
What is the expected behavior?
today, it seems like federated module have to be imported explicitly, so that the transpiled import code would look like this:
(wrapper by React.lazy()
)
react__WEBPACK_IMPORTED_MODULE_0___default().lazy(() => __webpack_require__.e(/*! import() */ "webpack_container_remote_<module name>").then(__webpack_require__.t.bind(__webpack_require__, /*! <module name> */ "webpack/container/remote/<module name>", 23)))
instead of
react__WEBPACK_IMPORTED_MODULE_0___default().lazy(() => __webpack_require__("./src/blocks lazy recursive")(widgetName));
When adding the “magic comment” /* webpackFederatedModule: true */
inside an import
statement, Webpack will compile it as if the module was recognized by the ModuleFederationPlugin
(resulting in the first example above, rather than the second).
What is motivation or use case for adding/changing the behavior? Allow dynamically importing modules using module federation for use-cases such as dynamic dashboard/plugin systems.
How should this be implemented in your opinion? again - magic comment would be best (least amount of footprint in the code). a different import function would also work.
Are you willing to work on this yourself? I wish. Maybe with some guidance from a senior contributor.
Issue Analytics
- State:
- Created 2 years ago
- Comments:12 (6 by maintainers)
Top GitHub Comments
@sokra thanks for the input. put I want the “opposite”, I want to use a dynamic remote, not a dynamic component. @alexander-akait you asked for an example, our use case is as follows: We have a dashboard of widgets. Each widget will developed by a different team. We want to allow the team to “subscribe” with their remote to a single source, and pull both remotes and the widgets inside of them dynamically based on user needs.
@alessioerosferri using the code in the example @sokra provided.