Help wanted Using react-intl

[folivi]

Note from Maintainers

Please try the solution in #1227 (comment) and let us know if it works well for you.

---

Hi all,

I'm following this tutorial https://medium.freecodecamp.com/internationalization-in-react-7264738274a0#.pgfd03878 to use internationalization in my app.
Apparently the integreation is done by modifying the .babelrc file but to do so I have to eject, and I prefer not to.
Is there any way to use React-Intl without ejecting create-react-app?

[robcaldecott]

You only need the Babel plugin to generate the translate files which you can do as part of your production build without ejecting although it's a little messy. I'll post how later.

[EnoahNetzach]

You can just install the required dependencies, add your own .babelrc, and add your "script": "translation" to your package.json.

E.g.:

npm install --save react-intl

npm install --save-dev babel-cli babel-preset-react-app babel-plugin-react-intl

add to the root folder:

{
  "presets": ["react-app"],
  "plugins": [
    [
      "react-intl", {
        "messagesDir": "translations/messages",
        "enforceDescriptions": false
      }
    ]
  ]
}

then add to your package.json's "scripts" this line:

"translate": "NODE_ENV=production babel ./src >/dev/null"

You should be able to run both npm start/npm run build for running/building the project, and npm run translate for generating the translations.

[firaskrichi]

@EnoahNetzach thanks for the answer!

How does : "NODE_ENV=production babel ./src >/dev/null" generate the translation? How does it work exactly?

Thank you 🙏

[arshmakker]

hi,

Internationlization is a pretty important feature for mobile apps these days. Could we have react-intl inbuilt in the create-react flow?

Regards
Arsh

[EnoahNetzach]

@firaskrichi it works as intended by react-intl, by using babel's AST to catch translations and replace them (I suggest you to look it up, it's really interesting, if you like to know how exactly it - and in general babel plugins - works!).
The > /dev/null part is there simply to discharge the babel parsed output.

Moreover what I suggested is simply what the official doc tells to do ;)

@arshmakker being that it's easily pluggable, not everybody wants to use i18n, and the specific tool (format.js) is not that reliable if you want to do substantial i18n (@see), I'm not sure at all it would be possible.

[draperd]

This is a really useful discussion and the information provided by @EnoahNetzach has really helped get react-intl into my create-react-app application. I think it would be exceptionally valuable to have i18n working out-of-the-box with create-react-app (or at least some good documentation explaining how to use it).

The main thing that I don't quite understand is how this works with a production build. I've followed the various scripts to combine individual component message files into a single JSON file for the default locale, I've then added a different locale (with translated messages) and updated the IntlProvider locale to be the new locale.

When you use npm run build the new locale translations are lost (probably because the translate scripts provided by the blogs combine the component messages into locale files in the build directory).

If anyone can shed any light on the correct approach to combining the information provided so far in a production story I'd be very grateful.

[EnoahNetzach]

@draperd, as a non English native speaker, I find that unfortunately no i18n instrument in js is a "catch all" solution.
I've used a couple and always ended up tweaking them to my needs (e.g. subject/direct object gender and numerosity, probably @gaearon could say something about Russian desinences, I don't know if there is someone from Iceland here, and so on and so forth..).
Whichever translation package we could add, it's going to solve only a limited set of cases and needs, so I'm against adding them in altogether, specially when the integration is not "that" painful.

[draperd]

@EnoahNetzach Thanks for your response... I wasn't suggesting that there is a one-size fits all solution, but it would seem that React-Intl is a pretty good fit. I can understand the rationale of not wanting to tie "create-react-app" to a single solution, however a solution of some kind is almost going to be required. Any serious application is going to want to support i18n so I'm simply suggesting that either something is provided by default, or that documentation is provided to assist people in achieving a solution.

The information you have previously provided has been invaluable but only as far as the development experience goes. My point is that when I'm ready to ship my finished application I need translation to work in production for multiple locales and I've not been able to find that information anywhere so far.

I'll continue to experiment and hopefully find a working solution which I'll then write up, I was just hoping that someone may have already encountered and solved this problem using react-intl.

[draperd]

Just to follow up my previous comment... what I actually need is a per component solution which I've now managed to achieve using the higher order component pattern. I will write this solution up as soon as I can for anyone that comes across this thread as it might be useful.

[EnoahNetzach]

@draperd good!

[draperd]

As promised... hopefully this might be of use to some people: https://medium.com/@dave.draper20/i18n-per-component-in-react-using-the-higher-order-component-pattern-b04f32e7cd6a#.ewrplesd7

[sthuber90]

For everyone that the suggestion from @EnoahNetzach is not working out of the box I had to put following in my package.json, probably as I'm working on windows

"translate": "cross-env NODE_ENV=production ./node_modules/.bin/babel ./src > NUL",

[EnoahNetzach]

Yep, env var definition and the output indirection to /dev/null work only in Linux/Mac.

cross-env solves the first part, for the second sincerely I have no idea how to accomplish that on Windows..