--turbo has trouble detecting client boundaries with headless ui

[richardasymmetric]

Link to the code that reproduces this issue

https://github.com/richardasymmetric/nextjs-create-context-turbo-bug

To Reproduce

1. Start the application with yarn dev
2. Notice that it runs and renders without any errors
3. Now, restart the application with yarn dev --turbo and notice that it throws an error:

 ⨯ TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:287:228
    at [project]/node_modules/@headlessui/react/dist/internal/close-provider.js [app-rsc] (ecmascript) (create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:298:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at getOrInstantiateModuleFromParent (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:613:12)
    at esmImport (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:986:182
    at [project]/node_modules/@headlessui/react/dist/headlessui.esm.js [app-rsc] (ecmascript) <exports> (create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:1012:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at getOrInstantiateModuleFromParent (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:613:12)
    at esmImport (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at create-context-turbo-bug/.next/server/chunks/ssr/[root of the server]__4370ba._.js:56:187
    at [project]/app/DropdownComponent.tsx [app-rsc] (ecmascript) (create-context-turbo-bug/.next/server/chunks/ssr/[root of the server]__4370ba._.js:148:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at getOrInstantiateModuleFromParent (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:613:12)
    at esmImport (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at create-context-turbo-bug/.next/server/chunks/ssr/[root of the server]__4370ba._.js:156:129
    at [project]/app/page.tsx [app-rsc] (ecmascript) (create-context-turbo-bug/.next/server/chunks/ssr/[root of the server]__4370ba._.js:196:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at getOrInstantiateModuleFromParent (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:613:12)
    at esmImport (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at create-context-turbo-bug/.next/server/chunks/ssr/[root of the server]__4370ba._.js:199:32
    at [project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component) (create-context-turbo-bug/.next/server/chunks/ssr/[root of the server]__4370ba._.js:201:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at getOrInstantiateModuleFromParent (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:613:12)
    at esmImport (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:4556:151
    at [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/page { COMPONENT_0 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_1 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", COMPONENT_2 => "[project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) <module evaluation> (create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:4564:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at getOrInstantiateModuleFromParent (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:613:12)
    at esmImport (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:4712:716
    at [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/page { COMPONENT_0 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_1 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", COMPONENT_2 => "[project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) <facade> (create-context-turbo-bug/.next/server/chunks/ssr/node_modules_974ea9._.js:4716:3)
    at instantiateModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:561:23)
    at instantiateRuntimeModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:621:12)
    at Object.getOrInstantiateRuntimeModule (create-context-turbo-bug/.next/server/chunks/ssr/[turbopack]_runtime.js:636:12)
    at Object.<anonymous> (create-context-turbo-bug/.next/server/app/page.js:6:26)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at mod.require (create-context-turbo-bug/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:177:18)
    at requirePage (create-context-turbo-bug/node_modules/next/dist/server/require.js:109:84)
    at loadComponentsImpl (create-context-turbo-bug/node_modules/next/dist/server/load-components.js:98:57)
    at async DevServer.findPageComponentsImpl (create-context-turbo-bug/node_modules/next/dist/server/next-server.js:723:36)
    at async DevServer.findPageComponents (create-context-turbo-bug/node_modules/next/dist/server/dev/next-dev-server.js:590:20)
    at async DevServer.renderPageComponent (create-context-turbo-bug/node_modules/next/dist/server/base-server.js:2043:24)
    at async DevServer.renderToResponseImpl (create-context-turbo-bug/node_modules/next/dist/server/base-server.js:2095:32)
    at async DevServer.pipeImpl (create-context-turbo-bug/node_modules/next/dist/server/base-server.js:945:25) {
  page: '/'
}

Current vs. Expected behavior

I expect it to just work with --turbo. It occurs in various forms going back into the 14.2 branch, maybe 14.1, but I wasn't really paying attention at the time to when it started breaking. According to this headlessui issue all their components have "use client" that need them, so my understanding is that it should be working as I have written it. However, if I add "use client" to the dropdown component (and remove the callbacks from props) it works with turbo.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #38-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun  7 15:25:01 UTC 2024
  Available memory (MB): 32038
  Available CPU cores: 16
Binaries:
  Node: 18.20.4
  npm: 
  Yarn: 
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.85 // Latest available version is detected (15.0.0-canary.85).
  eslint-config-next: N/A
  react: 19.0.0-rc.0
  react-dom: 19.0.0-rc.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[timneutkens]

I've reached out to @RobinMalfait (maintainer of headlessui):

@RobinMalfait :hi: Quick question, I'm looking at #68205 which reports that Turbopack couldn't find all client boundaries but this seems incorrect, it's finding all client boundaries but there is a client boundary missing because import { useClose as w } from "./internal/close-provider.js"; is re-exported from headlessui.esm.js: export { x as Description, n as Label, d as Portal, w as useClose };. That file does not mark itself as client boundary.

Easy fix:

• Add "use client" to https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/internal/close-provider.tsx#L1

Why it's found: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/index.ts#L24

I'll check with the team why that export is not shaken in Turbopack yet, I'm assuming it's related to useClose as w and then exporting that variable.

Regardless you'll want to apply the change mentioned above because right now the library works because the bundler shakes the code so it relies on the bundler being smart enough to do that, which not all RSC frameworks might have in the future (i.e. when you do a no bundling approach and such)

[philipp-spiess]

Thanks @richardasymmetric for the repro and @timneutkens for the investigation! I opened a PR to fix this in Headless UI.

Update: This should be available in the latest insiders release. You can try it by doing:

npm install @headlessui/react@insiders

[richardasymmetric]

As far as I can tell, the headlessui fix seems to fix this particular issue. Thanks!

[github-actions]

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