Resolve React Error "Uncaught ReferenceError: No date format named: undefined" with React Intl

This guide covers how to internationalize your app using React Intl, which contains various functions to format data, including date format.

Oct 27, 2020 • 5 Minute Read

Subscribe to the newsletter

Introduction

React apps come with features such as state, props, lifecycle hooks, hooks functions, and so on. For a worldwide audience, your app should be configured so well that people in every country can access all of your app features.

The term “internationalization” refers to providing the app with additional language support. Your internationalized app will not miss any customer from any corner of the world. To achieve this, libraries such as React Intl are used. This guide describes how to implement and use React Intl, which contains various functions to format data, such as date format, and it uses formatjs as a supporting library.

Configure the React Intl Package

The library react-intl uses formatjs, which contains various functions that support formatting data for internationalization purposes.

Let's install the library using the NPM command below.

      npm install react-intl

After installing the package, you can initialize it and use various functions to format a message based on the required feature.

Here is an example using the react-intl function formatMessage.

      function () {
    const message = defineMessages({
        messageText: {
            id: 'app.message',
            defaultMessage: 'Hello, {message} !!!',
            description: 'This is test description',
        },
    })

    return intl.formatMessage(message.messageText, { message: 'FOO' })
}
    

The intl is an initialization object followed by the function name formatMessage(), which accepts the two different arguments.

Defined message object
Additional message value

The message will get internationalized after providing both arguments based on the desired configuration for the internationalization.

Fixing Error Uncaught ReferenceError: No Date Format Named: Undefined

While using internationalization libraries such as react-intl, issues may arise, and one of the most common issues is message formatting.

Specifically, you might get the error no date format related to the supported format for the date values. If you do not format the date from the available date formats from formatjs, you may get various format errors.

There are two options available to format the date, which is explained below.

Using FormattedDate Without Format Specification

The standard approach uses the function FormattedDate with the date value without using the date format specification.

      import React from "react";
import {
    IntlProvider,
    FormattedDate,
} from "react-intl";

export default class extends React.Component {
    render() {
        const message = {
            myMessage: "Ceci est une chaîne"
        };
        return (
            <div>
                <IntlProvider
                    messages={message}
                    locale="fr"
                    defaultLocale="en"
                >
                    <p>
                        <FormattedDate value={new Date(1457832991843)} />
                    </p>
                </IntlProvider>
            </div>
        );
    }
}
    

In this example, the function is imported from the package react-intl.

      import {
    IntlProvider,
    FormattedDate,
} from "react-intl";
    

The initProvider initializes the react-intl instance and uses its feature, and one of the functions used is FormattedDate.

Internationalization is initialized with the provider <InitProvider> along with various props such as messages, locale, and defaultLocale, which specifies the local language. But to format the date, an additional component called <FormattedDate>is used, as demonstrated below.

      <FormattedDate value={new Date(1457832991843)} />

The “value” props are used with the component to provide the date value, which gets converted to the default format dd/mm/yyyy.

Using FormattedDate With Date Formats

The date can also be formatted using various configurations, such as the day, month, and year format.

Available formats for the day:

2-digit

Available formats for the month:

Long
Short

Available formats for the year:

Numeric

The date can be formatted using all of the above formats with the respective categories based on the functional requirement. Below is a simple example of formatting a date with date formats.

      <FormattedDate
    value={new Date(1457832991843)}
    year="numeric"
    month="long"
    day="2-digit"
/>
    

The formats for date values can be numeric, long, and 2-digit, so the resulting data can be returned as 13 March 2016.

You can try both approaches to formatting dates, i.e., with or without the date format properties.

Conclusion

Because of its ability to help apps reach a wider audience, the internationalization feature is one of the most critical features of any app. It can make sure that desired messages and values are transformed based on the local language where the app is being accessed.

We have created this guide to resolve the formatting issue commonly faced by developers implementing internationalization. I hope it helps you with your project needs.

If you have any questions, feel free to contact me at CodeAlphabet.