With React-Intl, how do I fix error "Uncaught ReferenceError: No date format named: undefined"?

Question

Yahoo open-sourced a nice collection of internationalization tools for JavaScript, which they are calling FormatJS.

The guide to FormatJS mentions that dates come with default formats short, medium, long and full.

FormatJS provides integrations for Dust, Handlebars, and React.

When using the React mixin (React-Intl) in a npm-managed environment, I can’t seem to format a number.

From my component, I call

this.formatDate(this.props.guide.get('date'), 'short')

However, I get this error:

Uncaught ReferenceError: No date format named: undefined

My date is defined as 'short', which should be built-in. What gives?

Answer 1

You can use:

{this.formatDate(this.props.guide.get('date'), {
    day  : 'numeric',
    month: 'long',
    year : 'numeric'
})}

'short' is not built-in. It is decalred in the Render tab in guide to FormatJS like this:

var intlData = {
"locales": "en-US",
"formats": {
    "date": {
        "short": {
            "day": "numeric",
            "month": "long",
            "year": "numeric"
        }
    }
}