TypeError: (0 , import_react14.createContext) is not a function (Next.js 13)

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.4

What browser are you using?

Chrome Version 107.0.5304.88 (64-bit)

Reproduction URL

https://github.com/colecline22/test-next https://codesandbox.io/p/github/colecline22/test-next/headless-error

Describe your issue HeadlessUI components are not working in Next.js 13 due to createContext.

error - (sc_server)/node_modules/@headlessui/react/dist/headlessui.dev.cjs (810:48) @ eval
error - TypeError: (0 , import_react14.createContext) is not a function
    at eval (webpack-internal:///(sc_server)/./node_modules/@headlessui/react/dist/headlessui.dev.cjs:801:48)
    at Object.(sc_server)/./node_modules/@headlessui/react/dist/headlessui.dev.cjs (/project/test-next/.next/server/app/page.js:1076:1)
    at __webpack_require__ (/project/test-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./src/components/Button.jsx:6:75)
    at Object.(sc_server)/./src/components/Button.jsx (/project/test-next/.next/server/app/page.js:405:1)
    at __webpack_require__ (/project/test-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./src/app/page.jsx:6:76)
    at Object.(sc_server)/./src/app/page.jsx (/project/test-next/.next/server/app/page.js:394:1)
    at __webpack_require__ (/project/test-next/.next/server/webpack-runtime.js:33:42)
    at Object.page (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.jsx&appDir=%2Fproject%2Ftest-next%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fproject%2Ftest-next&isDev=true&tsconfigPath=tsconfig.json!:19:96) {
  type: 'TypeError',
  page: '/'
}

[KjellConnelly]

Hopefully they’ll add a way to call a component a client component without having to add "use client" to the top of every file and wrapping it. Fortunately, Next13 is not stable yet, so expect some better solution than wrapping every UI component with this. (Btw, you could just add this to every file you use a client component in (everything with hooks like useState), but in order to get server components, you want to only "use client" as minimally as possible. Which is why I hope they make it easier very soon.

[RobinMalfait]

This is a Next.js/React “issue” (by design) but the development experience is not ideal.

The problem is that createContext, useEffect and friends don’t work in server components which is the default for the new app directory.

You can solve this by using the "use client" directive in the file you use Headless UI components in so that they are client components and not server components.

Don’t be confused by the name, because SSR still works.

More info: https://beta.nextjs.org/docs/rendering/server-and-client-components#convention