#jsx-gettext-extract-loader
Your code in JSX looks like this:
<div>
<a onClick={this.handleLearnMoreClick}
href='http://www.dailymotion.com/repost'
style={{textDecoration: 'none'}}
>
{__('Learn more')}
</a>
</div>
But it gets mangled by Webpack:
_react2['default'].createElement(
'div',
null,
_react2['default'].createElement(
'a',
{ onClick: _this.handleLearnMoreClick,
href: 'http://www.dailymotion.com/repost',
style: { textDecoration: 'none' }
},
(0, _i18n.__)('Learn more')
)
)
Problem: gettext does not know what needs to be translated. It is look for __('learn more')
and cannot read (0, _i18n.__)('Learn more')
Solution: extract out gettext translations to another file for gettext!
modules: {
...
loaders: [
...
{
test: /\.jsx$/,
loaders: ['react-hot', 'babel', 'jsx-gettext-extract-loader?output=.tmp']
}
...
]
...
}
This creates a gettext readable file with all the gettext translations:
// .tmp/jsx-translations.js
__('learn more')
__('a new way to share')
To be used in conjunction with something like grunt-xgettext