Django makemessages javascript (xgettext)

Question

I want to use django i18n support to translate my javascript files. I have the following javascript file:

var test_text = gettext('example');

@withStyles(styles)
export default class HomePage {
  static contextTypes = {
    i18n: PropTypes.object
  }

  constructor() {
    this.componentDidMount.bind(this);
    this.handleCitySearch.bind(this);
  }

  render() {
    return (
      <Grid className="HomePage">
        <Row className="HomePage-hero">
          <Col md={8} style={{ textAlign: 'center' }}>
            <Input ref="city" bsSize="large" type="text" />
            <Button bsSize="large" bsStyle="default" onClick={this.handleCitySearch}>{gettext('button text')}</Button>
          </Col>
          <Col md={4}>
            <ul>
              <li>{gettext('SOME TEXT')}</li>
              <li>{gettext('MORE TEXT')}</li>
            </ul>
          </Col>
        </Row>
      </Grid>
      );
  }
}

Now I run djangos makemessages command:

python manage.py makemessages -l de -d djangojs -v 3 -s

I would expect that the created translation file has four entries ('example', 'button text', 'SOME TEXT', and 'MORE TEXT'), because gettext appears three times in the js file. But the created locale file has only two entry for "example":

#: ../HomePage.js:1
msgid "example"
msgstr ""

#: ../HomePage.js:25
msgid "MORE TEXT"
msgstr ""

I also get this warning. But have no clue what it means (the file has only 32 lines)

HomePage.js:33: warning: RegExp literal terminated too early

Does anyone know why django ignores the other entries? Maybe it's because I use the jsx syntax or because I use es6 classes?

UPDATE:

I found out that this is not a problem of django but of xgettext. Django calls xgettext with the following command:

xgettext  --language=JavaScript --keyword=gettext_noop --keyword=gettext_lazy --keyword=ngettext_lazy:1,2 --keyword=pgettext:1c,2 --keyword=npgettext:1c,2,3 --output=- --from-code=UTF-8 --add-comments=Translators  ../HomePage.js

So is there any xgettext expert who can help me?

Answer 1

I tried this with the latest version of Django (1.10.3). It seemed to work just fine. Can you upgrade your Django version?

The code that worked for me is here: https://github.com/guitarmanvt/stackoverflow-question-32403632

Also, bear in mind that your JavaScript function gettext needs to be defined somewhere. When last I looked, there were several JavaScript i18n libraries out there, but not many played well with xgettext and Django. You may have to roll your own.

Alternatively, take a look at how Sentry does i18n with JSX. https://blog.sentry.io/2016/01/07/react-i18n.html

Happy translating!