Handling dates

🙋Get Help
#1

When showing posts from wordpress and presenting a date. I get the following warning the console:
Warning: Text content did not match. Server: "January 20, 2021" Client: "20 januari 2021"

Im first using the code from the mars theme to get the date:
const data = state.source.get(state.router.link);
const post = state.source[data.type][data.id];
const date = new Date(post.date);

When presenting the date I want to adjust it to a Swedish format:
date.toLocaleDateString("sv-SE", { month: "long", day: "numeric", year: "numeric" })

Are there server options I need to adjust, or why is frontity comparing server date with the client date?

#2

Hi @adam

Confirming this issue - I was able to reproduce it. @David are you able to advise?

#4

Of course!

That warning is returned by React because the HTML code returned by the server doesn’t match the one generated in the browser during hydration.

The problem, though, is related to the Node version you are using. Before Node 13.0, the toLocaleDateString() method doesn’t handle the locale argument ("sv-SE" in your code), it just ignore it. As stated in the MDN documentation for that method:

Before version 13.0.0, only the locale data for en-US is available by default. When other locales are specified, the function silently falls back to en-US .

You can just update the Node version to solve this. If you cannot update it, I guess you would have to use a different way to localize dates.

Hope it helps!

#6

Thanks @David.

@adam I’ve tested and can confirm that updating node to a recent version fixes this.

#7

Thanks for the help!