Webpack 5 support (module federation)

[bradydowling]

Is your proposal related to a problem?

It would be great to be able to use federated modules in Webpack with a CRA application.

Describe the solution you'd like

Provide support for Webpack 5 by upgrading the default Webpack version to 5. This was previously requested (#6081) but closed because Webpack 5 wasn't in beta at the time. It is now in beta and has had several releases.

Describe alternatives you've considered

You could also allow an opt-in to using Webpack 5 (just like Next.js does) when users initially run CRA from the command-line.

[bradydowling]

For those following this issue, @petetnt mentioned in #9678 that "Webpack 5 is probably landing in CRA@4.1. if all the bugs and issues are fixed before that." Not sure what the typical release schedule is for CRA, I'm guessing there's info about that somewhere that I just haven't found yet.

[raix]

4.1 was mentioned but it's not assigned to the milestone yet - but I guess the big question would be how to configure the modules for module federation in CRA?

[shospodarets]

Webpack 5 is released https://webpack.js.org/blog/2020-10-10-webpack-5-release/

[malcolm-kee]

To provide more context to the discussion (since module federation is new, so I believe not everyone know what it means), I think module federation support can be further broken down into two parts:

• consuming federated modules
• exposing modules to be consumed remotely

Having both would be ideal, but support for only one is better than none.

[malcolm-kee]

Also, I'm not very optimistic module federation will be supported by CRA, because CRA guiding principle has been "rather sacrifice functionality than introducing configuration". Due to the fact that module federation requires configuration (there is no sensible default) and no existing configuration files (e.g. jsconfig.json / tsconfig.json) supports it yet, I can't see anyway module federation can land in CRA in near future.

A more probable direction will be CRA supports webpack 5, and those of us need module federation will fork it and introducing our own configuration convention.

[dantman]

Due to the fact that module federation requires configuration (there is no sensible default) and no existing configuration files (e.g. jsconfig.json / tsconfig.json) supports it yet, I can't see anyway module federation can land in CRA in near future.

I could see it being possible but in a limited way. Not every part of CRA uses a standard config file, e.g. the "proxy" and src/setupProxy.js are wholly a CRA thing.

Federated module consumption would probably require federated modules to conform to a CRA specified convention. So only a minimal amount of "configuration" is necessary, e.g. a simple declaration in package.json of what federated module libraries there are to import.

As for exposing federated modules. If module federation is heavy CRA might not offer it; but if it's light a new CRA version (probably 5+ not 4) might just always expose its build in a way that can be consumed according to CRA's conventions.

Also if the other issue(s) asking for a way to have multiple entrypoints are accepted I could also see CRA internally using module federation.

[malcolm-kee]

I could see it being possible but in a limited way. Not every part of CRA uses a standard config file, e.g. the "proxy" and src/setupProxy.js are wholly a CRA thing.

Good point 👍

Also if the other issue(s) asking for a way to have multiple entrypoints are accepted I could also see CRA internally using module federation.

Do you mean this issue? That's a long thread, but sorry I can't find any conclusion on that thread that states multiple entrypoints will be supported.

---

To clarify I will be happy if CRA supports module federation out-out-the-box, but based on my personal observations, CRA has been fairly reserved about new features except when those are officially recommended tools by React (e.g. Fast Refresh, JSX Transform etc.) Also since module federation is new and other more customizable tools (e.g. NextJS) are not supporting module federation yet, I'm not optimistic with CRA supporting this soon.

Anyway, I hope I am wrong 😆

[raix]

Atm. we are testing our own "CRA" compatible build (written in typescript using wp5) adding the ability to configure using an mfconfig.json or for advanced usage mfconfig.js - it's basically just providing the FederatedModuleOptions for now.
Because other systems should also provide typings and an "offline" version / fallback we are considering if part of the configuration could be shipped as part of the provider package.

... but not sure if we could have a mfconfig-experimental.js config file in CRA to get started gathering feedback to figure out where this will take us?

[AvishekNath]

Any update on Module Federation support on CRA?

[kumarlachhani]

Any update on Module Federation support on CRA?

Yes. Pls. I am waiting for the same as well.

[raix]

CRA is not webpack 5 yet - also the webpack-dev-server doesn't support module federation yet.

[kumarldh]

Will eject-ing the app and owning the configuration help the cause? I understand CRA will always want to be 0 configuration app. Module federation will require customisations defeating the goal... 😕

[kumarlachhani]

Will eject-ing the app and owning the configuration help the cause? I understand CRA will always want to be 0 configuration app. Module federation will require customisations defeating the goal... 😕

I have tried to fork the create-react-app for my custom-react-scripts version so that it can be updated from upstream i.e. CRA for future updates but then due to breaking changes of WebPack 5, ejecting is the only option we have right now..

[OriAmir]

Does any news relate to the update of CRA to working with webpack 5 ?

Do you think that starting a CRA project with eject and module federation for now and updating in the future will be an easier thing?

[raix]

(I reverted experimental mf support in the wp5 update pr for now, had an issue with chunk splitting - but should be fairly easy to add - for now first step is to update)

[OriAmir]

@raix can't understand you.. you say that as first step module federation will not be part of the update but it's will be in the future ?

When actually CRA will realise version that includes the support in webpack 5?

So if I want to use that now you advice me to eject or to wait to CRA with webpack 5? ( should the eject will do problems later because of CRA actually use webpack 4....and may be conflicts ?)

Thanks!!!!

[raix]

What I'm saying is that there is a reverted commit showing how little effort adding support would be/an example. It's reverted for two reasons 1. There was an issue with split chunks likely 2. I'm not sure if it would be accepted, so rather prioritize wp5.

[coderbit-net]

Anyone with a positive experience of ejecting CRA and implementing module federation?

[kumarldh]

I didn't eject a CRA, however I started adding my own webpack configs and modified package.json to run my build scripts, it was in Feb. It worked for me for a POC

[OriAmir]

in addition to @AlexCoderBit question: is it possible at all to eject and to config or we will have many conflicts between webpack 4 to 5?
I think it's will take time until CRA will integrate the module federation inside, basically, if CRA will support the webpack 5 itself I think that we will have easier life..

[hasanayan]

@raix remoteEntry files load fine without CORS. However, if a css file from a remote app requires a font file, the request for that will be blocked by CORS protection.

the problem you are facing is probably due to wrong publicPath value in webpack config. For module federation to work, it should be 'auto'.

However if you change it as 'auto', we lose ability to set custom publicPath (using PUBLIC_PATH env var or homepage field of package.json), to fix that you need to explicitly set publicPath property of HtmlWebpackPlugin to paths.publicUrlOrPath

I would be happy to explain you better on a call, if necessary.

---

I might have created an easier way for QA. Here is the recipe;

clone this: https://github.com/hasanayan/craco-module-federation

index.js includes modifications to webpackConfig and devServerConfig so that module federation works.

To test things, just. hit yarn install on the test apps and start them using yarn start (see README)

FAST_REFRESH also works (changes in remote module requires manual reload, however, when you run the apps in standalone mode it works)

[raix]

@hasanayan yeah - my setup is a bit tricky compared (but easy for development I guess) - I'll look into the public path thing - I did get it working, but there is one place where it needs to be removed (as it will default back to window.location - just thought it was already in there, would be in the wds config as I remember) - we can have a call to figure out the details maybe Sunday afternoon?

[hasanayan]

@raix Sunday afternoon works for me. Followed you on twitter, we can schedule a call there

[OriAmir]

Hi @raix @hasanayan Any news related to that? I want to create a new micro-fronted project with CRA but I see that it's still not part of CRA , any suggestions?
tnx!

[MetaMmodern]

Hi @raix @hasanayan Any news related to that? I want to create a new micro-fronted project with CRA but I see that it's still not part of CRA , any suggestions?
tnx!

Try webpack)))

