Stack Overflow
Stack Overflow

Questions tagged [babel-plugin-react-intl]

Extracts string messages from React components that use React Intl

Extracts string messages for translation from modules that use React Intl.

https://github.com/yahoo/babel-plugin-react-intl

21 questions
11
votes
3 answers

intl.formatMessage not working - react-intl

I am trying to do language translation using react-intl. When I use this , it is working perfect. But when I use the following code with intl.formatMessage(), it is not working and throwing some errors. I don't…
Abraham Gnanasingh
  • 767
  • 1
  • 8
  • 27
10
votes
3 answers

React-intl define messages outside of react

I have utils.js file. export function categoryIdToCategoryName(categoryId) { let name; switch (categoryId) { case constants.RISK_CATEGORY_LOW: name = 'low'; break; case constants.RISK_CATEGORY_MEDIUM: name =…
Vladimír Volek
  • 425
  • 4
  • 19
8
votes
1 answer

Dynamically import language json file for react / react-intl

This is the way I configure my client to render the proper language through react-intl. import localeData from './translations/en.json'; //import localeData from './translations/xx.json'; <-- any language const render = routes => { match({…
Yen Sheng
  • 517
  • 1
  • 6
  • 23
3
votes
1 answer

Rendering a backslash from react-intl message when building with Webpack 1

Summary When I load my app using Webpack Dev Server, my messages show up fine: \. However when I bundle the application to disk and server the bundle via nginx, I see a duplication of my backslash: \\. Details I am using react-intl@2.2.3…
robert
  • 4,053
  • 1
  • 16
  • 20
2
votes
0 answers

Casing of react-intl does not match the underlying filesystem

Current behavior import { FormattedMessage } from 'react-intl throws eslint error module "/node_modules/react-intl/lib/react-intl" Casing of react-intl does not match the underlying filesystem.eslint(import/no-unresolved) This wasn't…
Henry
  • 301
  • 3
  • 11
2
votes
0 answers

i18n message extraction in CRA using TypeScript

I'm trying to get i18n message extracted (defined by react-intl's defineMessages) to work properly in a CRA using TypeScript. I've got an existing react app bootstrapped by CRA with a couple of hundrets of lines of code. So rewriting the application…
Anticom
  • 889
  • 11
  • 24
2
votes
1 answer

"babel-plugin-react-intl" is not working as expected

I have created my react app using create-react-app command. Now I would like to available my website in both hindi and english language. So for that I am using yahoo/react-intl. I have also installed the babel-plugin-react-intl plugin. Also added…
Sourabh Banka
  • 900
  • 1
  • 19
  • 38
2
votes
1 answer

Use statically generates messages in React Intl

I have an object that contains content for a page, I import it and try to use it like you'd use any object variable: import {Variable} from 'data' const message = defineMessages({ message: { id: 'component.title', defaultMessage:…
Obed Marquez Parlapiano
  • 1,689
  • 2
  • 19
  • 28
2
votes
2 answers

How to add locale data dynamically using React Intl?

Am using React-intl for internationalization of an UI Util Library. The library has a folder say i18n wherein I place json files for different locales.If the user of this library want to add support for additional locales, he/she can place…
Santhosh
  • 524
  • 9
  • 23
1
vote
1 answer

React Intl, How to compile multiple language files in at a time?

According to Format.js docs, I can extract all messages from the source codes using flowing commands. yarn extract 'src/**/*.js*' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' It's working fine but when I go to…
Shifut Hossain
  • 899
  • 3
  • 10
  • 18
1
vote
1 answer

Webpack resolutions error with lodash and other modules

Using yarn to generate webpack build throws multiple module resolution errors on Mac OSX only. Using npm works fine. I believe the problem might be within webpack configuration to properly locate and load the modules. Run 'yarn run build' on Mac…
Arky
  • 350
  • 1
  • 3
  • 13
1
vote
0 answers

Cannot use react-intl-webpack-plugin with create-react-app

I want to use react-intl-webpack-plugin to combine messages from babel-plugin-react-intl into one message file. I have configured the webpack.config.dev.js, however, when I run "yarn start", I got the following error: Cannot read property…
wing999
  • 307
  • 1
  • 9
1
vote
3 answers

Why does defineMessages from react-intl throw an error when passing in a object reference?

I am trying to get my head around react-intl from the Yahoo! i18n project and I am running into a weird issue. My goal is to store the base string (English) in some sort of JSON files outside the components so they can be edited by non-devs. It…
Jazzy
  • 5,536
  • 9
  • 45
  • 70
1
vote
2 answers

What are advantages of using babel-plugin-react-intl?

I've been trying to learn and understand react-intl library and I encountered babel-plugin-react-intl library. There is a description in the library's page like that; Extracts string messages for translation from modules that use React Intl. I…
efkan
  • 11,296
  • 5
  • 64
  • 94
0
votes
1 answer

react-intl with server side rendering

Problem Next js SSR environment is failing to detect the locale for some languages like "gr" and "rs" or "es". I'm using react-intl https://github.com/formatjs/formatjs This is causing my browser to show this error on page load. utils.js:19 Error:…
user391986
  • 24,692
  • 37
  • 113
  • 191
1
2