add module federation support

[hasanayan]

I re-enabled @raix's code to enable module-federation and added the necessary changes to the webpack config. Tested the changes by making the same modifications using craco in apps that both run as standalone or remote apps and it works fine.

With this PR, to enable Module Federation, you'll need a file named .modulefederationrc.js which exports ModuleFederationPlugin parameters as json.

const deps = require("./package.json").dependencies;

module.exports = {
  name: "my_app",
  exposes: {
    "./App": "./src/App",
  },
  filename: "remoteEntry.js",
  shared: {
    ///...
  }
}

in addition to that, including a mmodule federation file and setting EXTERNAL_TEMPLATE_REMOTES env var to 'true' includes ExternalTemplateRemotesPlugin into the config.

---

(if you want to help out on that, then checkout this branch - when checking of the cra project run yarn then create a provider and consumer app using yarn create-react-app and read the MF docs using docusaurus/docs yarn start :)

[hasanayan]

@raix I recreated the module federation PR but some of the checks are still missing. It seems build and lint pipelines work only on push, and integration tests work when the target branch of the PR is main. So everything seems fine here.

[hasanayan]

@raix are you happy with the current state of the PR? is there anytrhing else I should do?

[raix]

@hasanayan overall looks good, Thanks for picking up this task 👍

Ive asked the maintainer group if there were any objections for getting this in - so waiting for responses.

Only notes/thoughts I have is that I need to test/qa a bit, not sure if the template plug-in is needed for the initial pr (eg. We could also add the plugin for auto sharing of dependencies etc. Ideally with some sane defaults/without the need for configuration - but could go in later)

[hasanayan]

@raix you are welcome. Thanks for working hard on wp5 support and opening way for this.

it's an opt-in feature, however, If you decide that the template plugin should go, just let me know. Also, if you need any clarification (possibly on publicPath values I set) I'll be happy to help.

[raix]

@hasanayan for now the maintainer group decided to prioritize wp5 update as the 5.0 version, it's a large change to triage issues - module federation would go into a next minor release as it's not breaking anything eg. 5.1
(So positive response)

[shuttleriiiz]

I'm having the same issue with #9510 (comment).

yarn start stuck at "Starting the development server" when I expose a module, it works fine if I don't expose anything.

Interestingly, I don't have an issue if I turn off FAST_REFRESH

[hasanayan]

@shuttleriiiz it’s actually supposed to work even with fast refresh and we are using an almost identical config in development/production. I will look into it in the morning.

[shuttleriiiz]

@hasanayan I did some digging and found that there is a bug on react-refresh-webpack-plugin when using module federation. Apparently, they have fixed the bug on version 0.5.0-rc.1. Your PR works after I updated the plugin.

see: https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/434/files

[hasanayan]

thanks @shuttleriiiz , I opened another PR to fix react-refresh-webpack-plugin version: #11316

[hasanayan]

trying to sync with main branch messed this PR. I'll recreate this this evening

[raix]

@hasanayan not sure if you could do git revert c7c916e2b29ed1e953e2a26d472023020fce1d20 to add back the initial work or if that's only on my repo (eg. the documentaion md is missing from this pr. but was in the initial work)

[shuttleriiiz]

@hasanayan what's the current status of this PR?

[bmuenzenmeyer]

@hasanayan in testing this, I am seeing webpack errors when trying to process a CSS package that contains a url(...) reference to a relative file in node_modules.

Failed to compile.

HookWebpackError: Invalid URL
-- inner error --
TypeError [ERR_INVALID_URL]: Invalid URL

For example:

App.js

import `typeface-roboto`

typeface-roboto/index.css

/* roboto-100normal - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src:
    local('Roboto Thin '),
    local('Roboto-Thin'),
    url('./files/roboto-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
    url('./files/roboto-latin-100.woff') format('woff'); /* Modern Browsers */
}
...

This seems related to https://github.com/facebook/create-react-app/pull/11241/files#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697R327-R331

Commenting out that block seems to retain all intended and existing functionality, but I'd love more eyes or context - I don't dive into webpack too often.