No messages returned when running formatjs extract on project. Any ideas of why?

Question

So, I'm implementing a project in Electron and wanted to implement internationalization into it. I have a simple component that uses react-intl's FormattedMessage and a messages.js file with a description of its message. I tried to follow the tutorial in the docs for extracting internationalization messages using @formatjs/cli, however, even though it seems to run correctly the npm script seems to not return anything, like it didn't find any messages. My configs and files are listed below:

.babelrc

{
  "presets":  ["react-app"],
  "plugins": [
    [
      "react-intl",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "extractFromFormatMessageCall": true,
        "ast": true
      }
    ]
  ]
}

---

messages.js

import { defineMessage, defineMessages } from 'react-intl';

const scope = 'src.components.Test';

export default defineMessages({
  info: {
    id: `${scope}.info`,
    defaultMessage: 'Info'
  }
});

---

package.json

...
"scripts": {
    "serve": "react-scripts start",
    "start": "SET DEBUG=true && electron .",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "messages:extract": "formatjs extract --ignore=src/translations/* --out-file=src/translations/pt.json 'src/**/messages.js'",
    "messages:compile": "formatjs compile-folder --ast  src/translations src/compiled-translations"
  },
...
"devDependencies": {
    "@babel/cli": "^7.12.8",
    "@formatjs/cli": "^2.13.15",
    "babel-plugin-react-intl": "^8.2.21",
    "babel-preset-react-app": "^10.0.0",
    "electron": "^10.1.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "extract-react-intl-messages": "^4.1.1"
  }

Now, whenever I run the script for extraction (messages:extract) all I get is an empty json object. Any ideas if I'm doing anything wrong? Thanks!

Answer 1

I had the same issue.

Try to change 'src/**/messages.js' to \"src/**/messages.js\"

For me, this change works.

Answer 2

I don't know if I was having the same issue, but what happened for me was that the CLI did see the messages, but did not write any JSON file. The only way I could get this to work is as follows (in package.json).

package.json

...
scripts: {
  "translations:extract": "npm run translations:extract:internal -- \"src/**/*.ts*\" --out-file \"locales/en.json\" --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
  "translations:extract:internal": "formatjs extract",
}
...

It feels a bit hacky, but it does the job. If you really want to get dirty, the following is also possible just using one line:

package.json

...
scripts: {
    "translations:extract": "node_modules/.bin/formatjs extract \"src/**/*.ts*\" --out-file \"locales/extracted/en.json\" --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
}
...

The above needs formatjs to be installed as a project dependency