cards with SSR

[wsoule]

cards do not seem to be server side renderable, why is this? (i have not made any modifications to the generated card file) should this not be a server side component?

export const metadata: Metadata = {
  title: 'SignIn',
  description: 'Sign in page'
};

export default async function SignIn(): Promise<JSX.Element> {
  return (
    <Card>
      <CardContent>
        <p>hello</p>
      </CardContent>
    </Card>
  );
}

throws these errors:

Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
defaultContext
../node_modules/@radix-ui/react-context/dist/index.mjs (34:63)
$e698a72e93240346$var$createCheckboxContext
../node_modules/@radix-ui/react-checkbox/dist/index.mjs (26:91)
(rsc)/../../node_modules/@radix-ui/react-checkbox/dist/index.mjs

Uncaught Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at $c512c27ab02ef895$export$fd42f52fd3ae1109 (webpack-internal:///(rsc)/../../node_modules/@radix-ui/react-context/dist/index.mjs:37:95)
    at eval (webpack-internal:///(rsc)/../../node_modules/@radix-ui/react-checkbox/dist/index.mjs:33:92)

[kevinmitch14]

Are you importing directly from @radix-ui somewhere in your codebase instead of @/components/ui/...

[wsoule]

Are you importing directly from @radix-ui somewhere in your codebase instead of @/components/ui/...

no, all the radix is in the components ui dir

[kevinmitch14]

I am using Card with no issues. Looks like you are missing a "use client" somewhere maybe? Do you have a small reproducible example?

[wsoule]

I am using Card with no issues. Looks like you are missing a "use client" somewhere maybe? Do you have a small reproducible example?

Correct, it works fine with client side rendering, but why not server side rendering?

[kevinmitch14]

I mean I'm using it without use client. Card should work without use client!

[dan5py]

Hi @wsoule, this error appears when you try to use Client component features inside Server components. The message suggests that the issue is related to the checkbox component, try to check where you're using it, maybe you're missing the "use client" directive in it.

[amocarski]

@wsoule have you spotted the issue? Have the same error

[wsoule]

Not yet - I just put 'use client' at the top of the generated file. Not great, but a workaround I guess

On Fri, Mar 29, 2024, 08:56 amocarski @.***> wrote:

@wsoule https://github.com/wsoule have you spotted the issue? Have the same error

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/2868#issuecomment-2027210086, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARAKV4X2MEECCM2WPB6PTGDY2VJIFAVCNFSM6AAAAABD4W556KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRXGIYTAMBYGY . You are receiving this because you were mentioned.Message ID: @.***>

[catalinandreipreda]

I find it weird that in the error logs it seems the issue comes from @radix-ui/react-checkbox which is not imported in the code snippet or in the code the CLI generated for Card. Card only imports the cn utility and React.

Perhaps you are using @radix-ui/react-checkbox somewhere else and need a 'use client' there?

If anyone runs into this error and the call stack makes no sense for what you're importing double check the code does what you think it does: I ended up on this issue after seeing the same error message using Separator and the call stack included @radix-ui/react-select which made no sense for a presentational separator component. I was actually imporiting { Separator } from '@radix-ui/react-select'; instead of ui/separator because I was careless with the import I chose from vscode quick actions. I spent too much time on this 🤡

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.