Nonvoluntary Professional Mangling

    craco-module-federation

    1.1.0 • Public • Published

    craco-module-federation

    Note

    THIS IS NOT PRODUCTION READY Webpack 5 support of CRA is still in its alpha phase and there might be breaking changes in either CRA5 or this plugin in the future.

    Add module-federation support to your CRA5 project without ejecting and losing update support of react-scripts

    Install

    npm install craco-module-federation --save-dev
    

    Usage

    1. Add the plugin into your craco.config.js;
    cracoModuleFederation = require('craco-module-federation');
    
    module.exports = {
        plugins: [{
            plugin: cracoModuleFederation,
            options: { useNamedChunkIds:true } //THIS LINE IS OPTIONAL
          },
        ]
    }
    
    1. 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;
    
    console.log(process.env.ROOT_PATH_MODE);
    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"],
        },
      },
    };
    
    
    1. 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",
        ...
    

    Testing the plugin locally

    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

    License

    Licensed under the MIT License, Copyright ©️ 2021 Hasan Ayan. See LICENSE.md for more information.

    Install

    npm i craco-module-federation

    DownloadsWeekly Downloads

    15,117

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    970 kB

    Total Files

    49

    Last publish

    Collaborators

    • hasanayan