Barrel Exports mess with "use client"directive

[buchananwill]

Summary

I'm not sure if this classes as a "bug" or is simply a badly documented quirk. I think at the very least, the Next.JS docs should make it very clear that barrel exports cause import errors, and the current error messages need to be improved to better trace the cause of the error. Cue story...

I've just spent an incredibly tedious four hours doing the "use client" dance, because I was only using a specific custom hook in SINGLE component, which already had the "use client" directive, but I was still getting the "import not allowed in server components" error. After some puzzle piecing and forum scouring, I pin-pointed the cause to having used barrel exports for a module within my project. This caused a server component that was importing two static constants, to rely on two plain javascript functions exported from the module's barrel. Elsewhere in that module there were forbidden hooks, but Next apparently was importing the whole shebang, and throwing all its toys out of the pram, along with the baby, bathwater, and kitchen sink, because the hooks weren't allowed in the server component.

The import trace looked like this:

// in page.tsx
import { initialEdges, initialNodes } from "@/app/demo/data/initial";

// in initial:
import {
  convertClosureDtoListToEdgeList,
  convertDataNodeDtoListToFlowNodeList,
} from "@/react-flow";

// in react-flow
export * from "./types";
export * from "./components";
export * from "./hooks";
export * from "./utils";

This is a Very Bad Idea(tm). (So I've learned.)

This original error message pointed to a hook that was only used in this component:

"use client";

import {
  EdgeWithDelete,
  FlowOverlay,
  useLayoutFlowWithForces,
} from "@/react-flow";

export default function ExampleLayoutFlowWithForces({
  children,
}: PropsWithChildren) {
  // 4. Call the hook to set up the layout with forces
  const { flowOverlayProps, reactFlowProps } = useLayoutFlowWithForces();

// (other code omitted)

Which, as you can see with your very own human eyes or screen reader, has the "use client" directive.

TL;DR:

Next: You've forgotten a "use client", mate.
Me: No, I haven't
[repeat times Graham's number]

Further to this puzzle, the bug/feature seems to only affect internal barrel exports, i.e. package.json friends can do what they diddly want.

"Why was I using barrel exports in the first place?", I hear you heckling from the back of the auditorium. Well, I was trying to prepare part of this project for slicing off into a separate package, as it is well contained and reusable across several of my other projects. Adding barrels seemed like the tidy thing. Cue further loss of hair.

Additional information

No response

Example

No response