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

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:

[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 };

[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.