Use 'use client' or die.

[FrancoRATOVOSON]

Guys, I'm tired of it.

Context

I'm working in a monorepos to learn few things, the repo is here. In this project, I have a package packages/ui for shared components, so I'm using it as a component library. But, since I'm using those component for the nextjs app, and maybe for another vanilla reactjs or/and a remix app, I dont want to pollute every single component that use client side api (like browser api or hooks) with a 'use client', I prefer import and wrap them in a custom component in nextjs to add the 'use client' if I have to.

So, I have a bunch of component in the packages/ui package, and export all of them in an index.ts file.

Here's the thing

Sometimes, I'm importing a component from a nextjs that dont use any client side api, so I dont have to 'use client' it to make it work. And everything's fine with that, till something like this happen :

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
web:dev: Learn more: https://nextjs.org/docs/getting-started/react-essentials
web:dev: 
web:dev:    ,-[/home/franco/Documents/GitHub/e-commerce/packages/ui/src/components/CartElement/CartElement.tsx:1:1]
web:dev:  1 | import React, { memo, useState } from 'react'
web:dev:    :                       ^^^^^^^^
web:dev:  2 | 
web:dev:  3 | import { Trash2Icon as TrashIcon } from 'lucide-react'
web:dev:  4 | import { ProductCardInfos } from 'utils/types'
web:dev:    `----
web:dev: 
web:dev: Maybe one of these should be marked as a client entry with "use client":
web:dev:   ../../packages/ui/src/components/CartElement/CartElement.tsx
web:dev:   ../../packages/ui/src/components/CartElement/index.ts
web:dev:   ../../packages/ui/src/components/index.ts
web:dev:   ../../packages/ui/src/common/auth/form.tsx
web:dev:   ../../packages/ui/src/common/auth/index.ts
web:dev:   ../../packages/ui/src/common/index.ts
web:dev:   ./app/(registering)/layout.tsx

In this error, in app/(registering)/layout.tsx, I'm importing component from packages/ui/common/*, and this imported component also import some other from packages/ui/component*. Note that in my packages/ui/package.json I have this :

"exports": {
    ".": "./src/index.ts",
    "./common": "./src/common/index.ts",
    "./icons": "./src/Icons/index.tsx",
    "./types": "./src/types.ts",
    "./utils": "./src/utils/index.ts"
  }

In app/(registering)/layout.tsx, the import look like this: import { AuthLayout } from 'ui/common', and in packages/ui/src/common/auth/layout.tsx I have this: import AppLogo from '../../components/AppLogo'. None of all component I listed above use any client side api that will require a 'use client'.

So, where's the error from ?

Just because I dont want to put a 'use client' in the packages/ui/src/components/CartElement/CartElement.tsx and it is re-exported in the same index.ts file as all the other components I use (that, I repeat, abseolutely dont need any client side api so not puting the use client is not a crime), nextjs yells at me ?

What to do ?

Because the 'use client' gymnastic can be fun (maybe) for 5 min, but having this error everytime I make a new component and I forget to wrap and re-export it in nextjs is exhausting.

So that's the thing ? Now, you have to 'use client' or be cursed with some annoyng errors ?

[jahirfiquitiva]

I think you could just add "use client"; to the packages/ui/src/components/CartElement/CartElement.tsx component. The other components should be re-exported fine without it, if they don't use the client side or state apis.

That is, if you know a component is using client side or state apis, that make it a client component, you should add "use client" to it ... even if it is in a different package or folder, adding it only to the component that needs it, should be enough.

[icyJoseph]

I think they mean that, they are not using that component, and while there seems to be a mix up with what use client actually does, they are just using another component AppLogo, through a common entry point though, aka barrel file.

[icyJoseph]

Hi,

use client means bundle to ship to a browser. It is a hint to bundlers, amongst other things, but unfortunately, many tech-influencers jumped the gun and used language that made it sound like these are correlated to browser API usage, which is again, not the case.

One would use a use client directive to hint at interactivity rather, that this module contains JavaScript that runs client side.

And since useState and a few others, do need JavaScript to do the state updates and such, you need the use client directive when using them.

It becomes a bit more annoying when barrel files are at play, because those mix concerns from various modules, and, to be honest, I am not 100% cut clear on whether bundlers can, today, see through the barrel file mess, and figure out client usage. Clearly in your case it doesn't, because you are using AppLogo.

I can understand the negative to pollute your UI code with use client though.

One trick, however, silly and dirty, is to re-export on the project.

'use client'
export { AppLogo } from 'ui/common'

And yeah it sucks because that AppLogo will ship JavaScript to the client, even if it has no interactivity.

I would have expected ESM modules to cut through this one, and only bring the AppLogo though.

I am also concerned about this in a couple of projects I am working with. Will monitor this thread for more info.

[FrancoRATOVOSON]

I discussed this with some people and the misunderstanding is often about the utility (or not) of 'use client' and they tried to explain to me the benefit of understanding the separation between server and client component.

My point is much simpler (but stil opinionated), I think 'use client' should be used only where it's important to make the separation. I dont think it has its place in a component library, especially in a monorepos when those components are meant to be use elsewhere, like in a place where thinking of such separation is a non sense (for example a full csr app).