create-react-app + react-app-rewired + single-spa

config-overrides.js

module.exports = {
  webpack(config, env) {
    config.entry = './src/single-spa-entry.js';
    config.output = {
      ...config.output,
      filename: 'project-name.js',
      libraryTarget: 'system',
    }
    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'HtmlWebpackPlugin' && plugin.constructor.name !== 'MiniCssExtractPlugin')
    delete config.optimization
    return config;
  },
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.disableHostCheck = true
      config.headers = config.headers || {}
      config.headers['Access-Control-Allow-Origin'] = '*'
      return config
    }
  }
}

Instructions.md

This Gist works for CRA 3. For CRA 4, you can try community maintained craco plugin for converting to a single-spa application at https://github.com/hasanayan/craco-plugin-single-spa-application (thanks @hasanayan):

1. Install react-app-rewired, as explained in https://github.com/timarney/react-app-rewired.
2. Create a file in src called single-spa-entry.js (or tsx for typescript)
3. Modify config-overrides.js, as shown in the config-overrides.js file provided in this gist.
4. (Optional) remove src/main.js, since single-spa-entry is the new entry
5. (Optional) remove public/index.html, since single-spa applications share a single html file, instead of one html file per project.

I could config my cra with rewired with this configuration

the publicPath property loaded my assets correctly in the root frontend

const ASSET_PATH = process.env.ASSET_PATH || 'http://localhost:3000/';

module.exports = {
  webpack(config, env) {
    config.output = {
      ...config.output,
      filename: "mfe-1.js",
      libraryTarget: "system",
      publicPath:ASSET_PATH
    };
    delete config.optimization;
    return config;
  },
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.disableHostCheck = true;
      config.headers = config.headers || {};
      config.headers["Access-Control-Allow-Origin"] = "*";
      return config;
    };
  },
};