Only defineMessages works. FormattedMessage is ignored. about babel-plugin-react-intl

[MabelCheng]

Hi, I met the same problem when running it in an electron-react app. Do you fix the problem? I tried to write a stand-alone script, but it failed. Thank you.

[dabosin]

@eddiewang Do you use "defaultMessage" prop in your FormattedMessage?

[eddiewang]

@dabosin yes, I do.

[lzhuor]

Hi, I encountered the same problem before. Please kindly check your babel plugins config in webpack.

What I did to fix the problem is that I wrote a stand-alone script to extract messages so the AST will not be polluted by additional babel plugins.

Reference: #125

[lzhuor]

Hi @MabelCheng , yes I did resolve it. I put a code snippet in this issue: #125

FYI:

Above problem has been resolved by:

1. Translating files using babel-runtime therefore we can control presets and plugins better. Prior that, we were applying babel-plugin-react-intl plugin during the build time (with WebPack). Build time has lots more babel-plugins applied which may have side effects on the syntax trees.

2. Sharing the chunk of code we made:

console.log('🥁 Starting Babel');

globSync('./src/**/!(*.stories|*.test|actions|selectors|reducers|validate).js').forEach(filePath => {
  try {
    console.log(`🏥 Babel is transforming ${filePath}`);
    babel.transformFileSync(path.normalize(filePath), {
      presets: ['flow'],
      plugins: [
        ['transform-es2015-arrow-functions', { spec: true }],
        'transform-class-properties',
        'transform-object-rest-spread',
        'transform-runtime',
        'flow-react-proptypes',
        [
          'react-intl',
          {
            messagesDir: './src/messages',
            enforceDescriptions: false,
          },
        ],
      ],
    });
  } catch (err) {
    console.error(err.message);
  }
});

3. You need set bindings to true to get class properties being parsed. Just FYI - How referencesImport() is implemented - https://npmdoc.github.io/node-npmdoc-babel-core/build/apidoc.html#apidoc.element.babel-core.traverse.NodePath.prototype.referencesImport

['transform-es2015-arrow-functions', { spec: true }],
// examples: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-es2015-arrow-functions

[eddiewang]

@lzhuor can you post what your npm script looks like? Do you have a script just for parsing the translations through babel-plugin-react-intl?

Also, what do you mean by setting bindings to true? Most of my components are not arrow functions, but rather class Component extends React.Component.

[teriteriteri]

@eddiewang hi, I'm new to react, just wondering how do we extract messages using babel-plugin-react-intl? Do we need to write a script to scan through the code which contains defineMessage and formattedMessage then save into json files? If so, what's the purpose of using babel-plugin when the script basically does all the jobs already?

Thanks!!!

[lzhuor]

@eddiewang The above example is my script for parsing intl - translate.js.

The npm scripts:

"scripts": {
    ...
    "translate": "babel-node ./tools/translate/translate.js",
    ...
  },

FYI:

• how to programmatically run babel: https://babeljs.io/docs/en/babel-core.html#babeltransformfilesyncfilename-string-options-options-object
• how does babel work and mod AST: https://zhuoran.li/exploring-babel-and-ast/

[longlho]

close due to stale