Next.js 13 &14 + Park UI / Panda CSS / can't import DatePicker

[brianfeister]

I'm attempting to use the DatePicker component per the examples provided (thanks for providing this example baseline to clone and reproduce issues! 🙏 )

Here's a fork of the repo where, after upgrading to Next 14 (and also before with Next 13) I'm seeing an error

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/bfeister/dev/park-ui/examples/panda/react/next-js/src/lib/create-style-context.tsx:1:1]
 1 │ import {
 2 │   createContext,
   ·   ─────────────
 3 │   createElement,
 4 │   forwardRef,
 5 │   useContext,
   ╰────

I'm a bit confused because the // 'use client' directive isn't exactly something I want, I'd like to render these on the server, if possible, maybe you can explain that a bit for me and others coming across a similar issue?

Here is a fork of the repo with my (intended to be tiny / non-controversial) change:
brianfeister@05472b7

Here's a stackblitz of it
https://stackblitz.com/github/brianfeister/park-ui/tree/main/examples/panda/react/next-js

[cschroeter]

@brianfeister

Thank you for taking the time to create this issue. Unfortunately, there are many misconceptions about what use client means.

Ark UI, Radix, or any other component library uses React.Context to share information between different parts of a component, and the DatePicker is no exception. This is why in libraries like Ark or Radix, you'll find something like this:

banner: (x) =>
  ['index.cjs', 'factory.cjs', 'compose-refs.cjs'].includes(x.fileName)
  ? ''
  : `'use client';`,

This setup allows the component library to integrate seamlessly with your Next.js app. The create-style-context is similar to the concept of DatePicker.Context, but instead of sharing logic, it shares styling information. This means you don't need to specify the small size for each part of a DatePicker.

Does this mean a UI component never renders on the server?
No, that's not the case. In fact, even the DatePicker renders on the server. The key difference with a server component is that it hydrates on the client and uses client-only APIs, like the DOM/Window, to gather necessary information, such as window size, etc.

Conclusion:
Using use client is not inherently bad or something to avoid.

Further reading:
reactwg/server-components#4

[brianfeister]

@cschroeter really appreciate the clarifying context. I think I've got this working now

By the way, I'm really glad you're tackling both next JS and solid js with Park UI! Apologies in advance but I've got a similar problem in the solid start example you've got here. The difference is I don't think there's a "use client" directive for solid js. I have a feeling there's a problem with the provider pattern being used for style provider that doesn't work on the server and is causing a hydration mismatch

Opened a new bug for it here: #142