craco-module-federation.js

// const webpack = require('webpack');
const paths = require('react-scripts/config/paths');

const getModuleFederationConfigPath = (additionalPaths = []) => {
    const path = require('node:path');
    const fs = require('node:fs');
    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

    const moduleFederationConfigFiles = [
        'modulefederation.config.js',
        ...additionalPaths,
    ];
    return moduleFederationConfigFiles
        .map(resolveApp)
        .filter(fs.existsSync)
        .shift();
};

module.exports = {
    overrideWebpackConfig: ({webpackConfig, pluginOptions}) => {
        const moduleFederationConfigPath = getModuleFederationConfigPath();

        if (moduleFederationConfigPath) {
            webpackConfig.output.publicPath = 'auto';

            if (pluginOptions?.useNamedChunkIds) {
                webpackConfig.optimization.chunkIds = 'named';
            }

            const htmlWebpackPlugin = webpackConfig.plugins.find(
                plugin => plugin.constructor.name === 'HtmlWebpackPlugin'
            );

            const myModule = require(moduleFederationConfigPath);

            htmlWebpackPlugin.userOptions = {
                ...htmlWebpackPlugin.userOptions,
                publicPath: paths.publicUrlOrPath,
                excludeChunks: [myModule.name],
            };

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

            webpackConfig.plugins = [
                ...webpackConfig.plugins,
                new ModuleFederationPlugin(myModule),
            ];

            // webpackConfig.module = {
            //   ...webpackConfig.module,
            //   generator: {
            //     "asset/resource": {
            //       publicPath: paths.publicUrlOrPath,
            //     },
            //   },
            // };
        }
        return webpackConfig;
    },
    overrideDevServerConfig: ({devServerConfig}) => {
        devServerConfig.headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': '*',
            'Access-Control-Allow-Headers': '*',
        };

        return devServerConfig;
    },
};