feat: add moduleFederation option #938

brunos3d · 2022-12-14T23:53:58Z

Summary

This PR was created to add support for Module Federation it is originated from this issue: #926

It aims to add a new option to the loadabel babel-plugin called moduleFederation, it's a boolean option so we just need to set it to true to enable the support for Module Federation.

{
  "plugins": [
    ["@loadable/babel-plugin", { "moduleFederation": true }],
    // ...
  ]
  // ...
}

This PR also adds some JSDoc typedefs to the plugin, which will help users to understand the plugin better.

Test plan

To test it you can clone the sample project using this branch as base for the test

The branch with our samples fixed
https://github.com/brunos3d/loadable-module-federation-react-ssr/tree/demo-loadable-fix

The PR of the fixed branch to check the diff
brunos3d/loadable-module-federation-react-ssr#1

theKashey · 2022-12-15T04:14:36Z

packages/babel-plugin/src/index.js

-    })
-    return imports
-  }
+/**


The golden rule of development is to never refactor and change simultaneously.
Look like this file is not changed, however from the git point of view - everything changed.

I also cannot spot any change, but that does not mean there isn't any.

While I do appreciate typings and docs

please remove unrelated changes

Cool, thanks for the tip! Done 🚀

theKashey · 2022-12-15T04:17:21Z

packages/babel-plugin/src/properties/resolve.js

+        properties.some(
+          prop =>
+            prop.isObjectProperty() &&
+            prop.get('key').isIdentifier({ name: 'federated' }) &&


Not sure how this work and when it should be used.

Please keep in mind that in no circumstances we can use federated template on the client-side bundle - that will effectively disable code splitting.
Right now, there is a big probability that it will not happen.

Yeah, make sense, the idea now is to use moduleFederation: true option only on server-side compiler

theKashey · 2022-12-15T04:20:01Z

Per my understanding, the essence of this change is to disable code splitting for federation, not to "support" federation keeping the current constraints.

The question is how to ensure this configuration is used properly - only for server-side bundle.

ScriptedAlchemy · 2022-12-15T17:52:38Z

woud we set a DefinePlugin like 'process.isBrowser' and if its false webpack could remove the dead code? Not sure if that would work or not

brunos3d · 2022-12-15T17:53:38Z

@theKashey yeah, your right about using it only on server-side, I will work to make it work as expected, don't have ideas on how we can make it

brunos3d · 2022-12-15T17:55:41Z

@theKashey just removed every unrelated change and forced push it to avoid overwriting the git history, I also removed the federated option, now we need to figure out how to ensure that it uses require(ID) only on server-side

theKashey · 2022-12-15T23:30:10Z

👍 @brunos3d, now the change is short and sound.

Define Plugin stuff might now work, as long as in case of process.isBrowser is not defined it will be kept "as it", while we need condition to be removed to hide require from webpack.

What we can do - add a check for browser/clientside/webpack-target and ➡️ throw an error in case of misconfiguration.
So not fail the build, but fail the runtime.

That would put customers without tests into a little dangerous situation, so we might also not document new property for now

brunos3d · 2022-12-20T17:18:59Z

@theKashey just added the suggested warnings. As I'm not too used to babel/webpack plugins I will ask you for code suggestions to solve this issue without workarounds 😄

bwhitty · 2022-12-20T19:37:10Z

packages/babel-plugin/src/properties/resolve.js

+        // eslint-disable-next-line no-console
+        console.warn(
+          'It\'s recommended to use "isBrowser" global variable to detect the environment\n' +
+            'Try to add "webpack.DefinePlugin({ \'process.isBrowser\': true })" to your webpack config',
+        )


Is there something internal to a "client side" Webpack target that can be read automatically? For example, as a developer if I set target: "web" (the default) or another client-targetted value, then this plugin should probably just error out here (or have a "force" option to override).

Or does Webpack not provide a standard way to expose "is browser" and every webpack tool has to invent their own? (like here)

One can use package.json:browser field to detect browser target - https://github.com/theKashey/detect-node/blob/master/package.json#L6-L10
But this is a run-time operation.

These solutions only work during runtime, @theKashey do you know if webpack provides some context to babel during the compilation?

According to babel-loader source - no, it does not.

Hm, this begs the question then: can this be an argument to LoadablePlugin webpack plugin instead, and then read somehow by the Babel plugin? Is that possible?

That would alleviate most concerns of misuse, as it could be documented to just use this option for your client-side Webpack build, which is something already natural to loadable components.

With a Babel plugin option, users have to implement some logic to modify their Babel options dynamically based on whether it's being used by the Webpack server build or client build, which while not weird is an additional configuration workflow added to use loadable, and they also have to implement some DefinePlugin thing, which again is another workflow change.

No big deal, just wondering if that could simplify things

🤔 BINGO!
LoadablePlugin can automatically call DefinePlugin with the variables required. As webpack plugin is expected to be used only for client side it can secure dead code elimination (in production only) and other checks to guide proper configuration.

Awesome @theKashey! I will work on that here! 🚀

@theKashey added DefinePlugin to LoadablePlugin and updated the warning messages

bwhitty

Now that there's a webpack plugin integration, what's the purpose of the Babel plugin argument? Is there a use case for a standalone Babel build for Loadable without Webpack? If not, then it seems the Webpack plugin can be the singular configuration point.

I'm thinking that this federation config can now be set up in one place: the server-side Webpack configuration's LoadablePlugin. Like so:

// webpack.config.server.js

plugins: [
  new LoadablePlugin({
    serverSideModuleFederation: true
  }),
]

Then internally the plugin would set process.serverSideModuleFederation = true, and then @loadable/babel-plugin can just read that. There's no need to set up a separate config on the Babel plugin, as it's configured via Webpack.

bwhitty · 2022-12-22T18:28:28Z

packages/webpack-plugin/src/index.js

+    const defs = {
+      'process.isBrowser':
+        compiler.options.target === 'web' ||
+        compiler.options.target === undefined,
+    }


To go with my suggestion of adding a serverSideModuleFederation argument to the webpack plugin, if we do then this logic could throw an error for misconfiguration:

Suggested change

const defs = {

'process.isBrowser':

compiler.options.target === 'web' ||

compiler.options.target === undefined,

}

if (this.opts.serverSideModuleFederation === true &&

compiler.options.target === 'web' ||

compiler.options.target === undefined

) {

throw new Error(`Enabling server-side module federation support for a client-side Webpack target (${compiler.options.target}) is unnecessary and will effectively disable all code-splitting.`

}

bwhitty · 2022-12-22T18:30:44Z

packages/webpack-plugin/src/index.js

+    new ((webpack && webpack.DefinePlugin) || require('webpack').DefinePlugin)(
+      defs,
+    ).apply(compiler)


with my suggestion this would become

Suggested change

new ((webpack && webpack.DefinePlugin) || require('webpack').DefinePlugin)(

defs,

).apply(compiler)

if (this.opts.serverSideModuleFederation) {

// eslint-disable-next-line global-require

new ((webpack && webpack.DefinePlugin) || require('webpack').DefinePlugin)({

serverSideModuleFederation: true

}).apply(compiler)

}

Nice job @bwhitty, I will test it here!! 🚀

@theKashey I am not being able to get the value of serverSideModuleFederation passed to DefinePlugin during the execution of the resolveProperty function, do you have some idea on how can I access this value?
I already tried with:

process.serverSideModuleFederation

global.serverSideModuleFederation

only serverSideModuleFederation

@ScriptedAlchemy I got these snippets from NodeFederationPlugin do you have some idea why I can't get the serverSideModuleFederation during babel compilation execution?

bwhitty · 2022-12-22T20:08:51Z

packages/webpack-plugin/src/index.js

+      (this.opts.serverSideModuleFederation === true &&
+        compiler.options.target === 'web') ||
+      compiler.options.target === undefined


these parens make this logic wrong I think? should be

Suggested change

(this.opts.serverSideModuleFederation === true &&

compiler.options.target === 'web') ||

compiler.options.target === undefined

this.opts.serverSideModuleFederation === true &&

(compiler.options.target === 'web' || compiler.options.target === undefined)

Yeah, it was not correct, just fixed, but it was not the problem

brunos3d · 2022-12-23T20:01:47Z

Hey, folks as we didn't find a proper way to pass the serverSideModuleFederation option from the LoadablePlugin (webpack) to babel, I just decide to inject the value to process using directly, as it will be used only during the compilation time, I can't see any problems on that solution. Excited to see your suggestions about it
cc: @theKashey @bwhitty @ScriptedAlchemy

ScriptedAlchemy · 2022-12-27T22:12:54Z

@theKashey any input here - would be great to move this forwards if we can

theKashey · 2022-12-28T22:42:14Z

packages/webpack-plugin/src/index.js

+    }
+
+    if (this.opts.serverSideModuleFederation) {
+      Object.defineProperty(process, 'serverSideModuleFederation', {


👍 that's a fancy way to "teleport" settings.
However, the particular way you did it will break some assumptions of node creating a hard to understand "gap" for a few (rare) users of thread-loader or similar stuff.

Ease to fix. Just store what is required in process.env - a special place designed for this.

theKashey · 2022-12-28T22:49:17Z

Before we processed with the merge, I want to ask one question - Where is the best place to handle this stuff?
Having the problem of "federation gap", ie one's inability to simply require yet undefined stuff, there are two options:

make a sync require in the loadable (this PR). That would solve problem only for loadable and in a very specific way.
preload all known components in the loadable (not which are not currently tracked)
preload all federated sources via ModuleFederationPlugin. Ie go via all known remotes and import them before starting a server

fivethreeo · 2023-01-07T00:15:17Z

This does module federation for all modules. Should we do it as a option on loadable call?

brunos3d · 2023-01-09T12:22:10Z

This does module federation for all modules. Should we do it as a option on loadable call?

It does, but should be only used on the server-side, in the past I had put it as an option for the loadable function, it was a option called 'federated'. But the problem is, MF plugin changes the way imports happen even non-federated containers get these __webpack_modules__[moduleId] is not a function errors

theKashey · 2023-01-09T22:23:53Z

So that is the question: if one technology should adapt to support another technology - could there be a third technology to change as well?
For example, @fivethreeo is working on React 18 update with a "proper suspense" on the server side - #923 - which technically can allow us to use plain import without require.resolve

ScriptedAlchemy · 2023-01-10T18:09:07Z

Proper suspense would work for everything moving forwards, but we would still need a solve for async-node target / lower react versions :P

brunos3d · 2023-01-10T20:59:21Z

@theKashey @ScriptedAlchemy An issue we're facing right now is when we try to consume a container from some remote using loadable and the remote is down, MF tries to generate a fake remote and a fake container, but loadable throws multiple errors saying that the provided module is not a react component (cause it's an empty object), an a bunch of other errors.

By now I'm using the following workaround for local linked and patched @loadable/component

// on InnerLoadable component at the top of the "render" function

if (result && typeof result === 'object' && Object.keys(result).length === 0) {
  console.log('probably the fake container')
  result = `<span>failed to load remote container</span>`
}
// ...

It checks if the result (the loaded/resolved module) is not undefined and verifies if its an empty object (the fake container generated by MF) then it replaces it with the warning message

theKashey · 2023-01-11T09:30:24Z

There is a resolveComponent option you can provide to loadable, and the one capable to check imported object and throw and error (to emulate load failure, as it is a failure). Wondering if can call another check just after it and throw an error if component was resolved to nothing. That should trigger "normal" error branches (fallback or ErrorBoundary), not break createElement.

A little different issue, but quite related

ScriptedAlchemy · 2023-01-13T05:15:41Z

@brunos3d i might be able to help with the fake remote which returns null. We could modify node federation or allow it to throw a rejection. Generally I avoid that since throwing errors in sync imported components can cause webpack runtime to crash

ranshamay · 2023-02-07T17:37:35Z

great work!
@gregberge any plan to merge it soon? :)

brunos3d · 2023-02-11T16:00:45Z

@ranshamay Probably we will not merge this PR, but I'm working on some stuff:

An article (WIP)
These loadable adapters
This repo with samples on how to use @mf/loadable-adapters

I will post the updates here soon as I finish everything, but its also good to keep an eye on https://valor-software.com/articles too 🚀

oguzhanaslan · 2023-05-23T10:00:49Z

@brunos3d I saw this example that you prepared: https://github.com/module-federation/module-federation-examples/tree/88c252fbc3fdc3262e0d8e3d03a945276bd0a165/loadable-react-16

In my server-side micro frontend application, I will use module federation to combine shared libraries (react, react-dom, axios). Is it problematic to use this? I am eagerly waiting for your answer.

stale · 2023-08-13T01:46:34Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

brunos3d mentioned this pull request Dec 14, 2022

Support Module Federation + React SSR #926

Closed

theKashey reviewed Dec 15, 2022

View reviewed changes

brunos3d requested a review from theKashey December 15, 2022 17:43

feat: add new moduleFederation option

6c24c14

brunos3d force-pushed the feat/add-support-to-module-federation branch from 1c056ca to 6c24c14 Compare December 15, 2022 17:50

brunos3d added 2 commits December 20, 2022 10:40

feat: add check to verify if process.isBrowser is defined as false

bf7dda7

feat: add warnings to avoid misconfiguration

f1b058c

feat: update warning messages

c6939b8

bwhitty reviewed Dec 20, 2022

View reviewed changes

brunos3d added 2 commits December 22, 2022 14:58

feat: use DefinePlugin to declare isBrowser at process

ae04c10

feat: update warning messages

be7f129

brunos3d requested review from bwhitty and removed request for theKashey December 22, 2022 18:00

feat: remove unecessary warning

14cd316

bwhitty reviewed Dec 22, 2022

View reviewed changes

feat: use unified option structure

50d8406

bwhitty reviewed Dec 22, 2022

View reviewed changes

brunos3d added 2 commits December 22, 2022 17:17

fix: solve boolean logic error

66e6786

fix: force injection of serverSideModuleFederation option

90ced6f

fix: remove unused variable

36158cc

fix: remove wrong condition and error

3f582c9

theKashey reviewed Dec 28, 2022

View reviewed changes

theKashey approved these changes Dec 28, 2022

View reviewed changes

feat: move serverSideFederation option to process.env

3b2c37d

theKashey mentioned this pull request Dec 31, 2022

Support async-node and Module Federation #939

Closed

theKashey mentioned this pull request Jan 11, 2023

Thread loading of undefined as loading error #945

Closed

stale bot added the wontfix label Aug 13, 2023

feat: add moduleFederation option #938

Are you sure you want to change the base?

feat: add moduleFederation option #938

Conversation

brunos3d commented Dec 14, 2022 • edited Loading

Summary

Test plan

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

theKashey commented Dec 15, 2022

ScriptedAlchemy commented Dec 15, 2022

brunos3d commented Dec 15, 2022

brunos3d commented Dec 15, 2022

theKashey commented Dec 15, 2022 • edited Loading

brunos3d commented Dec 20, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bwhitty left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brunos3d commented Dec 23, 2022

ScriptedAlchemy commented Dec 27, 2022

Choose a reason for hiding this comment

theKashey commented Dec 28, 2022

fivethreeo commented Jan 7, 2023

brunos3d commented Jan 9, 2023

theKashey commented Jan 9, 2023

ScriptedAlchemy commented Jan 10, 2023

brunos3d commented Jan 10, 2023

theKashey commented Jan 11, 2023

ScriptedAlchemy commented Jan 13, 2023

ranshamay commented Feb 7, 2023

brunos3d commented Feb 11, 2023

oguzhanaslan commented May 23, 2023

stale bot commented Aug 13, 2023

brunos3d commented Dec 14, 2022 •

edited

Loading

theKashey commented Dec 15, 2022 •

edited

Loading

bwhitty left a comment •

edited

Loading