CODEWITHSUNDEEP
javascriptreactjsreact-intl
喝茶的螃蟹
喝茶的螃蟹

Reputation: 144

React-Intl: Locale data added to IntlMessageFormat is missing a `pluralRuleFunction`

I'm recently use React-Intl for internationalisation in my Multiple Page React App.

I write a component "IntlProviderWithLocal" to add custom locale.

import React from 'react'
import {IntlProvider, addLocaleData} from 'react-intl';

import zh_CN from '../../../components/i18n/zh_CN/angular_locale'

export default (props) => {
    const {children, ...last} = props            

    addLocaleData(zh_CN);    
    return (
        <IntlProvider {...last} messages={zh_CN} >
            {children}
        </IntlProvider>
    )
}

But i get the Error:

Error formatting message: "publish.card.preview" for locale: "zh_CN", using default message as fallback

I set a BreakPoint in react-intl/lib/index.es.js, it shows the error throwed by var formatter = state.getMessageFormat(message, locale, formats).

The formats is a empty array. Step the function getMessageFormat,

return function () {
    var args = Array.prototype.slice.call(arguments);
    var cacheId = getCacheId(args);
    var format = cacheId && cache[cacheId];

    if (!format) {
        format = new (src$es5$$.bind.apply(FormatConstructor, [null].concat(args)))();

        if (cacheId) {
            cache[cacheId] = format;
        }
    }

    return format;
};

Finally I get a error Locale data added to IntlMessageFormat is missing a pluralRuleFunction for :zh_CN at format = new (src$es5$$.bind.apply(FormatConstructor, [null].concat(args)))();.

At this moment, args is ["预览", "zh_CN", Object], cacheId is "["预览","zh_CN",[]]" and format is undefined

Is there a way to add custom locale data correctly

Upvotes: 2

Views: 1446

Answers (1)

Christopher Chiche
Christopher Chiche

Reputation: 15335

You don't seem to pass your translations to the provider.

messages={zh_CN} should be a key value store containing your translations, such as: 

messages = {
    "publish.card.preview": "Preview"
}
return <IntlProvider {...last} messages={messages} >
    ...
</IntlProvider>

Upvotes: 1

Related Questions