Passing defaultTranslationValues to NextIntlClientProvider

[janoschherrmann]

In my app, I'm trying to pass some defaultTranslationValues to NextIntlClientProvider, but I'm getting the classic "can't pass functions to client components error".

 <NextIntlClientProvider
          locale={locale}
          messages={messages}
 defaultTranslationValues={{
            br: () => <br />,
            li: (chunks: ReactNode) => <li>{chunks}</li>,
            strong: (chunks: ReactNode) => <strong>{chunks}</strong>,
            em: (chunks: ReactNode) => <em>{chunks}</em>,
            b: (chunks: ReactNode) => <b>{chunks}</b>,
          }}
/>

Not sure what I could do differently to fix this. I tried adding the NextIntlClientProvider to a separare Provider component that is a client component, but then I get another error: Error: No intl context found. Have you configured the provider?

'use client';

import { NextIntlClientProvider, useLocale, useMessages } from 'next-intl';
import { ReactNode } from 'react';

export const Providers = ({ children }: { children: React.ReactNode }) => {
  const locale = useLocale();
  const messages = useMessages();

  return (
    <NextIntlClientProvider
      locale={locale}
      messages={messages}
      defaultTranslationValues={{
        br: () => <br />,
        li: (chunks: ReactNode) => <li>{chunks}</li>,
        strong: (chunks: ReactNode) => <strong>{chunks}</strong>,
        em: (chunks: ReactNode) => <em>{chunks}</em>,
        b: (chunks: ReactNode) => <b>{chunks}</b>,
      }}
    >
    {children}
    </NextIntlClientProvider>
  );
};

So that means, that NextIntlClientProvider can't be rendered from a client component? Not exactly sure how to proceed.

[amannn]

Can you try passing the messages from a Server Component to Providers? I think that's the issue in your example since useMessages tries to read from the provider, but that is only created by that very component (this is somewhat self-referential).

[janoschherrmann]

Yes, that does actually work, but I'm wondering if the way the docs describe this would ever work then?

Anyways, thanks for the quick help!

[amannn]

It depends a bit on if NextIntlClientProvider is rendered from a Server or Client Component. I guess an expandable section that explains this could help though. In case you're interested in adding one, I'd be happy to review a PR!

[janoschherrmann]

Got it! I'll put it into my to-do list for next week, right now I'm super busy unfortunately :/

[janoschherrmann]

Hey, so just to clarify for my PR: Would there be any other way to make this work, other than the pattern you suggested? I mean, when rendering NextIntlClientProvider from a server component, I can't pass functions, but if I render it from a client component, useMessages doesn't work.

So this would really be the only option, or am I missing something?

[amannn]

Yep, I think to sum up:

• defaultTranslationValues need to be configured in a Client Component if you intend to pass them to NextIntlClientProvider
• messages should be passed from a Server Component to a Client Component that renders the provider