Js-lingui: Does this.props.i18n.t works ?

[LFDMR]

Hi,
I got a state component which called a component that need translation.

class Comment extends React.Component{
  render(){
    <CustomTextarea
      ref='textarea'
      placeholder={this.props.i18n.t`Feel free to leave a comment`}
      value={this.state.answer}
      />
  }
}

And when I do lingui extract I don't have the message in my messages.json files.

BUT if I used a stateless component like this:

const TransCustomTextarea = WithI18n()(
  ({ i18n, props }) =>
    <CustomTextarea
      placeholder={i18n.t`Feel free to leave a comment`}
      {...props}
      />
)

Then

class Comment extends React.Component{
  render(){
    <TransCustomTextarea
      ref='textarea'
      value={this.state.answer}
      />
  }
}

Everything works.

Should I do this extra step every time ?

I use

"lingui-cli": "^1.4.2",
"lingui-i18n": "^1.3.3",
"lingui-react": "^1.4.1",

Thanks

[thibautRe]

Can you try to extract i18n from this.props in your first example?

class Comment extends React.Component{
  render(){
    const { i18n } = this.props
    <CustomTextarea
      ref='textarea'
      placeholder={i18n.t`Feel free to leave a comment`}
      value={this.state.answer}
    />
  }
}

I am not entirely sure but I guess the babel-parser is looking for the expression i18n.t(...), not this.props.i18n.t(...)

[LFDMR]

Nice it works this way!

[tricoder42]

@LFDMR Yes, @thibautRe is right. Babel plugin is looking for i18n object only. ~I'll fix it soon.~ EDIT 2018-03-02: I'll fix it eventually.

[panigrah]

I am getting a similar error. react-dom.production.min.js:164 TypeError: t.t is not a function when I usei18n.t. I am using withI18n() HOC and using compose to combine a few different HOCs together. It works fine in development but not in production.

If I replace i18n.t with i18n._ it works.

Any ideas on what I can change?

[Amirroracle]

Having the same issue as @panigrah

[tricoder42]

@panigrah This looks like problem with configuration. i18n.t method shouldn't be used in production, because all i18n.t calls are replaced with i18n._. What's your babel config?

[tricoder42]

Alright, I'm not going to fix this one, because with upcoming babel macros the issue will be solved in more explicit way. Stay tuned for jsLingui 3.0. Meanwhile, you always have to extract i18n from props.

@panigrah @Amirroracle Feel free to create a new issue with more description of your problem. Thank you!