Is react-intl 3.12.1 compatible with react 17 and react-router-dom 6.2.2?

[dashakrolik]

I am migrating a big application with lots of legacy code starting with a migration from reach/router to react-router-dom 6.2.2. Right now in our code we are using version 3.12.1 of react-intl. It seems to me it is incompatible?

This piece of jsx seems to be causing the issue:

<RawIntlProvider value={createIntl({ locale: lang, messages: messages[lang] }, cache)}>
   <Routes>
      ....
   </Routes>
</RawIntlProvider>

We are fetching the messages from a Google spreadsheet, transforming the data into a simple object which returns expected values. After migrating to react-router we are getting this error:

Objects are not valid as a React child (found: object with keys {$$typeof, render, wrappedComponent}). If you meant to render a collection of children, use an array instead. 

How can I solve this issues? Should I use this migration guide: https://formatjs.io/docs/react-intl/upgrade-guide-3x and migrate from 2 to 3, then from 3 to 4, then from 4 to 5?

[longlho]

react-intl@3 is no longer maintained so I have no idea if it works

[dashakrolik]

Shall I migrate from it, would you advise? I think most people probably will not have an answer either because it is such an old unmaintained package at this point.

[longlho]

Yeah you should always be on the latest