How to create translation files when using Create React App

[mulyoved]

is it possible to use babel-plugin-react-intl when using create-react-app?

if not, any other way to generate the relevant files?

#669
#673

[ashleyconnor]

See here

[ericf]

It would be awesome if either of you wanted to contribute an example app in examples/ dir for doing this!

[draperd]

@ericf I'm still exploring a few issues with the approach I described. Whilst I think that the approach I described will work well with a component that just inherits directly from React.Component it doesn't seem to work with deeper inheritance.

So for example I want to inject i18n messages into Component A that I then want to extend with other Components (these are components that should genuinely inherit where the sub-class is a specialization of the super-class).

In these cases I get errors like this:

Uncaught Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

It might be that I'm trying to enhance my components incorrectly (the HoC pattern is still quite new to me, as is React for that matter!). If I can get this working then I'll definitely write it up as an example and submit a PR for it... but at the moment I'm questioning the value of my original approach.

[mulyoved]

https://facebook.github.io/react/docs/composition-vs-inheritance.html

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

[draperd]

@mulyoved You've not added any context to that quote (which I've read previously) so I'm not sure what message you're trying to convey with it. However, just because Facebook hasn't found any use cases where they would recommend creating component inheritance hierarchies does not mean that those use cases do not exist.

I do understand the arguments for functional composition and we are indeed using the HoC pattern for some things, but where one component truly is a specialization of another then inheritance still feels like an appropriate and efficient pattern.

[mulyoved]

@draperd sorry it was not more clear,

It might be that I'm trying to enhance my components incorrectly

referring to your message that react-intl does not work when you use inheritance, just say I think inheritance is not needed to be supported in react-intl.

[draperd]

@mulyoved And that's absolutely fine... we have a need for inheritance and so we've actually decided to move on from using react-intl and use a proprietary solution for our project now. This isn't to say that I don't think react-intl is good, or that it should support inheritance - just that it does not fit our specific requirements. I think I would definitely look to use react-intl as a i18n solution for React based applications for other projects though.