Skip to content

extract messages with --flatten causes issues when there are multiple plural rules using hash placeholder #4202

@vietanhtran16

Description

@vietanhtran16

Which package?

@formatjs/cli-lib@6.1.3
Tested with @formatjs/cli-lib@6.2.0 too and issues is still there

Describe the bug

We have a message that looks like this which contains 2 plural rules and each makes use of the # hash placeholder to have the plural value as part of the message

<FormattedMessage
  id="reproduction.example"
  defaultMessage="{topicCount, plural, one {# topic} other {# topics}} and {noteCount, plural, one {# note} other {# notes}}"
  description="Show when manager has completed all items for the upcoming 1-1"
  values={{
    topicCount: 1,
    noteCount: 4,
  }}
/>

When flatten is disable, we get the correct message
Here is the extracted message

"reproduction.example": {
  "description": "Show when manager has completed all items for the upcoming 1-1",
  "message": "{topicCount, plural, one {# topic} other {# topics}} and {noteCount, plural, one {# note} other {# notes}}"
}

And this is what is rendered on the page
image

When flateen is enable, the message is incorrect
Here is the extracted message. Note that the extracted message became plural rules nested within plural rules

"reproduction.example": {
  "description": "Show when manager has completed all items for the upcoming 1-1",
  "message": "{topicCount,plural,one{{noteCount,plural,one{# topic and # note} other{# topic and # notes}}} other{{noteCount,plural,one{# topics and # note} other{# topics and # notes}}}}"
}

And this is what is rendered on the page for that message. It looks like because in the extracted message, as hash placedholer is being used, # ended up using the value of noteCount as we have plural rule nested in another one
image

For your reference, this is how we are using @formatjs/cli-lib. This is a small portion of the code that we have as we don't want to share everything for security reasons but should be enough.

import { extract } from "@formatjs/cli-lib"

const files = await glob("{src,pages}/**/*.ts*", {
  ignore: ["**/*.d.ts", "**/*.{spec,test}.tsx"],
})
const extracted = await extract(files, {
  format: "smartling",
  flatten: true,
})

To Reproduce

You can reproduce based on the above information

Codesandbox URL

Please include a codesandbox URL if possible

Reproducible Steps/Repo

Steps to reproduce the behavior: This is included in the description.

Expected behavior

We expect after flatten, the messages should still work with hash placeholder with multi plural rules

Screenshots

I have attached screenshots above as it is easier to follow the sequence there

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions