Module federation support for CRA5 applications without ejecting and losing update support of react-scripts.

Fork of hasanayan/craco-module-federation, which appears to be unmaintained/abandoned.

• Webpack 5
• CRA 5
• CRACO 7
• Node 16+

This is a fork of the original craco-module-federation plugin. Use at your own risk. PRs are welcome; support will be limited.

npm install craco-mf --save-dev

1. Add the plugin into your craco.config.js

   const cracoModuleFederation = require('craco-mf');
   
   module.exports = {
       plugins: [{
           plugin: cracoModuleFederation,
           options: { useNamedChunkIds:true } // THIS LINE IS OPTIONAL
         },
       ]
   }

2. create a file named modulefederation.config.js in the project root. You should export ModuleFederationPlugin constructor options as json from this module. For example;

   const deps = require("./package.json").dependencies;
   
   module.exports = {
     name: "app1",
     exposes: {
       "./Button": "./src/Button",
     },
     remotes: {
       app2: "app2@http://localhost:3002/remoteEntry.js",
     },
     filename: "remoteEntry.js",
     shared: {
       ...deps,
       react: {
         singleton: true,
         requiredVersion: deps["react"],
       },
       "react-dom": {
         singleton: true,
         requiredVersion: deps["react-dom"],
       },
     },
   };

3. Update the scripts section of your package.json as follows:

     ...
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "craco:build": "craco build",
       "craco:start": "craco start",
       ...

There are two test apps in this repository inside test folder (app1 and app2). Install their dependencies on them using yarn (yarn install) and hit yarn start on both of them. When you navigate to app1 it should render the exported button from app2 that says hello from app2

Licensed under the MIT License, Copyright ©️ 2022 Brandon Faulkner. See LICENSE.md for more information.

Original author Hasan Ayan