Formating dates does not work when using globals

[SalahAdDin]

Description

We are setting up some global formats for our website:

const formats: Partial<Formats> = {
  dateTime: {
    short: {
      day: "numeric",
      month: "short",
      year: "numeric",
    },
  },
};

export default getRequestConfig(async ({ locale }) => {
  if (!isValidLocale(locale)) notFound();

  const messages = {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
    home: { ...(await import(`./locales/${locale}/home.json`)).default },
  };

  return {
    messages,
    formats,
  };
});

And we use it on our component:

export const ContinueReadingArticleCard = ({
  category,
  publishedDate,
  title,
  thumbnail,
  slug,
}: ContinueReadingArticleCardProps) => {
  const format = useFormatter();

  return (
    <Link href={`/${category.slug}/${slug}`}>
      <article className={styles.continueReadingArticleCard}>
        <NextImage
          alt={thumbnail.alt}
          title={thumbnail.alt}
          className={styles.thumbnail}
          src={thumbnail.url}
          width={thumbnail.width || 1966}
          height={thumbnail.height || 1107}
          sizes="100vw"
        />
        <main>
          <p>
            <strong>{category.title}</strong>
            {format.dateTime(publishedDate,"short")}
          </p>
          <h6 className={styles.title}>{title}</h6>
        </main>
      </article>
    </Link>
  );
};

But it fails to format the date:

Mandatory reproduction URL

https://codesandbox.io/p/devbox/next-intl-bug-template-app-forked-v8pgz2

Reproduction description

Steps to reproduce:

1. Setup your globals.
2. Run the app.
3. Verify it does not work.

Expected behaviour

Now, if we use the format directly:

export const ContinueReadingArticleCard = ({
  category,
  publishedDate,
  title,
  thumbnail,
  slug,
}: ContinueReadingArticleCardProps) => {
  const format = useFormatter();

  return (
    <Link href={`/${category.slug}/${slug}`}>
      <article className={styles.continueReadingArticleCard}>
        <NextImage
          alt={thumbnail.alt}
          title={thumbnail.alt}
          className={styles.thumbnail}
          src={thumbnail.url}
          width={thumbnail.width || 1966}
          height={thumbnail.height || 1107}
          sizes="100vw"
        />
        <main>
          <p>
            <strong>{category.title}</strong>
            {format.dateTime(publishedDate, {
              day: "numeric",
              month: "short",
              year: "numeric",
            })}
          </p>
          <h6 className={styles.title}>{title}</h6>
        </main>
      </article>
    </Link>
  );
};

It works:

That's it what we expect to get from globals.

[amannn]

In the CodeSandbox you've provided, I can unfortunately not reproduce the issue:

Note that formats aren't automatically inherited by Client Components, maybe that's the issue you're seeing? In that case you can pass them explicitly to NextIntlClientProvider.

[SalahAdDin]

@amannn Yeah, I saw it and I don't understand why it is happening.

This example is in a server component rendered in a story (storybook) that is wrapped in a NextIntlClientProvider:

[amannn]

You need to add formats on NextIntlClientProvider.

I'll move this to a discussion since it seems to be a usage question.

[SalahAdDin]

In the case of the storybook, right? It must be working normally in NextJS.

[amannn]

Yep, depending on if you're rendering a component as a Server Component (default in Next.js) or a Client Component (Storybook, 'use client', …), either the config from i18n.ts or NextIntlClientProvider will be applied.