Create-react-app: 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 (https://github.com/facebook/create-react-app/issues/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 https://github.com/facebook/create-react-app/issues/9678 that "Webpack 5 is probably landing in [email protected]. 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?

[malyw]

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?