What is the correct way to create a next.js v13 compatible library

[outer ember]

We use our own libraries to encapsulate component designs and functionality. When importing them into our main next.js application web pack erronously forces use client on those imported functions and components. Even something as simple as this triggers the error:

export function classNames(...classes: any[]) {
  return classes.filter(Boolean).join(' ')
}

Importing and using this function forces the component to 'use client'.

So the question is how should we set up react libraries correctly to not mess up with the primary's next.js bundler.

[ancient carbon]

if all your library have is this function then I would create an issue as a bug

you should only need 'use client' if you are using interactive hooks in a component

[outer ember]

The library contains other code as well (which uses useContext), so I think it might be a bundling issue that confuses webpack.

[ancient carbon]

yeah, probably

did you try having a separate entrypoint for server code?

like import { classNames } from 'lib/server'

or maybe the other way around, import { Component } from 'lib/client'

I think this makes more sense 🤔

[outer ember]

I'll give that a try. How did we end up in such a mess with all the bundlers over the years?? - LOL

[outer ember]

@ancient carbon so this is definitely a bundler problem on the library side. I think guidelines how to create a library that is compatible with next.js13 / server components and exposes typescript types would be super helpful. I'll create a github issue.