Link component causing runtime error since upgrading to version 3.1+

[brandanking-decently]

Description

Since upgrading to version 3.1.0+ the Link component generated by the createSharedPathnamesNavigation is providing the following error when the Link is inside a radix ui component that uses slots.

Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

This error didn't exist in the release candidates of the next-intl package.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/devbox/next-intl-bug-template-app-forked-tl8gq7?file=%2Fsrc%2Fapp%2F%5Blocale%5D%2Fpage.tsx%3A15%2C53

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Click on open button
3. See error: Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

Expected behaviour

Revert next-intl to next-intl@3.0.0-rc.6 to see component working as expected

[amannn]

This is an interesting case. In your case, Link renders as a Server Component—however, you're using <DropdownMenuItem asChild>, which expects a Client Component.

The fix depends on your app, but in the simplified demo, page.tsx can be marked with 'use client'; to fix this. It would probably also work to only wrap the respective DropdownMenuItem along with Link in a Client Component.

Hope this helps!

[brandanking-decently]

This is an interesting case. In your case, Link renders as a Server Component—however, you're using <DropdownMenuItem asChild>, which expects a Client Component.

The fix depends on your app, but in the simplified demo, page.tsx can be marked with 'use client'; to fix this. It would probably also work to only wrap the respective DropdownMenuItem along with Link in a Client Component.

Hope this helps!

Hi, the asChild has no restrictions on whether the component is a client component or not, as if I just used the regular next/link component it works fine. Also it worked fine like this the the release candidates previously, it also works if I wrapped the Link component from next-intl in simple div tag.

As this broke during the release for RC to 3.1 release I'd expect this to have broken with some changes made in that last update

[sunxyw]

any updates?

[stefvw93]

@amannn I think reopening this issue should be considered. Can confirm we are also experiencing this exact issue. We have a working Link in a radix ui Slot, in a project that uses the release candidate. The same pattern results in the error OP reported, when using the stable next-intl version. Regardless of client or server component implementation.

[stefvw93]

The same error occurs when directly using React Children api to process the Link, for example Children.count, Children.array all result in the invalid React child error.

[amannn]

@stefvw93 I think there was a necessary change along the release candidate process where Link used to always be a Client Component, but now it's either a Server or Client Component, depending on where you import it from.

The issue is caused by the Radix asChild API, which is based on cloneElement—an API that only works for Client Components (more deatils here: #665 (comment)). I don't think this is something that next-intl can internally handle, but a restriction resulting from the React Server Components architecture.

Working example:

// LinkButton.tsx

import {Button} from '@radix-ui/themes';
import {Link} from '../navigation';

'use client';

export default function LinkButton({href, children}) {
  return (
    <Button asChild>
      <Link href={href}>{children}</Link>
    </Button>
  );
}

// page.tsx (a Server Component)

import {useTranslations} from 'next-intl';
import LinkButton from './LinkButton';

export default function IndexPage() {
  const t = useTranslations('IndexPage');
  return (
    <LinkButton href="/products">{t('products')}</LinkButton>
  );
}

Hope this helps!