React client components don't work in Nx shared library. ('use client') Nextjs 13

[TheodorTomas]

Current Behavior

When trying to use a client component exported in a shared React component library within a Nextjs 13 app using the new NextJS app directory, Nx strips 'use client'; from the component resulting in the following error provided below.

Expected Behavior

Nx should recognize the 'use client'; syntax so that the component doesn't mount on the server but is instead recognized as a client component.

Steps to Reproduce

1. Create a Nextjs app using the Nx generator.
2. Enable the app directory by adding experimental: { appDir: true }, to next.config.js.
3. Create a React shared library using the Nx generator.
4. Add const [test, setTest] = useState('test'); to the auto generated component in the React lib.
5. Add 'use client'; to the top of the component.
6. Import the React component within the Nextjs app.
7. Run yarn start.
8. Notice the error message stating that 'use client'; is required to use client components.

Failure Logs

You're importing a component that imports client-only. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

Environment

NX Report complete - copy this into the issue template

Node : 18.11.0
OS : darwin x64
yarn : 1.22.19

nx : 15.0.13
@nrwl/angular : Not Found
@nrwl/cypress : 15.0.13
@nrwl/detox : Not Found
@nrwl/devkit : 15.0.13
@nrwl/esbuild : Not Found
@nrwl/eslint-plugin-nx : 15.0.13
@nrwl/expo : Not Found
@nrwl/express : Not Found
@nrwl/jest : 15.0.13
@nrwl/js : 15.0.13
@nrwl/linter : 15.0.13
@nrwl/nest : Not Found
@nrwl/next : 15.0.13
@nrwl/node : Not Found
@nrwl/nx-cloud : 15.0.2
@nrwl/nx-plugin : Not Found
@nrwl/react : 15.0.13
@nrwl/react-native : Not Found
@nrwl/rollup : 15.0.13
@nrwl/schematics : Not Found
@nrwl/storybook : 15.0.13
@nrwl/web : 15.0.13
@nrwl/webpack : 15.0.13
@nrwl/workspace : 15.0.13
typescript : 4.8.4

Local workspace plugins:

Community plugins:

[NachoVazquez]

I'm having the same issue.

[yuvalotem1]

Happens to me as well.
Also happens for server components when trying to use next/headers -
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
even when no 'use client' is presented.
I guess it doesn't recognize it as server nor client components and the functionality is limited.

[TheodorTomas]

There is one workaround to this bug.

1. Create a client component within your NextJS 13 app using the 'use client'; syntax.
2. Export your shared component from this new client component.
3. Use this new component solely within your app.

**note if you are export * from './lib' within your shared library you will need to change it so the client components are no longer exported from your shared library.

[marconms]

I am having the exact same issue.

I think, having to create a client component file in the app directory is not a sustainable solution; especially if the application consists of many components.

[TheodorTomas]

I am having the exact same issue.

I think, having to create a client component file in the app directory is not a sustainable solution; especially if the application consists of many components.

Yeah, I gave up on using the new app directory because I started getting the opposite issue with server components which was just causing too much of a headache. I think this actually might just be a Nextjs 13 issue. As you can see here shared components are still a work in progress.

[yuvalotem1]

To make next 13 work there is a need to make the library tree shakeable and separate server and client logic, also need to write build executor to keep "use client" (now its being dropped during build)

[Brian-McBride]

make the library tree shakeable

I thought all React component libs in Nx were tree shakable. Unless I've missed something huge anyway. It seems it is more about not stripping out "use client";

[Giboork]

We have the very same problem, if someone is looking for "workaround" we have decided to have a file in app root (app/sharedClientComponents.ts), which reexports any "client components" that would otherwise fail, the refactor wont be hard once we come up with proper solution. :-)

"use client";

import AddToCartButton from "@store/AddToCartButton";
import Cart from "@store/Cart";
import Input from "@store/Input";

export { AddToCartButton, Cart, Input };

[atanaskanchev]

We have the very same problem, if someone is looking for "workaround" we have decided to have a file in app root (app/sharedClientComponents.ts), which reexports any "client components" that would otherwise fail, the refactor wont be hard once we come up with proper solution. :-)

"use client";

import AddToCartButton from "@store/AddToCartButton";
import Cart from "@store/Cart";
import Input from "@store/Input";

export { AddToCartButton, Cart, Input };

Unfortunately this workaround didn't work for me with "next": "^13.0.7-canary.3",

   OS   : darwin arm64
   yarn : 1.22.19
   
   nx : 15.3.0
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.3.0
   @nrwl/detox : 15.3.0
   @nrwl/devkit : 15.3.0
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.3.0
   @nrwl/expo : 15.3.0
   @nrwl/express : Not Found
   @nrwl/jest : 15.3.0
   @nrwl/js : 15.3.0
   @nrwl/linter : 15.3.0
   @nrwl/nest : Not Found
   @nrwl/next : 15.3.0
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.3.0
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.3.0
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.3.0
   @nrwl/webpack : 15.3.0
   @nrwl/workspace : 15.3.0
   typescript : 4.9.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nrwl/vite: 15.3.0`

[hakobpogh]

We have the very same problem, if someone is looking for "workaround" we have decided to have a file in app root (app/sharedClientComponents.ts), which reexports any "client components" that would otherwise fail, the refactor wont be hard once we come up with proper solution. :-)

"use client";

import AddToCartButton from "@store/AddToCartButton";
import Cart from "@store/Cart";
import Input from "@store/Input";

export { AddToCartButton, Cart, Input };

This workaround worked for me. But I think this is a big issue. And it needs a fix.

[hugobb]

The workaround is working if you only use the client component in the app folder.
But I would like to be able to define a shared library of server component that can use client component from another shared library.
Any idea how this could be done ?

[jamiter]

I'm hoping for a way to tell Babel or Webpack to leave the use client; directive alone. Has anybody been able to do that?

[mrjomp]

@TheodorTomas how were you able to add appDir?

The type WithNxOptions only includes nx which is very "restrictive". Do we need to open a new issue to update WithNxOptions type which is passed as a parameter of withNx to include experimental as well?

Right now by default I'm getting this error.

Type '{ nx: { svgr: false; }; experimental: { appDir: boolean; }; }' is not assignable to type 'WithNxOptions'.