In an AEM multi-module project, to bring in more modularity in frontend we developed two React apps using CRA — one for global/common components (also used in non-react pages) and another for all the other content components. They both get deployed in AEM and are used as clientlibs.
Both apps worked fine when used on different pages, but when they were used on the same page, it caused issues. Only one of the react app was able to load on the page and the other was unrecognized.
Why two React Applications created using CRA didn’t work on a single page?
It turns out that the WebPack runtime is the problem here. The WebPack runtime adds an object to the global scope which is used to lazy-load chunks. The default name for this object is webpackJsonp.
Now both our React Apps had the same WebPack runtime object name, which stopped one of the apps to load on the page.
What was the solution to this problem?
As understood, the same WebpackJsonp object name will not work on a single page, so it needs to be changed.
There are 2 approaches to resolve the above issue:
Approach 1. Eject the CRA application and edit the WebPack configuration.
Approach 2. Use another customization mechanism like customize-cra or react-app-rewired to edit the Webpack config.
With approach 1 ejecting CRA will be overhead. It will require setting up all the Webpack configurations for an application manually. Ideally, this would not be recommended.