Background Info

My team has a React JS application that's gotten very large over time - as such, we're looking at breaking it into smaller pieces. Currently, we're considering loading those pieces using <script> tags. These pieces may be created / managed by other teams.

Our main (shell, container) application uses variety of 3rd party libraries. Many of these libraries create objects on window (such as window.errorlibrary, window.logginglibrary, etc). Additionally, we capture unhandled exceptions using window.onerror.

Other teams will likely want to use many of the same 3rd party libraries we are using. Additionally, they may also want to perform their own error handling on unhandled exceptions in their code.

The Problem

When you load JS using a <script> tag, that loaded JS now has the same window object as the main (shell, container) application. These means that if the main application is using window.errorlibrary, and the loaded JS has a window.errorlibrary, the loaded JS will overwrite the original window.errorlibrary. The same thing happens to error handling defined using window.onerror.

I've also tested webpack 5 module federation, and the same issue occurs (JS sharing the window object).

Additional Info

I'm aware that using <iframe>s instead of <script>s would fix this issue (since the loaded JS would then be executing in it's own window). I'm also aware that we could coordinate to name any objects we attach to window uniquely, but that won't necessarily work for 3rd party libraries or for error handling with window.onerror.

We may ultimately need to just use <iframe>s, but I'd like to see if there's another option.