Lingui: Error: Objects are not valid as a React child (found: object with keys {id})

Question

According to the documentation we can use t macro instead of i18n._() call. An example of corresponding macro transformation:

import { t } from "@lingui/macro"
const message = t`Hello World`

// ↓ ↓ ↓ ↓ ↓ ↓

import { i18n } from "@lingui/core"
const message = i18n._(/*i18n*/{
  id: 'Hello World',
})

And so I should be able to write:

  <TextField label={t`Login`}/>

where TextField is a Material UI component.

But that doesn't work. Instead I get a runtime error:

Error: Objects are not valid as a React child (found: object with keys {id}).

as if t was converted to the object

{
  id: 'Login',
}

and not the i18n._(...) function call.

I couldn't find any information about this here or among project's pages.

Answer 1

Answering to myself.

It's hard to tell the actual reason, but after I updated the code according to a sandbox kindly provided by Sergio Moreno, it now works.

Basically I18nProvider should have been initialized differently. Specifically:

Was:

<I18nProvider language={language} catalogs={i18nCatalogs}>

Becomes:

<I18nProvider i18n={i18n}>

See the issue for more details: https://github.com/lingui/js-lingui/issues/946