How to use Webpack Module Federation plugin with create-react-app without ejecting

Question

Is there a way to use module federation using create-react-app without ejecting? I want to convert my existing react applications(created using CRA) to micro-frontends.

Answer 1

Answering because this question is top for Google searches CRA with Module Federation

Update 25 Jan 2022 - CRA 5 has been released previous answers are not relevant in 2022 as CRA 5 supports Webpack 5.

My GitHub template has been updated to CRA 5 just use that for a CRA Module Federation example.

I've left my answer for historical value

Update 17 Nov 2021 - based on this answer I've created a GitHub template to make it easier for anyone else trying to do module federation with CRA.

Try the craco-module-federation plugin for CRACO

Take a look at the craco-module-federation repo for an example of CRA working with Module Federation.

To support Module Federation you need the craco-module-federation CRACO plugin (or to write your own CRACO config) to overwrite CRA webpack config.

You also need to be running the alpha version of react-scripts, and update any dependencies.

craco-module-federation is a plugin for CRACO that does the heavy lifting required.

The steps for getting CRA and Module Federation working are:

Use Create React App 5 with webpack 5 support

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

More info here https://github.com/facebook/create-react-app/discussions/11278

For an existing app delete node_modules, and install the alpha version of react-scripts. Then resolve any dependencies issues.

Install CRACO

npm install @craco/craco --save

Change your package.json scripts to run craco:

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

Use CRACO config to overwrite webpack config

Either install the craco-module-federation plugin, or write your own CRACO config to overwrite webpack's config to add the ModuleFederationPlugin.

Add your Module Federation config

Either to modulefederation.config.js if your using the craco-module-federation plugin, or to craco.config.js if you configuring without the craco-module-federation plugin.

Be aware

• Create React App 5 with webpack 5 support is in Alpha, you may run into issues.

• craco-module-federation IS NOT PRODUCTION READY

Answer 2

react-scripts still uses webpack 4.x.x. You can track the migration here.

What you can do in the meantime is use CRACO, an amazing tool to set custom configurations on top of CRA's without ejecting.

Follow the instructions on how to set CRACO in your project, is fair simple. Then install webpack 5, after attempting yarn start or build you'll get a warning from react-script saying webpack 5 shouldn't be installed. A workaround, as they state, add SKIP_PREFLIGHT_CHECK=true to a .env file. This is a temporary fix while CRA's team upgrades, I strongly suggest you remove it later on. Keep using CRACO is totally fine though. Here's a sample of a basic .craco.js file:

const { ModuleFederationPlugin } = require("webpack").container;
const allDeps = require("../package.json").dependencies;

module.exports = ({ env }) => ({
  plugins: [
    {
      plugin: ModuleFederationPlugin,
      options: {
        shared: {
          ...allDeps,
          'styled-components': {
            singleton: true
          }
        }
      }
    }
  ],
});

And remember to change your package.json scripts to run craco:

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

You can even create a custom plugin, put it on top of CRA, and reuse it.