plural not working the way documentation is describing it

[etx121]

Describe the bug
plural is not working the way we would expect when reading the documentation. We cannot create plural messages based on plural, where we inject the value later.

To Reproduce
❌ Failing implementation:

import { msg, plural } from "@lingui/macro";
import { useLingui } from "@lingui/react";

const MyComponent = () => {
    const { i18n } = useLingui();

    const message = msg({
    message: plural("friendCount", {
      one: '# friend',
      other: '# friends',
    })
  });

const friendCount = 18;
const translatedMessage = i18n.t(message.id, {friendCount})
// translatedMessage will only be the ID

message is looking like that (with values inside):

{id: "bkCrNj",
message: "{0, plural, one {# friend} other {# friends}}",
values: {0: 'friendCount'}
}

Expected behavior
✅ Working implementation

import { msg, plural } from "@lingui/macro";
import { useLingui } from "@lingui/react";

const MyComponent = () => {
    const { i18n } = useLingui();

    const message = msg({
    message: "{friendCount, plural, one {# friend} other {# friends}}"
 });

const friendCount = 18;
const translatedMessage = i18n.t(message.id, {friendCount})
// translatedMessage will show the translated message after extracting the message with lingui
}

message is looking like that:

{id: "daoiJg",
message: "{friendCount, plural, one {# friend} other {# friends}}",
}

Additional context
plural should help us create easily plural forms of messages, which is not the case currently.

• jsLingui version 4.13.0
• SWC version ("@lingui/swc-plugin) 4.0.9
• Macro support:
• [x ] I'm using SWC with @lingui/swc-plugin
• I'm using Babel with babel-macro-plugin
• I'm not using macro
• Framework used: NextJs

[timofei-iatsenko]

Could you point where you find your first example in the documentation?
This should not work. The first argument of plural macro expecting an actual value, not a string with a placeholder name. There is no documented and easy way to define plural message for later use. plural macro is designed to be used in-place.

Your approach with direct usage of ICU will also work if you want to define plural message for later use.

[etx121]

Ok thanks for the clarification.
This is not documented, because I didn't find a way to make the examples work the way I intended: I want to create the message for later.

It would be great to have plural work for later usage.

[timofei-iatsenko]

There is a hacky way to use plural to define message for the later use:

// define fake variable for placeholder
const count = 0; 

const messages = {
  'testPlural': msg`${plural(count,  {
      one: '# friend',
      other: '# friends',
    })}`
}


const MyComponent = () => {
    const { t } = useLingui();

  const friendCount = 18;
  const translatedMessage = i18n.t(messages.testPlural.id, {count: friendCount})
}

For sure for future that should be improved. I think the only "good" way for now, it what is you already done with a ICU

[etx121]

I tried your suggestion importing msg from "@lingui/macro".
I got linting errors:
You couldn't translate just a variable, remove t`` or add some text insideeslint[lingui/no-single-variables-to-translate](https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-single-variables-to-translate.md)

I found the example on my first message with Claude, but he was only able to tell me to use raw ICU message instead. It will be easier for me to use that instead.
If lingui v5 will support what I want from plural, it would be great.

[timofei-iatsenko]

I believe this issue was fixed in the eslint plugin, try to update to the latest version. If it's still giving this false-positive, open an issue in that repo https://github.com/lingui/eslint-plugin

[etx121]

I already had the eslint-plugin-lingui v0.6.0 installed