Next.js: Text content did not match. Server when i'm using toLocaleDateString to format dates

Created on 18 Mar 2019  路  3Comments  路  Source: vercel/next.js

Bug report

Describe the bug

I'm trying to display dates depend on local, and for that, I'm using toLocaleDateString()
API
i would like to know how to fix this console error.

To Reproduce

class Review extends React.Component {
    render() {
        const { review, theme } = this.props;
        const componentStyle = theme.components.review;
        const reviewDate = new Date(review.date);
        const date = reviewDate.toLocaleDateString('de-DE');
        return (
            <React.Fragment>
                <time dateTime={date}>{date}</time> <Seprator>{review.name ? '|' : ''}</Seprator>{' '}
                <span>{review.name}</span>
                <RatingBar rating={review.rating} />
                <H4 margin={`${componentStyle.title.marginTop} 0 ${componentStyle.title.marginBottom} 0`}>
                    {review.title}
                </H4>
                <Paragraph>{review.text}</Paragraph>
            </React.Fragment>
        );
    }
}

Screenshots

image

Most helpful comment

It's now supported by Node v13

All 3 comments

the Locales argument de-DE isn't supported in your server (system) in my case it return 2019-3-19 because it's not supported in my system too, it's the same if I pass some false value like ee-UM but if I pass en-US it return 3/19/2019 which mean that if the passed value isn't supported or false toLocaleDateString will fallback to the default value in your system.
To solve this problem use a custom function

Falling back to the default system language is indeed the expected behavior, however maybe there could be a recommended way for adding languages files to next when not using an i18n library.

For instance, my app is only in French; I don't need an i18n solution. However new Date().toLocaleDateString('fr-FR') doesn't work server-side. The solution found so far is to install the full-icu package.
This is also in an _example_ using full-icu.

It seems overkill to add the whole ICU languages for one language though...

It's now supported by Node v13

Was this page helpful?
0 / 5 - 0 ratings

Related issues

olifante picture olifante  路  3Comments

sospedra picture sospedra  路  3Comments

knipferrc picture knipferrc  路  3Comments

lixiaoyan picture lixiaoyan  路  3Comments

irrigator picture irrigator  路  3Comments