[OriAmir]

webpack

I can config alone the webpack but I really want to avoid that, I see some solutions using CRACO but not sure..

[trystan2k]

Hi @raix @hasanayan Any news related to that? I want to create a new micro-fronted project with CRA but I see that it's still not part of CRA , any suggestions? tnx!

You can use craco (https://github.com/gsoft-inc/craco) and craco module federation plugin (https://github.com/gsoft-inc/craco) and adding Webpack 5 as a dependency of the project generated by CRA

[raix]

There is an open pr for adding it - it's likely to go into v5.1

[OriAmir]

@raix tnx , how long do you think it's will take until it's will merge?

@trystan2k Yeah I see that , I fave without craco , the q how hard it's will be to change that after it's will be officially part of CRA ?

[trystan2k]

@raix tnx , how long do you think it's will take until it's will merge?

@trystan2k Yeah I see that , I fave without craco , the q how hard it's will be to change that after it's will be officially part of CRA ?

I have configured an app with Module Federation, using craco as I said, and I think the changes won't be too much.

I believe you will need only to remove craco.config.js and move what you will have in the modulefederation.config.js to the file Webpack defines. The changes are quite small.

I have an example in my GH that you can look and see: https://github.com/trystan2k/webpack-module-federation-example/tree/lerna-yarn-cra-monorepo

[OriAmir]

@trystan2k thanks for the dtail answer !
I see your great example and have some q:

yarn is also important as we are using a CRA beta version with CRACO version that does not support Webpack 4 and we need to use Yarn resolutions feature to force installation of newer dependencies.

why do we need to use CRA version 5 and we cant use 4 ?
what do you mean CRACO not support webpack 4 ? I see you install official version of craco ( not beta/next)

[trystan2k]

@OriAmir

@trystan2k thanks for the dtail answer ! I see your great example and have some q:

yarn is also important as we are using a CRA beta version with CRACO version that does not support Webpack 4 and we need to use Yarn resolutions feature to force installation of newer dependencies.

I used CRA beta version to not need to add Webpack directly. Since CRA 5 is almost been shipped, I believe using the beta version will make the transition easier in the future to the stable version.
I think this comment is not valid anymore. In my work project I am not using Yarn (due to some internal policies) but NPM 6 and it is working fine

why do we need to use CRA version 5 and we cant use 4 ? what do you mean CRACO not support webpack 4 ? I see you install official version of craco ( not beta/next)

It is a type. I wanted to say that CRACO does not support Webpack 5. But using CRA beta version, it works without problem (no need to add resolutions or use Yarn)

[OriAmir]

@trystan2k got it , tnx again for the answer !
The problem that this approach sounds me too risky for production , but for now it's also sounds me the only option to use CRA with module federation ... it's not really looks like it's gonna to be inside react script so soon .
Any advice ? 🙏🏽

[trystan2k]

@trystan2k got it , tnx again for the answer ! The problem that this approach sounds me too risky for production , but for now it's also sounds me the only option to use CRA with module federation ... it's not really looks like it's gonna to be inside react script so soon . Any advice ? 🙏🏽

I think it is pretty stable. I have been using this way almost 1 month and haven't had any problem. As I said, the changes are quite small, and mostly at development time, so it shouldn't be any problem in production, IMO

[hasanayan]

Everyone, I have created craco plugin that enables module federation using the latest alpha release of react-scripts.
It seems to work well for all the scenarios we use in our company. You can have a look at the test folder in the repo to see how it's used.

https://github.com/hasanayan/craco-module-federation

[OriAmir]

thanks @hasanayan @trystan2k for the information and examples , I will give that a try!

Did CRA version 5.0.0-next.47 is Alpha or beta release actually? do they have some expected date release for 5.0.0?

[tuphan-dn]

Everyone, I have created craco plugin that enables module federation using the latest alpha release of react-scripts. It seems to work well for all the scenarios we use in our company. You can have a look at the test folder in the repo to see how it's used.

https://github.com/hasanayan/craco-module-federation

It works perfectly. I've tested it on

"react": "^17.0.2"
"react-dom": "^17.0.2",
"react-scripts": "5.0.0-next.47",

and no errors. @hasanayan you save my day, really appreciate that.

[OriAmir]

@hasanayan I work with your example and it's working well, thanks!

I have 2 questions relate:

1. What did you try to achieve with the index.js file found in the root? I see you override some webpack config, maybe you can explain what exactly are you trying to do there?
2. I get some ESLint error inside craco.config.js and inside modulefederation.config.js or in any other JS file that I'm creating. do you face that issue ? I see it's not happening when opening a standalone projects, only when opening all of them together...

Parsing error: Cannot find module 'babel-preset-react-app/prod'
Require stack:
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/core/lib/config/files/plugins.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/core/lib/config/files/index.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/core/lib/index.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/eslint-parser/lib/client.cjs
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@babel/eslint-parser/lib/index.cjs
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/@eslint/eslintrc/lib/index.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/eslint/lib/cli-engine/cli-engine.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/eslint/lib/cli-engine/index.js
- /home/ori/Desktop/craco-module-federation/test/app2/node_modules/eslint/lib/api.js
- /home/ori/.vscode/extensions/dbaeumer.vscode-eslint-2.2.1/server/out/eslintServer.jseslint

thanks again!

[SlowBurner]

@OriAmir

1. What did you try to achieve with the index.js file found in the root? I see you override some webpack config, maybe you can explain what exactly are you trying to do there?

I think the index.js file is just to export the actual plugin (craco-module-federation) @hasanayan created in a reusable way. It is copied to each example CRA project when you start up the apps. I don't thing it is significant, other than, that it is the actual craco plugin code you need for CRA w/ Webpack Module Federation support.

I am not sure on 2. I hit ESLint errors also, but I don't remember hitting that one. I did simplify my ESLint rules at some point and I had to play with different versions of ESLint and ESLint extensions.

I used the craco-module-federation code to create a POC at my current company with great success. I got 4 CRA applications working together. The POC also included loading remote components and sharing vendor code dynamically between unknown remotes (like this example dynamic-remotes). @hasanayan, for the dynamic-remotes use case, I had to use eslint-disable-next-line no-undef in some place where I needed to use __webpack_share_scopes__ and __webpack_init_sharing__. Without eslint-disable-next-line no-undef, the production build would fail.

[koengsen]

Did someone experienced a

Failed to compile.

Cannot read properties of undefined (reading 'includes')

error Command failed with exit code 1.

error when using the craco-module-federation @hasanayan created?
It's coming up when integrating the modulefederation.config.js file into the craco.config.js

[alexmcmanus]

I have this working well with craco-module-federation, just one minor issue with the dev servers. The container is running on port 3000, the microfrontend on port 3010. I get repeated WebSocketClient.js:13 WebSocket connection to 'wss://localhost:3010/ws' failed errors in the browser console with no further details. I assume this is to support hot-reloading. It works as expected if I open the microfrontend directly in the browser.

Any ideas why this might be failing, or what I can do about it? The microfrontend server is clearly listening on port 3010, and I thought it was OK to create a WS connection in the browser to a different port.

[VicJerUk]

Since the new CRA now supports the Webpack 5 is this issue going to get some traction and module federation access enabled or do we still have to resolve to that 3rd party plugins?

[IgorStetsiuk]

Hey guys! Building microfrontends using Module Federation and it’s awesome 🔥!

I have one question regarding Hot Module Replacement. Seems it doesn’t work properly. I used CRA with react-scripts v5.0.0 And CRACO to override the webpack config in order to set up my module federation and that’s everything is fine (build, test, start commands)… Thought when it comes to the local development I need manually hard reload pages to reflect changes, and it’s really inconvenient.

I have found some plugins that could solve the issue partially (https://www.npmjs.com/package/@module-federation/fmr) but that is not what I’d expect to see, as per my understanding this plugin makes hard page reload which is not what would be the best developer experience. I’ve also found two similar issues on webpack webpack/webpack#11240 & webpack/webpack-dev-server#2692 that are both about the same issue I've faced

Asking maybe someone has already managed to solve such an issue and make hot reload run smoothly and work properly with the latest CRA?

Please give me a suggestion what would be the best solution I can use in order to resolve that? Thank you 🙏!

[amiroous]

Is there any timeframe on when the module federation within CRA will be prod ready? I rather not to use CRACO as is not prod ready yet.
Thanks

[raspy8766]

@amiroous we were in the same predicament with CRACO, so we decided to create a PR to add Webpack Module Federation support. Just using the fork for now in the meantime.

[danielweil]

@amiroous we were in the same predicament with CRACO, so we decided to create a PR to add Webpack Module Federation support. Just using the fork for now in the meantime.

Hey, thanks for the fork and PR.
I was wondering if there is any preview for it to be merged.

Thanks!

[bfaulk96]

This isn't the answer you guys are looking for, so I apologize ahead of time for that.

But for anyone who was using craco-module-federation, upon updating to CRACO 7, you would notice that the plugin no longer works as intended. Since it appears that repo is not unmaintained/abandoned, I created a fork https://github.com/bfaulk96/craco-mf that works with CRA 5, Webpack 5, and CRACO 7.

[xtrinch]

I prepared a slightly more extensive example repo for using the craco-mf plugin that @bfaulk96 prepared, it also includes full cross-module typescript support, HMR works normally and it includes some sample react-router-dom routing. https://github.com/xtrinch/create-react-app-module-federation-example