Does this work with create-react-app?

[bmueller-sykes]

I'm pretty sure the answer to my question is "no", but I want to ask it anyway, just to be sure.

So my understanding is that I were to go the .babelrc route that when I build a project, I'd wind up with a translations JSON file somewhere in my build folder, which I could then hand off to a translation service. But after some digging around, it would appear that the only way to get this plugin to work with a create-react-app-based app is to eject the app, which I don't want to do.

So given that issue, I think the only currently solution is to write a script that I can invoke directly in NodeJS at the command line. I did that, and the code seems to do the right thing (I can share that code, if people want it).

Obviously, it would be cleaner if this could just be part of the translation process, so I was hoping that I was missing something, and that it could be done with a CRA-based app.

Thanks in advance!

[evenchange4]

Related issue: facebook/create-react-app#1227 (comment)

[sunknudsen]

It’s possible to trigger babel-plugin-react-intl manually without ejecting (at least using a recent version of react-create-app).

Also, using react-intl-translations-manager it’s possible to easily maintain the translations required by react-intl.

Step 1 Install the following packages.

npm install @babel/cli babel-plugin-react-intl react-intl-translations-manager --save-dev

Step 2 Create a .babelrc file in the root directory of your project.

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

Step 3 Create a translationRunner.js file in the root directory of your project.

const manageTranslations = require('react-intl-translations-manager').default;

manageTranslations({
  messagesDirectory: 'translations/messages',
  translationsDirectory: 'src/translations/locales/',
  languages: ['fr', 'en']
});

Step 4 Add the following properties (messages, locales and translate) to your package.json under scripts.

{
  "scripts": {
    "messages": "NODE_ENV=production babel src/**/*.tsx >/dev/null",
    "locales": "node ./translationRunner.js",
    "translate": "npm run messages; npm run locales"
  }
}

Step 5 Run npm run translate and enjoy life again.

[glecetre]

Hello guys,

I am also trying to use react-intl with a create-react-app (with TypeScript), and I tried what your mention @sunknudsen, but it doesn't extract my messages. Shouldn't it?

For now I try it on only one component which uses defineMessages (from package react-intl).

Could you provide more information please?

[sunknudsen]

@glecetre I personally use the FormattedMessage component vs defineMessages. Have you tried this approach?

<FormattedMessage
  id="about.description"
  defaultMessage="Lickstats is..."
/>

[glecetre]

Nope, doesn't work either. I suspect that nothing is even happening in Babel, the console output is completely empty except for the translation manager:

I also tried with npm instead of yarn, just in case, but with no success.

[sunknudsen]

@glecetre Can you please share a screenshot of the folders and files in your project? Anything under translations either in the root of the project or in src?

[guy-blockchain]

This worked for me:

facebook/create-react-app#1227 (comment)

[jamieallen59]

I was having lots of problems with this so wrote a post here for using react-intl, babel-plugin-react-intl and create-react-app, without ejecting.

[rlahoda]

@jamieallen59 Thanks for writing that post! It finally got me working.

[longlho]

close due to stale