-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Webpack 5 support (module federation) #9510
Comments
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? |
Webpack 5 is released https://webpack.js.org/blog/2020-10-10-webpack-5-release/ |
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:
Having both would be ideal, but support for only one is better than none. |
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. 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. |
I could see it being possible but in a limited way. Not every part of CRA uses a standard config file, e.g. the 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. |
Good point 👍
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 😆 |
Atm. we are testing our own "CRA" compatible build (written in typescript using wp5) adding the ability to configure using an ... but not sure if we could have a |
Any update on Module Federation support on CRA? |
Yes. Pls. I am waiting for the same as well. |
CRA is not webpack 5 yet - also the webpack-dev-server doesn't support module federation yet. |
Will |
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.. |
Does any news relate to the update of Do you think that starting a |
(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) |
@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!!!! |
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. |
Anyone with a positive experience of ejecting CRA and implementing module federation? |
I didn't |
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? |
@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) |
@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? |
@raix Sunday afternoon works for me. Followed you on twitter, we can schedule a call there |
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? |
Try webpack))) |
I can config alone the webpack but I really want to avoid that, I see some solutions using CRACO but not sure.. |
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 |
There is an open pr for adding it - it's likely to go into v5.1 |
@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 |
@trystan2k thanks for the dtail answer !
why do we need to use CRA version 5 and we cant use 4 ? |
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.
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) |
@trystan2k got it , tnx again for the answer ! |
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 |
Everyone, I have created craco plugin that enables module federation using the latest alpha release of react-scripts. |
thanks @hasanayan @trystan2k for the information and examples , I will give that a try! Did CRA version |
It works perfectly. I've tested it on
and no errors. @hasanayan you save my day, really appreciate that. |
@hasanayan I work with your example and it's working well, thanks! I have 2 questions relate:
thanks again! |
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 |
Did someone experienced a
error when using the craco-module-federation @hasanayan created? |
I have this working well with 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. |
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? |
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 🙏! |
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. |
@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. Thanks! |
This isn't the answer you guys are looking for, so I apologize ahead of time for that. But for anyone who was using |
I prepared a slightly more extensive example repo for using the |
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.
The text was updated successfully, but these errors were encountered: