Best way to access things from a client module inside a server component

[JClackett]

Let's say I have a shared client component that is rendered in a load of places across my app, PostItem.tsx for example.

Ideally I'd like to specify the types for this PostItem in the same file, and because im using prisma it's possible to infer this type based on the selected fields:

"use client"
export const postItemSelectFields = {
  id: true,
  slug: true,
  title: true,
  description: true,
} satisfies Prisma.PostSelect

export type PostItem = Prisma.PostGetPayload<{ select: typeof postItemSelectFields }>

export function PostItem(props: {post: PostItem}) {
 // stuff
}

this means that any server component/page that is going to render that item could import this select fields object and I know that whenever the post item fields change the selected fields from the DB will change automatically and all types will work correctly - similar to defining a fragment in graphql and using that fragment in the top level query.

// some server page
const getPost = cache(async (slug: string) => {
  const post = await prisma.post.findUnique({
    where: { slug },
    select: {
      id: true,
      slug: true,
      // other things that may be needed
      ...postItemSelectFields, // pass fields here
    },
  })
  if (!post) redirect("/not-found")
  return post
})

However this is not possible as I cant import anything from a "use client" file in a server component, any ideas? currently having to make a file next to the PostItem called like postItemFields.ts, that handles just the select + type, so at least its semi-location, but not ideal really.

[icyJoseph]

I am a bit confused here, why can't you import use client into server components? How would one render a client component ever then (rhetorical question, sorry if it sounds a bit mean, not the intention)? Server Components can render client components as children, but the opposite is a so-called, not-supported pattern.

In the screenshot above from, https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers, they import a Carousel component from a use client module into a server component module (page). Am I missing something here?

[JClackett]

yeah its not the component its some random object, and yeah I agree it seems weird but I get this:

where industryOverviewSelectFields is defined in the client component, I understand that this may not be possible the other way round due to accidentally exposing secrets for examples, but surely importing things from client components would work?

[JClackett]

I just made a simplified version of it for discussion purposes, but essentially its just exporting this fields object from a client component and using it in the top level page function

[icyJoseph]

I ran into an even weirder issue:

'use client'

export const config = {foo : 'bar'}

And then, used that in a server component, and config.foo is typed as a function!

import { config } from "./client";

export default function Home() {
  console.log(typeof config.foo);
  return <h1>HelloWorld</h1>;
}

There's still edges to this whole client bundling rules that trip me up. I think since I've been designing things as server first, and keeping use client as the exception, I managed to fly past these things. The other day there was a couple of issues too were I had the wrong mental model.

[daangelov]

Did you figure out why this happens?

[petejodo]

this applies to export const SOME_CONSTANT = "some-constant" as well. When accessing from a server component, it looks to just be a {} rather than the constant

[petejodo]

this is actually fixed in canary 0c6dac4

here's the original issue #66212