Skip to content

[react-intl] Context exposed on window is causing issues within a microfrontend infrastructure #4118

@voodoocreation

Description

@voodoocreation

Which package?

react-intl, version >= 6.3.0.

Describe the bug

In our organisation, we use a combination of single-page apps (SPAs) and microfrontends (MFEs), each of these projects is completely independent from each other and have their own dependencies, and are loaded via static assets which are compiled with TypeScript via Webpack. The problem with this particular code is that it forces all of them to use the react-intl context generated by the first thing to load (the SPA generally), which may be on a completely different version of react-intl to any of the MFEs that are loaded on the page, which means if these versions use an incompatible context, there's no way to engineer around that, as no alternative is provided within react-intl to avoid using window.__REACT_INTL_CONTEXT__, which leads to errors being thrown when some expected values within the react-intl context aren't defined, due to it being generated by a different version of react-intl.

It would be very useful to allow some way to override this behaviour, to keep the context strictly to the scope of each bundle without it depending on global values on window

To Reproduce

You would need to have a SPA using one version and then have it load an MFE that's on a different version that expects a different context to be present.

Codesandbox URL

Unfortunately the codebases are private within my organisation, so cannot be shared.

Expected behavior

I would expect each set of bundled code to use its own react-intl context, rather than inheriting whatever is on window.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

It's not device or browser specific, but rather an issue with relying on globally-exposed values when you can't guarantee consistency within all infrastructures.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions