Link component fails to render when parent uses asChild prop

[MeesEgberts]

Description

The Link component from next-intl is not rendering when used within a parent component that has the asChild prop set. This issue occurs specifically when trying to use the Link component inside a DropdownMenuItem from shadcn/ui or @radix-ui/react-dropdown-menu.

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://www.radix-ui.com/primitives/docs/components/dropdown-menu#dropdown-menu

Reproduction description

import ...

export async function DashboardHeaderAccountDropdown() {
  const t = await getTranslations("app.header.account-dropdown");

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary" size="icon" className="rounded-full">
          <CircleUser className="h-5 w-5" />
          <span className="sr-only">{t("toggle")}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>{t("title")}</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link
            className="flex items-center"
            href={{ pathname: "/app/account" }}
          >
            <Settings className="text-muted-foreground mr-2 h-4 w-4" />
            {t("settings")}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link href={{ pathname: "/app/account/security" }}>
            <Lock className="text-muted-foreground mr-2 h-4 w-4" />
            {t("security")}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        {/*<DropdownMenuItem>Logout</DropdownMenuItem>*/}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Expected behaviour

I've tried using the next/link component and it renders just fine, but here nothing gets rendered.

[amannn]

This issue was discussed before in #665 and #1271.

What causes the issue is that Radix uses cloneElement in a component that is marked with 'use client'. The component tries to modify the child, but in your case <Link /> is a Server Component, therefore the props can't be modified anymore in the Client Components render pass (esp. if you consider that they run on the client side).

Link from next-intl is currently either a Server or a Client Component, depending on the environment you're importing it from. The reason for this is that we can avoid shipping some code to the client if you're calling Link in a Server Component.

Due to this, a possible workaround is to call Link in a Client Component.

I'm currently working on an overhaul for the navigation APIs and will have a look at this topic to see if we can do something about this to improve the compatibility with libraries like Radix that use cloneElement.

I'm closing this in favor of #1271.

[amannn]

The feedback raised in this issue has been addressed as part of an upcoming createNavigation function (currently available as a prerelease here: #1391). In case you decide to give it a spin, let me know if everything works as expected for you!

Also, thanks again for the great feedback here! 🙏❤️

[amannn]

Sorry, upon further investigation, I found that Radix still doesn't seem to handle all cases. I got in touch with a maintainer of Raidx to hopefully resolve this upstream: radix-ui/primitives#2537 (comment)

[wottpal]

@amannn Is there any update on this as the upstream issue is closed but the behavior still persists?

[amannn]

A maintainer asked me to open a new issue instead: radix-ui/primitives#3165

[amannn]

I've also shared a workaround here btw.: #1271 (comment)