Questions tagged [formatjs]
FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.
62
questions
0
votes
0
answers
8
views
icu-messageformat-parser _isWhiteSpace Uses Pattern_White_Space not White_Space
_isWhiteSpace claims to be based on \p{White_Space} but it seems actually to be using \p{Pattern_White_Space}. Is this expected behavior? A related unit test appears to be using the left-to right ...
0
votes
0
answers
85
views
Error: [@formatjs/intl Error MISSING_DATA] Missing locale data
My project that I am working on is using @formatjs/intl library. And one of the used locales is non existing 'la' locale. I need to figure out a workaround for this locale, the best way would be to ...
0
votes
0
answers
93
views
Format.js {select} matching with whitespace with react-intl
I'm trying to use the react-intl FormattedMessage component to match a phrase with whitespaces, but am receiving a "Message failed to parse" error due to one of the keys having a whitespace.
...
2
votes
1
answer
241
views
Formatjs / react-intl with Vite
Formatjs provides a babel plugin for modules that use react-intl to inject message IDs and remove description. How can I use it with Vite?
1
vote
0
answers
59
views
Unable to add library(intl-messageformat) to ojet project
I am trying to add intl-messageformat to my project, but i am getting undefined
when i tried to load the module.
In path_mapping.json
{
...
"libs": {
...
"intl-...
0
votes
0
answers
30
views
In ReactJS application Using Format.js library how can I convert date to date and time
I am new to React & Format.js. I need to do a small task which I am not able to do so. Please help me to convert date to date and time in my react js app format.js they used as a component it is ...
0
votes
1
answer
34
views
How do I convert ICU formatted strings into an TMX (Translation memory exchange) file?
I am attempting to aggregate multiple data sources and locales into a single TMX translation memory file.
I cannot seem to find any good documentation/existing tools on how converting into TMX format ...
4
votes
3
answers
188
views
How to make description prop mandatory in FormattedMessage components with eslint
I'm using react-intl and need all uses of FormattedMessage to contain a description prop so that the translators get some context about that string. I also need to enforce it with an eslint rule so ...
1
vote
1
answer
281
views
Intil.DisplayNames() undefined in Safari version < 14.1
The Intl.Displaynames() constructor enables the translation of language, region and script display names in Javascript.
Unfortunately, this is not supported in Safari versions < 14.1. (see https://...
0
votes
0
answers
198
views
How to use FormatJS to format date and time in the same way as in Intl.DateTimeFormat
In my react app I used the javascript Intl.DateTimeFormat() to format date and time in the way I need. Link to this Intl.DateTimeFormat()
I would like to move the same formatted date and time to the ...
0
votes
1
answer
101
views
Any way to pluralize with translations using formatjs?
I originally misunderstood the usage of , as it seems it's only used for single-language applications.
Is there a way to pluralize message that use translations as well? For example, we have a simple ...
1
vote
1
answer
359
views
If/else in FormatJS / React-intl
Is it possible to have an if/else in a FormatJS message?
Example
I have a boolean variable isDay that should determine what message is shown. When true I want to show the wording "Day" and ...
0
votes
0
answers
12
views
Error using multi-word matches with {key, select, matches}
I'm translating the Ghost CMS Admin UI using ember-intl for a personal project. I'm trying to use {key, select, matches} (reference) to avoid duplicating one translation many times.
In en-us.yaml I ...
0
votes
0
answers
30
views
<FormattedDate /> component is returning a day that's 1 day early - how do I handle this?
It seems like date conversions can be pretty funky.
I have a simple hard-coded date - expirationDate = "2050-01-01".
I want to use it in a formatted date component from the formatjs library ...
0
votes
0
answers
51
views
How to use '-' instead of '/' in React-intl date format
I'm using the React-intl/FormatJS library to format my date value and I would like to understand how I can change the format to be also with the '-' instead of '/' in the date.
example in CodeSandbox
...
0
votes
0
answers
65
views
formatjs not translating messages that appear in toasts?
I have an english compiled translation file like so:
...
"gjk3RX": [
{
"type": 0,
"value": "Failed to process card. An error occurred while ...
0
votes
0
answers
23
views
How in a React library developed as a package to pass locales from a higher level app where this package is intalled
My question regarding a best practice or a way to develop a library in React which has to support different locales using for example package called FormatJS.
I would like to know-how would be ...
0
votes
0
answers
32
views
Why FormatJS extract message sfrom only one folder
In my React project library I'm adding the FormatJS lib to have internalization.
I tried to follow up the documentation online but whatever I do the formatJS extract is extracting only from one folder ...
-1
votes
1
answer
369
views
Gatsby: WebpackError [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry
I'm using React Intl for internationalisation in my Gatsby app. The app runs fine as expected with npm start, but the build fails with an error during execution of npm run build command.
Code
// ...
0
votes
0
answers
134
views
Format.js extract FormattedMessage nested in component
Is it possible to run Format.js extract from its CLI and get the results from a FormattedMessage component nested in another component?
The component:
import React, {
FunctionComponent,
...
0
votes
0
answers
72
views
How to setup FormatJs extract path to get all messages from many folders and subfolders
In my project using React and FormatJS I have many folders and sub-folders and sub-folders and so on.
Setting up Formatjs extract and compile as
"extract": "formatjs extract 'src/(lib||...
1
vote
2
answers
267
views
Ignoring specific file path during Format.Js message extraction
When using Create React App and TypeScript, a file is auto-generated in the src directory: react-app-env.d.ts. This file seems necessary to support image imports as discussed here: https://github.com/...
0
votes
0
answers
135
views
React intl formatDate fractional seconds
I have been using react-intl to provide internationalisation for my web app. One aspect of the internationalisation is to format dates appropriately (e.g. en-US: MM/dd/yyyy vs en-GB: dd/MM/yyyy).
This ...
0
votes
0
answers
19
views
Couldn't Generate Translation Files FormatJS
I couldn't get the translation files generated. Can anyone please help?
const NTTracker = () => {
const intl = useIntl()
return (
<>
<FormattedMessage
description=&...
0
votes
0
answers
70
views
i18n with React - how to go about creating .json file for particular locales?
So in what I've read so far, it looks like you must write your own json files that correspond to your different locales and what those translated messages look like with keys and their values being ...
0
votes
1
answer
102
views
How to retain order of translations with FormatJS CLI?
When the messages are extracted they are ordered in the extraction file alphabetically according to their randomly generated ids. Is there any way to prevent that and have them ordered in the exact ...
1
vote
1
answer
405
views
How to use intl.formatRelativeTime() in the correct way
In my React app, I have to show info saying create 1 hour ago or 1 day ago and also plural as 10 minutes ago or 3 days ago. To achieve that I'm trying to use this API FormatJS and in the specific intl....
0
votes
1
answer
396
views
How to extract Text in a React application to json react-intl translation files
So I'm trying to add languages support to a React application using react-intl.
The application has the Text in the JSX code.
Is there a tool that can scan the code and generate ids for each Text and ...
3
votes
1
answer
2k
views
How to implement i18n into a micro-frontend application using Module Federation
What would you recommend for implementing i18n in a module federation micro-frontend next.js app?
At the moment (just starting) I got it working with react-intl by declaring the provider in the _app....
0
votes
1
answer
779
views
FormatJS CLI Extract
I'm trying to get formatjs setup for use with my app which uses react-intl, and i'm running into an issue when doing an extract using their CLI. I currently have custom components that embed the ...
2
votes
2
answers
1k
views
No messages returned when running formatjs extract on project. Any ideas of why?
So, I'm implementing a project in Electron and wanted to implement internationalization into it. I have a simple component that uses react-intl's FormattedMessage and a messages.js file with a ...
0
votes
1
answer
366
views
Getting a @formatjs/ecma402-abstract version1.3 found error: DateTimeFormat/skeleton.d.ts(4,13) ',' expected. TS1005 Error
In the React project I'm using "react-intl": "^5.6.8" and all of sudden it started breaking when running a dev server or building, throwing an error related to the formatjs:
/...
1
vote
1
answer
60
views
Adding new translations
I'm using FormatJS to localize my app. There's a handy CLI to extract all the translations from the code base. I can generate the en.json file, and send it to the translator. When I get the ...
1
vote
1
answer
1k
views
Error: Debug Failure. Output generation failed when running formatjs extract
When running formatjs extract this is what we got. From the stack trace it seems that the issue is from formatjs themselves. Feel like I am stuck on what the issue is here.
$ formatjs extract './src/**...
2
votes
1
answer
914
views
React-intl parse json array in locale file
I'm currently working with React-intl v. ^4.7.6. I have a folder called translations where all my locale translations are in. I use IntlProvider to select which file to load based on the user's ...
0
votes
1
answer
445
views
How to run formatjs compile?
How to run formatjs compile command without replacement of already translated messages?
Now I run it this way:
../../node_modules/.bin/formatjs compile lang/ru.json --out-file compiled-lang/ru.json
1
vote
1
answer
1k
views
How do I configure react-intl to have all dialect locales fall back to their parent language?
I've built a site that translates nicely between en and zh locales, using a select element. Now, I'd like to have my code choose the initial locale based on the value of navigator.language. This led ...
1
vote
1
answer
2k
views
react-intl become formatJs , how re-addlocaledata in react-native
I use react-intl for internationalization and in a component i get and set the locale-data
like that :
import fr from 'react-intl/locale-data/fr';
import en from 'react-intl/locale-data/en';
...
...
4
votes
0
answers
112
views
How to use format.js with node.js
I want to translate error messages on the backend written with the node using https://formatjs.io/ (REST API). Is it possible? I will do the translations based not "accept-language" header.
1
vote
1
answer
810
views
FormattedHTMLMessage not working after package-update (looking for alternative/fix)
We have recently updated our website's npm packages (react-intl version 4.5.1) and we are using react-intl. The problem is, that we used the FormattedHTMLMessage component which doesn't seem to be ...
2
votes
0
answers
5k
views
Casing of react-intl does not match the underlying filesystem
Current behavior
import { FormattedMessage } from 'react-intl
throws eslint error
module "<path>/node_modules/react-intl/lib/react-intl"
Casing of react-intl does not match the underlying ...
2
votes
1
answer
668
views
How do I use formatJS/CLI with create-react-app
Really dumb question - what's the correct glob format? I'm trying to run
formatjs extract ./src/**/*.js
But it's only going one level deep.
4
votes
3
answers
2k
views
Where to find locale for US in @formatjs/intl-relativetimeformat/dist/locale-data/
I'm migrating react-intl to version 3.0, and need to polyfill locale-data for IE. Specifically I want to load a polyfill of locale data for en-US. I can only find @formatjs/intl-relativetimeformat/...
3
votes
2
answers
6k
views
How to format a number to percentage with two decimals using FormatJs Message Syntax?
Using react-intl I have the following message:
serviceFee: {
en: 'Service fee: ({fee, number, percent})',
...
},
When I call
<FormatMessage id="serviceFee" values={{ fee: 0.0625 }} />
I ...
0
votes
2
answers
2k
views
How to internationalize ReactJS Web Application including Arabic language?
Looking for something compatible with ReactJS to make my Web Application multilingual along with RTL to LTR and vice-versa.
As per my research, I found NPM package called "react-intl" backed by Yahoo ...
0
votes
2
answers
1k
views
Is it possible to reuse `intl` context from IntlProvider?
I have a component (popup) that renders outside of the tree (aka portal), therefore losing the context of IntlProvider:
<IntlProvider locale="en">
<App />
</IntlProvider>
// * &...
0
votes
1
answer
681
views
Formatted message using Complex Message syntax plurar
I try to use FormattedMesage(React intl) to using formatting API. how to create one formatted message, with the plural?
Now:
const outputTimeOutValues = [
{value:'00:00:01', translationId:'...
2
votes
0
answers
107
views
react-intl composite message
I'm struggling to work out the best way to structure messages whereby one of the dynamic values also needs a translation.
For example if I have the message 'Type in Spanish...' I would like to use ...
1
vote
1
answer
2k
views
react-intl render react component as placeholder in formatMessage
I have a component, that uses the injectIntl-HOC, and returns a message
...
return (
<Message>
{intl.formatMessage({
id: 'page.checkout.hint'
}, {
link: <b>{intl....