FormatJS CLI Extract

Question

I'm trying to get formatjs setup for use with my app which uses react-intl, and i'm running into an issue when doing an extract using their CLI. I currently have custom components that embed the FormattedMessage component inside of them, example:

<AppLabel title="section_title_name"/>

Inside of <AppLabel/> it has <FormattedMessage id={this.props.title}.../> which would provide the translation for the label.

Is it still possible for me to setup extractions for these different component names, if they're not using the id attribute to hold the string to extract for translation?

formatjs extration will generate id if not present in component but it is good to provide explicit-id because generate hash can collidate and it can override any message and should work because it uses ast to extract message you can read more about how component should be declared for it to work properly here — Chandan
– Chandan, Commented Dec 19, 2020 at 16:29

weiliang · Accepted Answer · 2021-01-22 16:29:38Z

0

Since manual IDs are discouraged, we've provided a babel plugin and a TypeScript AST transformer that will automatically insert message IDs in your transpiled code. For more details please visit Bundling with formatjs. Automatic ID Generation

From Message Extraction guide, we explicitly recommend against explicit ID due to potential collision in large application. While our extractor can insert IDs in the extracted JSON file, you'd need to also insert those IDs into the compiled JS output. Bundling with formatjs

You can do this.

yarn add -D babel-plugin-formatjs

In .babelrc

  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]

answered Jan 22, 2021 at 16:29

weiliang

8431 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

FormatJS CLI Extract

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related