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

TheodorTomas · 2022-11-16T08:09:49Z

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:

The text was updated successfully, but these errors were encountered:

NachoVazquez · 2022-11-19T12:47:20Z

I'm having the same issue.

yuvalotem1 · 2022-11-20T18:21:44Z

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 · 2022-11-22T14:01:10Z

There is one workaround to this bug.

Create a client component within your NextJS 13 app using the 'use client'; syntax.
Export your shared component from this new client component.
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 · 2022-11-30T13:01:09Z

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 · 2022-11-30T13:41:07Z

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 · 2022-12-04T09:00:29Z

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 · 2022-12-05T23:47:32Z

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 · 2022-12-06T14:51:38Z

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 · 2022-12-08T14:16:22Z

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 · 2022-12-13T08:19:29Z

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 · 2022-12-14T20:10:47Z

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 · 2023-02-02T15:11:17Z

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 · 2023-02-11T21:37:13Z

@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'.

ndcunningham · 2023-03-10T20:24:13Z

@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'.

I am not sure which version of Nx you are on but WithNxOptions extends NextConfig which should allow you to add that experimental property. https://github.com/nrwl/nx/blob/master/packages/next/plugins/with-nx.ts#L3 @mrjomp

@TheodorTomas thanks for reporting the issue, can you create a small repo so I can accurately look into this?

dankins · 2023-03-10T21:48:09Z

@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

FrozenPandaz · 2023-03-15T22:22:44Z

This should work with #15650

dankins · 2023-03-15T23:49:34Z

Thanks for this! I migrated to 15.9.0-beta.2 in my minimal example and can confirm that things work as expected 🎉

tiagobnobrega · 2023-03-20T22:14:16Z

Hi... this is not working for me importing js libs (npx nx g @nrwl/js:lib mylib-wp) from nx.
I've set up a minimal example repo: https://github.com/tiagobnobrega/nx-nextjs-1590b2
I'm getting the following output from nx serve web-app:

error - ./pages/_app.tsx:5:0
Module not found: Can't resolve '@nextjs-test/mylib-wp'
  3 | import './styles.css';
  4 | // import { mylib } from '@nextjs-test/mylib';
> 5 | import {mylibWp} from '@nextjs-test/mylib-wp'
  6 |
  7 | function CustomApp({ Component, pageProps }: AppProps) {
  8 |   console.log('My lib:' + mylibWp());

I also added a nextjs lib using npx nx g @nrwl/next:lib mylib-next, and this one works. Any idea were to look for differences?

EDIT: Open the following issue since this one is already closed: #15785

github-actions · 2023-04-20T00:06:27Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

TheodorTomas added the type: bug label Nov 16, 2022

AgentEnder added the scope: nextjs Issues related to NextJS support for Nx label Nov 16, 2022

jamiter mentioned this issue Mar 10, 2023

RFC: React Server Module Conventions v2 reactjs/rfcs#227

Merged

ndcunningham added the blocked: repro needed label Mar 10, 2023

ndcunningham self-assigned this Mar 10, 2023

ndcunningham removed the blocked: repro needed label Mar 13, 2023

mandarini mentioned this issue Mar 14, 2023

fix(nextjs): refactor how webpack config is loaded with nextjs #15650

Merged

4 tasks

FrozenPandaz closed this as completed Mar 15, 2023

github-actions bot added the outdated label Apr 20, 2023

github-actions bot locked as resolved and limited conversation to collaborators Apr 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

TheodorTomas commented Nov 16, 2022 •

edited

Loading

NachoVazquez commented Nov 19, 2022

yuvalotem1 commented Nov 20, 2022 •

edited

Loading

TheodorTomas commented Nov 22, 2022 •

edited

Loading

marconms commented Nov 30, 2022

TheodorTomas commented Nov 30, 2022

yuvalotem1 commented Dec 4, 2022 •

edited

Loading

Brian-McBride commented Dec 5, 2022

Giboork commented Dec 6, 2022 •

edited

Loading

atanaskanchev commented Dec 8, 2022

hakobpogh commented Dec 13, 2022

hugobb commented Dec 14, 2022 •

edited

Loading

jamiter commented Feb 2, 2023 •

edited

Loading

mrjomp commented Feb 11, 2023

ndcunningham commented Mar 10, 2023 •

edited

Loading

dankins commented Mar 10, 2023

FrozenPandaz commented Mar 15, 2023

dankins commented Mar 15, 2023

tiagobnobrega commented Mar 20, 2023 •

edited

Loading

github-actions bot commented Apr 20, 2023

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

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

Comments

TheodorTomas commented Nov 16, 2022 • edited Loading

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

Local workspace plugins:

NachoVazquez commented Nov 19, 2022

yuvalotem1 commented Nov 20, 2022 • edited Loading

TheodorTomas commented Nov 22, 2022 • edited Loading

marconms commented Nov 30, 2022

TheodorTomas commented Nov 30, 2022

yuvalotem1 commented Dec 4, 2022 • edited Loading

Brian-McBride commented Dec 5, 2022

Giboork commented Dec 6, 2022 • edited Loading

atanaskanchev commented Dec 8, 2022

hakobpogh commented Dec 13, 2022

hugobb commented Dec 14, 2022 • edited Loading

jamiter commented Feb 2, 2023 • edited Loading

mrjomp commented Feb 11, 2023

ndcunningham commented Mar 10, 2023 • edited Loading

dankins commented Mar 10, 2023

FrozenPandaz commented Mar 15, 2023

dankins commented Mar 15, 2023

tiagobnobrega commented Mar 20, 2023 • edited Loading

github-actions bot commented Apr 20, 2023

TheodorTomas commented Nov 16, 2022 •

edited

Loading

yuvalotem1 commented Nov 20, 2022 •

edited

Loading

TheodorTomas commented Nov 22, 2022 •

edited

Loading

yuvalotem1 commented Dec 4, 2022 •

edited

Loading

Giboork commented Dec 6, 2022 •

edited

Loading

hugobb commented Dec 14, 2022 •

edited

Loading

jamiter commented Feb 2, 2023 •

edited

Loading

ndcunningham commented Mar 10, 2023 •

edited

Loading

tiagobnobrega commented Mar 20, 2023 •

edited

Loading