CODEWITHSUNDEEP
reactjsreact-intlformatjs
noriktal
noriktal

Reputation: 93

Extracting messages with react-intl and babel-plugin-formatjs doesn't work when default messages are variables

In a CRA project, I am trying to use react-intl and extract all the messages used in all the <FormattedMessage /> components following the documentation, with babel-plugin-formatjs and @formatjs/cli . The extraction works basically, but the generated json file is lacking details.

Instead of looking like this:

{
  "hak27d": {
    "defaultMessage": "Control Panel",
  },
  "haqsd": {
    "defaultMessage": "Delete user {name}",
  },
}

The defaultMessage fields are missing when they are originally created with variables:

  "button-text": {
  },

For example:

 <h1>
  <FormattedMessage
   id="roi-carousel-title"
   defaultMessage={messages.title}
  />
</h1>

Any idea how to fix this?

More details:

Following the documentation,

  1. I added a babel.config.json file with the content:
{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]
}
  1. I added a script to the scripts in package.json:
{
  "scripts": {
     ...
    "extract": "formatjs extract"
  }
}
  1. I am executing the script as follows:
npm run extract -- 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

Here is a codesandbox replicating the problem - well, sort of; actually, in the sandbox the extraction fails completely - an empty object is created in the en.json file.

*At the sandbox, one should use

yarn extract -- 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

Upvotes: 1

Views: 754

Answers (0)

Related Questions