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](https://formatjs.io/docs/getting-started/message-declaration/) — Chandan, Dec 19 '20 at 16:29

score 0 · Answer 1 · answered Jan 22 '21 at 16:29

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
      }
    ]
  ]

FormatJS CLI Extract

1 Answers1