nx: 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

Create a Nextjs app using the Nx generator.
Enable the app directory by adding experimental: { appDir: true }, to next.config.js.
Create a React shared library using the Nx generator.
Add const [test, setTest] = useState('test'); to the auto generated component in the React lib.
Add 'use client'; to the top of the component.
Import the React component within the Nextjs app.
Run yarn start.
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:

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 12
Comments: 19 (2 by maintainers)

Most upvoted comments

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

Giboork on Dec 6, 2022

@ndcunningham I took a stab at a small repo to reproduce the issue. I am actually seeing different behavior than my main app - I can’t get any client components to load, but in my main app Client Components work fine when they are in the app, or from shared libraries that are re-exported with “use client” in the app.

Happy to help in any way with this - it is causing us a lot of pain since we have two apps in the same monorepo that need to share components. https://github.com/dankins/nx-nextjs-13194

dankins on Mar 10, 2023

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";

Brian-McBride on Dec 5, 2022

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.

yuvalotem1 on Nov 20, 2022

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)

yuvalotem1 on Dec 4, 2022