Issue with migration and React Intl: "Could not find required intl object. <IntlProvider> needs to exist in the component ancestry."

[luddilo]

Describe the issue

I've followed the migration guide upgrading our custom-app to the new organisational level, including upping all packages to 21.x from 18.x.

Our app is breaking upon startup unless we wrap the ApplicationShell with an IntlProvider (from "react-intl"). Even doing so, though, upon errors the app breaks with the same error (see screenshot).

To Reproduce
Steps to reproduce the behavior:

No idea. What do you propose?

Expected behavior

The error screen should show.

Screenshots

Error upon startup:

Fix for startup error:

Error on application-error:

Additional context

Referred here by customer service: https://jira.commercetools.com/servicedesk/customer/portal/1/SUPPORT-16870

[mmaltsev-ct]

Hi @luddilo, thank you for submitting the issue. We need to do an investigation and will get back to you soon.

[Rhotimee]

Heyy @luddilo,

I suspect multiple versions of react-intl in your dependencies. You can check that by running yarn why react-intl in the project's root directory.

If it is confirmed that there are different versions of react-intl, you could;

1. Use resolution to override the other versions with the specified version.

2. Run yarn upgrade -R react-intl which forces Yarn to Upgrade the package to the latest version based on the specified range

Additionally, I suggest you upgrade ui-kit to the v15 since app-kit v21 uses that version.

Please see other similar issues 2158 and 2158

Let me know if this was helpful.

[luddilo]

Thanks @Rhotimee and @mmaltsev-ct. That indeed was the issue, we had 5.25.0 installed manually and 5.25.1 from the commercetools packages. Odd that this one patch version would cause that, but yeah, it did.