[Migration to v4] Lazy plural?

[Minishlink]

Hello,

While migrating to v4, I noticed some logic in our code that calls plural outside a react component, making it incompatible with v4. With t, you can workaround this with msg. What about plural?

Thanks

[timofei-iatsenko]

it's better to wrap it in a function and use as usual:

import {plural} from `@lingui/macro`

const eggs = 5;

// ❌ bad, because in non re-executing context
const myMessage = plural(eggs, {one: "# egg", other: "# eggs"})

// ✅  good, wrapped in a function
function getMyMessage(eggs: number) {
  return plural(eggs, {one: "# egg", other: "# eggs"})
}

// ❗️ Advanced, not recommended
const myPluralMsgDescriptor = msg`Wolf has ${count, plural({one: "# egg", other: "# eggs"})}`

// then somewhere in presentation
i18n._(myPluralMsgDescriptor.id, {count}); // name of the variable should match with definition!

Also you could write plural ICU expression by hand:

const myPluralMsgDescriptor = msg`Wolf has {plural, count, one {# egg} other {# eggs}}`

// then somewhere in presentation
i18n._(myPluralMsgDescriptor.id, {count}); // name of the variable should match with definition!

[Minishlink]

It's already wrapped in a function as usual (it's absurd to have a constant plural)

I think I had the wrong assumption (I noticed some logic in our code that calls plural outside a react component, making it incompatible with v4). My problem when upgrading comes from something else.
I have a bunch of @lingui/macro: Unsupported macro usage. Property name expected type of string but got undefined errors, at some places where we use lingui, but not everywhere, even when macro usage is totally valid like in this simple component:

import { FunctionComponent, useEffect } from 'react';
import { t } from '@lingui/macro';
import { useNotification } from '../../providers/NotificationProvider';
import { register, unregister } from './register';

interface Props {
  enabled: boolean;
}

export const ServiceWorkerRegistration: FunctionComponent<Props> = ({ enabled }) => {
  const { showMessageRef } = useNotification();

  useEffect(() => {
    if (!enabled) {
      unregister();
      return;
    }

    register(({ onAccept }) =>
      showMessageRef.current?.({
        type: 'success',
        text: t`A new version is available! Click here`,
        duration: Infinity,
        onClick: onAccept,
      })
    );
  }, [showMessageRef, enabled]);

  return null;
};

We have no hurry to upgrade, I'll check back in a few months

[timofei-iatsenko]

This code looks OK, maybe there are some other babel plugins conflicting with macro? Could you share your babel config?

[Minishlink]

Sure, thanks, here it is

module.exports = {
  presets: [
    // happens on web or not
    process.env.TARGET === 'web'
      ? ['react-app', { flow: false, typescript: true }]
      : 'module:metro-react-native-babel-preset',
  ],
  plugins: [
    'babel-plugin-styled-components',
    'lodash',
    'date-fns',
    [
      'babel-plugin-transform-imports',
      {
        '@material-ui/core': {
          transform: '@material-ui/core/esm/${member}',
          preventFullImport: true,
        },
        '@material-ui/lab': {
          transform: '@material-ui/lab/esm/${member}',
          preventFullImport: true,
        },
        'react-loader-spinner': {
          transform: 'react-loader-spinner/dist/loader/${member}',
          preventFullImport: true,
        },
      },
    ],
    [
      'module-resolver',
      {
        alias: {
          src: './src',
        },
      },
    ],
    'macros',
  ],
};

[timofei-iatsenko]

Hard to say something from what i see. If you could create a minimal repro, i will look into that.

[Minishlink]

Hello again, 2 years later :) We upgraded from v3 to v5 and I found the problem. It was as simple as the following (it doesn't look like it is in the breaking changes?)

In the lingui config:

-  "runtimeConfigModule": ["src/common/translations/i18n"],
+  "runtimeConfigModule": ["src/common/translations/i18n", "i18n"],