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?

Answer 1

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