FormattedMessage evaluated twice, description is removed and enforceDescriptions fails

[rvulpescu]

Hi,

I'm using this message which the extraction plugin (v 2.0) parses twice.
I also attempted using defineMessages();

          <FormattedMessage
              defaultMessage= {'Hello 2, {name}! How are you today?'}
              description= 'Welcome greeting to the user'
              id={'greeting'}
              values={{'name': 'Fox'}}
          />

For some reason the description attribute is being removed and the final .json does not contain the description of the message. If mandatory descriptions are required, the parsing will stop since this message is invalid.

Why do you remove it at index.js#178?

                    if (descriptor.defaultMessage) {
                        storeMessage(descriptor, path, state);

                        attributes.filter(function (attr) {
                            var keyPath = attr.get('name');
                            var key = getMessageDescriptorKey(keyPath);
                            return key === 'description';
                        }).forEach(function (attr) {
                            return attr.remove();
                        }); 
                    }

[rvulpescu]

Output with enforceDescriptions = false;

[
  {
    "id": "greeting",
    "defaultMessage": "Hello 2, {name}! How are you today?"
  }
]

Console.log output from storeMessage(): id, description, defaultMessage

#storeMessage()
greeting
Welcome greeting to the user
Hello 2, {name}! How are you today?
#storeMessage()
greeting
undefined
Hello 2, {name}! How are you today?
SyntaxError: app/modules/login/views/overlay.js: [React Intl] Message must have a `description`.
  89 |       <div id="login-bg">
  90 |         <div id="disclaimer">
> 91 |           <FormattedMessage
     |           ^
  92 |               defaultMessage= 'Hello 2, {name}! How are you today?'
  93 |               description= 'Welcome greeting to the user'
  94 |               id={'greeting'}

[ericf]

parses twice

I cannot reproduce the double-parsing behavior you mention. What version of Babel are using? How many copies of babel-plugin-react-intl show up when you run npm ls babel-plugin-react-intl? Can you provide a simple example that I can run to see the issue?

For some reason the description attribute is being removed and the final .json does not contain the description of the message. If mandatory descriptions are required, the parsing will stop since this message is invalid.

The description JSX attribute is removed from the source because it is metadata and not needed at runtime. This will reduce the size of the JavaScript bundles. The messages description is in the JSON files because professional translators are the consumers of this information because it provides them context about how the default message string is used in the UI.

The plugin option to enforceDescriptions is used to make sure all defined messages contain a description for the translator. This ensures that all developers on a team write a description when creating a message that will be translated.

[rvulpescu]

Hi,

I'm only using 1 npm package, here is a sample package.json within a project https://github.com/rvulpescu/babel-plugin-react-intl-test

I ran it and it gives the same issue.

Run npm install then babel --plugins react-intl sample.js.
Output will be:

SyntaxError: sample.js: [React Intl] Message must have a `description`.
  31 |       <div id="login-bg"> 
  32 |         <div id="disclaimer">
> 33 |           <FormattedMessage
     |           ^
  34 |              defaultMessage= {'Hello 2, {name}! How are you today?'}
  35 |              description={'Welcome greeting to the user'}
  36 |              id={'greeting'}

Otherwise it might be one of my global npm packages.

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] (git://github.com/gulpjs/gulp-cli#b6ed9b9c26b30c14a60a5d00b5a69eb04045bbd0)
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[rvulpescu]

It seems that the storeMessage(descriptor, path, state); function is called once on the message, then the description is of course removed since as you said it would not be relevant.

But later on, storeMessage(descriptor, path, state); is called again.

This is a stack trace from a single execution, callbacks set twice?

Description Welcome greeting to the user
Error
    at storeMessage (...\node_modules\babel-plugin-react-intl\lib\index.js:99:17)
    at PluginPass.JSXOpeningElement (...\node_modules\babel-plugin-react-intl\lib\index.js:183:25)
    at newFn (...\node_modules\babel-cli\node_modules\babel-core\node_modules\babel-traverse\lib\visitors.js:276:19)
    at NodePath [ ... ]
Description undefined
Error
    at storeMessage (...\node_modules\babel-plugin-react-intl\lib\index.js:99:17)
    at PluginPass.JSXOpeningElement (...\node_modules\babel-plugin-react-intl\lib\index.js:183:25)
    at newFn (...\node_modules\babel-cli\node_modules\babel-core\node_modules\babel-traverse\lib\visitors.js:276:19)
    at NodePath [ ... ]

I'll let you debug it, I've went towards a different aproach by taking all the messages in a separate json file and importing them into the build.

As for the release, I wrote a custom grunt task that would merge the proper object key/values.

[ericf]

You're running the plugin twice: it's defined in the .babelrc file and in your command.

Use:

babel sample.js

Not:

babel --plugin react-intl sample.js

Since you already include the react-intl plugin in your .babelrc.

[rvulpescu]

Oh, that's so silly. Sorry about that, it's my first babel project :)