question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

add a module "magic comment" to force federated import

See original GitHub issue

Feature 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:closed
  • Created 2 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
AlonMeytalViacommented, Jan 11, 2022

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

0reactions
AlonMeytalViacommented, Mar 23, 2022

@alessioerosferri using the code in the example @sokra provided.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use Webpack's new “magic comment” feature with ...
Recently I wrote about how to use webpack-flush-chunks to cross-reference moduleIds flushed from react-universal-component or react-loadable ...
Read more >
JS Module Federation - here is what you need to know about it ...
What is Module Federation The problem Bundling JavaScript files for client-side consumption has traditionally been a huge pain.
Read more >
All things Webpack Module Federation with the Creator himself
We're honored to have Zack Jackson on the Nx Show, the creator of Webpack Module Federation ! Join us for a deep dive...
Read more >
Module Federation - webpack
ContainerReferencePlugin (low level). This plugin adds specific references to containers as externals and allows to import remote modules from these containers.
Read more >
Module Federation Shared Services - angular - Stack Overflow
json projects/ shell/ src/app/ app.module ; import {GlobalService} ; import { Injectable } ; const ModuleFederationPlugin ; const ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found