Are there cases when t macro is not wrapped with i18n._()?

[stovmascript]

Hi, I'm migrating our app Next.js app to Lingui v3 and we primarily use:

<Trans>...</Trans>
// ...
<Plural />
// ...
t``
// ...
t({
  id: 'foo',
  message: '...' /* or */ plural()
})
// ...
plural()
// ...
i18n.number()

All withI18n, useLingui, <I18n>, etc. are gone 🙏

Everything seems to be working, but there are a few cases when the t macro isn't wrapped in i18n._() becase we get a Unhandled Runtime Error from React: Error: Objects are not valid as a React child (found: object with keys {id}). If you meant to render a collection of children, use an array instead.

We have a few lazy translations, which are defined outside of our components. Some are in functions, which are then called in our components with a parameter to return the correct translation. Some are exported as a JS object (a config of sorts) spread onto component props.

But the weird thing is that one of these helper functions works ok, while others don't and need to be manually wrapped with i18n._t() at the call site. Second weird thing is that sometimes it seems to work when I just add import { i18n } from @lingui/core and leave it there without using it.

[semoal]

Hello, great to hear that you're migrating to v3! Getting adoption on v3 will make the release more stable.

About the Runtime error of React, a huge project written with React Native had the same issues but I couldn't replicate it to try to fix it.
#1042

If you have the possibility to share with me a piece of code where i can run the project and debug Lingui, I'll try my best to fix this issue.

About lazy translations, the correct way of using lazy translations it's to use defineMessage method and then use i18n._(defineMessageVaribable), basically the reason is because defineMessage is transformed into message descriptor. In other words, the message isn’t translated directly and can be used anytime later.

Second weird thing is that sometimes it seems to work when I just add import { i18n } from @lingui/core and leave it there without using it.

This sometimes is occurred about how i18n.load() it's imported, since it's a singleton instance. These are extrange errors and I can only help with a reproduction code :/

[stovmascript]

Seems that your suggestion to use defineMessage has helped.

-import { t } from '@lingui/macro'
+import { defineMessage } from '@lingui/macro'
 
 export default function getGranularityLabel(granularity) {
   switch (granularity) {
     case 'week':
-      return t`Weeks`
+      return defineMessage({ message: 'Weeks' })
 
     case 'month':
-      return t`Months`
+      return defineMessage({ message: 'Months' })
 
     case 'year':
-      return t`Years`
+      return defineMessage({ message: 'Years' })
 
     case 'day':
     default:
-      return t`Days`
+      return defineMessage({ message: 'Days' })
   }
 }

 import getGranularityLabel from '~/helpers/charts/getGranularityLabel'
+import { i18n } from '@lingui/core'
# ...
-                              label={getGranularityLabel(granularity)}
+                              label={i18n._(getGranularityLabel(granularity))}

[stovmascript]

I think I got mixed up in what is and isn't interpreted as a lazy translation.

[stovmascript]

Well, actually, I think I still don't get it 😄

[semoal]

The t`` macro when interporlates creates a code similar to this:

import { i18n } from "@lingui/core"
const message = i18n._(/*i18n*/{
  id: 'Today is {0}',
  values: { 0: date(name) }
})

The defineMessage creates:

/*i18n*/{
  id: "msg.refresh",
  message: "Refresh inbox"
}

You see the difference? The defineMessage isn't translated yet, it's not importing the i18n library and using the _ function because probably in that file isn't ready to be translated, or is inside another module which lingui is not installed.

[stovmascript]

I have a similar use case when it works without defineMessage.

This file is saved right next to getGranularityLabel example shown above.

import { t } from '@lingui/macro'

export default function makeGranularityMenu({ granularity, setGranularity }) {
  return [
    {
      label: t`Select view`,
    },
    {
      hoverVariant: 'secondary',
      label: t`Days`,
      leftIcon: granularity === 'day' ? 'radio_button_checked' : 'radio_button_unchecked',
      onClick: () => {
        setGranularity('day')
      },
    },
// ...

And here it's used next to getGranularityLabel, which I've had to update to use defineMessage.

<Button
  icon="bar_chart"
  label={i18n._(getGranularityLabel(granularity))}
  popup={() => {
    return (
      <Menu
        menuItems={makeGranularityMenu({
          granularity,
          setGranularity,
        })}
      />
    );
  }}
/>

So, most likely it depends on what's happening further down the line with menuItems prop 🤔