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):
- Install react-app-rewired, as explained in https://github.com/timarney/react-app-rewired.
- Create a file in src called
single-spa-entry.js
(or tsx for typescript) - Modify config-overrides.js, as shown in the config-overrides.js file provided in this gist.
- (Optional) remove src/main.js, since single-spa-entry is the new entry
- (Optional) remove public/index.html, since single-spa applications share a single html file, instead of one html file per project.
Are you intending to use SystemJS? If so, here are the webpack modifications required for SystemJS: https://github.com/systemjs/systemjs#compatibility-with-webpack. If not, change the webpack output.libraryTarget to not be System.