Next 13 apps directory 'use client' directive is used on all exports of a library

[merijnhofsteenge]

Current Behavior

Since nx 15.8.7 it is possible to use the 'use client' directive on nx libraries. It seems however that when an import is made from a library, all the other components exported from the same library get explicitly checked for whether they are client or server components. Some examples of this behaviour:

1. A library contains two files, each containing one client component. They are both exported. One component is used by the next app, and the other component is unused. The app only builds if the unused component is marked with 'use client'.
2. A library contains two files, one containing a server component and one containing a client component. The client component gets used in a client component in a different library. This is not possible, since next now sees the server component as being marked with 'use client', even though this is not explicitly done.

Expected Behavior

1. It should not matter if the component has the 'use client' directive or not, since it is not used.
2. Client and server components should be usable in the same library, even when some client components are used by different client libraries.

GitHub Repo

https://github.com/merijnhofsteenge/nx-next-13-use-client

Steps to Reproduce

Follow the readme of the repo

Nx Report

Node : 18.12.0
   OS   : darwin arm64
   npm  : 8.19.2
   
   nx                      : 15.8.7
   @nrwl/js                : 15.8.7
   @nrwl/jest              : 15.8.7
   @nrwl/linter            : 15.8.7
   @nrwl/workspace         : 15.8.7
   @nrwl/cli               : 15.8.7
   @nrwl/cypress           : 15.8.7
   @nrwl/devkit            : 15.8.7
   @nrwl/eslint-plugin-nx  : 15.8.7
   @nrwl/next              : 15.8.7
   @nrwl/react             : 15.8.7
   @nrwl/tao               : 15.8.7
   @nrwl/webpack           : 15.8.7
   @nrwl/nx-cloud          : 15.2.4
   typescript              : 4.9.5

Failure Logs

No response

Additional Information

No response

[jaysoo]

@merijnhofsteenge there is an issue with how Next.js is detecting server vs client components. One workaround for now is to do deep imports from a client component to another client component.

For example, if you update tsconfig.base.json with the following entry:

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "@nx-next-13-use-client/client-lib": [
        "libs/client-lib/src/index.ts"
      ],
      "@nx-next-13-use-client/mixed-lib": [
        "libs/mixed-lib/src/index.ts"
      ],
      "@nx-next-13-use-client/mixed-lib/*": [
        "libs/mixed-lib/*"
      ]
    }
  }
}

Then inside ClientHelloName.tsx in you can use this import:

import { ClientHello } from "@nx-next-13-use-client/mixed-lib/src/lib/ClientHello";

// ...

This will build properly since the ClientHello file has the use client directive. It looks like since exporting both ClientHello and ServerHello from mixed-lib/src/index.ts is causing the entire module to be marked as client-only.

[jaysoo]

I think the problem is here: https://github.com/vercel/next.js/blob/2820f0787512b6514e36c02cbddd4d3ab69f0251/packages/next-swc/crates/core/src/react_server_components.rs#L64

It looks like since the server component is being exported from index.ts, it is marked as an error since ClientHelloName.tsx is a client component but it imports from the mixed-lib/src/index.ts that has a forbidden import of next/head. https://github.com/vercel/next.js/blob/2820f0787512b6514e36c02cbddd4d3ab69f0251/packages/next-swc/crates/core/src/react_server_components.rs#L384

The workaround is as I highlighted above with deep imports, or to keep server and client libraries separate.

[jaysoo]

Unfortunately, there isn't much we can do from our end since this is the the logic in @next/swc. You can open an issue on the Next.js repo instead: https://github.com/vercel/next.js/issues/new/choose

We might make @nrwl/next:lib generate deep-import support by default so things like this are easier to resolve. We can also add a guide to nx.dev to highlight this use-case.

[github-actions]

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.