[TextField] Server Component bundler error

[aq1]

Just started a new project. I wonder if Text Field is not meant to be used in server components?

Error: Could not find the module "/node_modules/.pnpm/@radix-ui+themes@2.0.0_@types+react-dom@18.2.14_@types+react@18.2.33_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/themes/dist/esm/components/text-field.js#TextField#Input" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

import { TextField } from "@radix-ui/themes"
export const default Page() {
  return <div><TextField.Input placeholder="Enter your email" /></div>
}

package.json

    "next": "^14.0.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/themes": "^2.0.0",

[vladmoroz]

Next.js should be able to interleave client and server components, but they currently don't work well with the dot notation (See vercel/next.js#51593).

Can you try importing the parts as TextFieldRoot, TextFieldInput, etc?

[A1X5H04]

Use 'use client' directive at top of your file.

[vladmoroz]

Use 'use client' directive at top of your file.

You don't need this with Radix Themes components, they already have "use client" where relevant

[notDemian]

Use 'use client' directive at top of your file.

You don't need this with Radix Themes components, they already have "use client" where relevant

Having the same issue, using "use client" directive solved it

[vladmoroz]

@notDemian have you tried importing the parts without the dot access? E.g. TextFieldRoot, TextFieldInput, rather than TextField.Root, TextField.Input?

[aq1]

@vladmoroz It worked, thank you. You can close the issue if you need.

[MaximoSerafini]

Buenas, tengo el mismo problema, ya intente sin el punto y con el "use client" y ninguno me funciono