[NEXT-1112] "use client" doesn't work in 3rd-party library using "export * from"

[igordanchenko]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.4.1-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/tender-visvesvaraya-rhm6q7?file=%2Fapp%2Fpage.tsx

To Reproduce

1. Open the sandbox - https://codesandbox.io/p/sandbox/tender-visvesvaraya-rhm6q7?file=%2Fapp%2Fpage.tsx
2. Observe the following error in the preview window:

./node_modules/test-component/index.js
The requested module './Bar.js' contains conflicting star exports for the names '$$typeof', '__esModule' with the previous requested module './Foo.js'

Describe the Bug

The "use client" directive doesn't appear to be working as intended in 3rd-party libraries using export * from syntax.

Next.js produces the following error when I'm trying to use such 3rd-party library in a server component:

./node_modules/test-component/index.js
The requested module './Bar.js' contains conflicting star exports for the names '$$typeof', '__esModule' with the previous requested module './Foo.js'

I'm using the following sample library to demonstrate this issue.

index.js:

export * from "./Foo.js";
export * from "./Bar.js";

Foo.js:

"use client";
import * as React from "react";
export function Foo() {
    const [state, setState] = React.useState("Foo");
    return React.createElement(React.Fragment, null, state);
}

Bar.js:

"use client";
import * as React from "react";
export function Bar() {
    const [state, setState] = React.useState("Bar");
    return React.createElement(React.Fragment, null, state);
}

You can find the complete library code under the following gist - https://gist.github.com/igordanchenko/e64c9280113e768e8df6673cee7a6035

The "use client" directive doesn't appear to be working in the library entry point either. If I remove the "use client" from Foo.js and Bar.js, and add it to the index.js instead, Next.js errors out with the following error:

../test-component/index.js
Error: It's currently unsupport to use "export *" in a client boundary. Please use named exports instead.

Expected Behavior

It should be really straight-forward task for library authors to add the "use client" directive to their libraries, and export * from syntax should be supported.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1112

[sannajammeh]

Can confirm a similar issue running internal libs being compiled by transpilePackages. This only happens with --turbo enabled for me.

I have a monorepo with the ui package needing this in order for "use client"; directive to be recognised.

export * from "./components/Separator"; // Doesn't need "use client"
export {
  Popover,
  PopoverContent,
  PopoverPortal,
  PopoverTrigger,
} from "./components/Popover"; // has "use client" directive

[loick]

Hi there,

I can confirm as well, same issue on my side (same scenario, a UI package). However I'm not using --turbo yet I have the issue.

[riungemaina]

This is happening for me in a plain nexJS app.

  "dependencies": {
    "@types/node": "20.1.1",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "encoding": "^0.1.13",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.1",
    "firebase": "^9.21.0",
    "jotai": "^2.1.0",
    "next": "13.4.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.4"
  }

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.