How To: Multiple React Apps On The Same Page
Recently I was faced with the challenge of adding dynamic imports and code splitting to our web widget. This will lower the initial file size and increase performance for all of our customers.
During the exploration, things worked as expected most of the time, but some situations were failing with cryptic error messages. It was clear that these error messages were cause by an inability to load chunks at runtime. After several hours of investigation, I finally decided to inspect the compiled code. What I saw was a window.jsonpFunction function polluting the global namespace. This function was being overridden due to there being multiple react apps on the same page - this was the source of the error messages. This is very common problem on the web; and to be honest I was surprised to see it in a product as mature as react and webpack... but here we are.
Solution
Add a setting to modify your jsonpFunction in your webpack JSON config under the "output" key:
output: {
jsonpFunction: 'yourSpecialName'
}
This will use a name other than the default for the polluting namespace and allow your code to play nicely with other apps on the same page. This name has been changed in webpack 5, so if you're using webpack 5 you will need to use the code below instead:
output: {
chunkLoadingGlobal: 'yourSpecialName'
}
Thanks for reading - hopefully this saves someone out there some time!