Headless UI Error: Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

Question

I am getting this error when trying to use a Tailwind UI component which uses headlessUI library:

import { Disclosure } from '@headlessui/react'

// React
{faqs.map((faq) => (
              <Disclosure as="div" key={faq.question} className="pt-6">
                {({ open }) => (
                  <>
                    <dt>
                      <Disclosure.Button className="flex items-start justify-between w-full text-left text-gray-900">
                        <span className="text-base font-semibold leading-7">{faq.question}</span>
                        <span className="flex items-center ml-6 h-7">
                          {open ? (
                            <MinusIcon className="w-6 h-6" aria-hidden="true" />
                          ) : (
                            <PlusIcon className="w-6 h-6" aria-hidden="true" />
                          )}
                        </span>
                      </Disclosure.Button>
                    </dt>
                    <Disclosure.Panel as="dd" className="pr-12 mt-2">
                      <p className="text-base leading-7 text-gray-600">{faq.answer}</p>
                    </Disclosure.Panel>
                  </>
                )}
              </Disclosure>
            ))}

Error:

Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules/@headlessui/react/dist/internal/open-closed.js (1:65)
(rsc)/./node_modules/@headlessui/react/dist/internal/open-closed.js
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/vendor-chunks/@headlessui.js (520:1)
__webpack_require__
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./node_modules/@headlessui/react/dist/components/disclosure/disclosure.js (10:82)
(rsc)/./node_modules/@headlessui/react/dist/components/disclosure/disclosure.js
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/vendor-chunks/@headlessui.js (430:1)
__webpack_require__
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./src/components/Faqs.jsx (7:108)
(rsc)/./src/components/Faqs.jsx
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/app/page.js (392:1)
__webpack_require__
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./src/app/page.jsx (9:74)
(rsc)/./src/app/page.jsx
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/app/page.js (337:1)
Function.__webpack_require__
file:///Users/harshamv/Sites/sprintsocial-website/.next/server/webpack-runtime.js (33:43)
runNextTicks
node:internal/process/task_queues (60:5)
listOnTimeout
node:internal/timers (540:9)
process.processTimers
node:internal/timers (514:7)
async eV
file:///Users/harshamv/Sites/sprintsocial-website/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:402872)
async tn
file:///Users/harshamv/Sites/sprintsocial-website/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:406599)
async to
file:///Users/harshamv/Sites/sprintsocial-website/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:407149)
async to
file:///Users/harshamv/Sites/sprintsocial-website/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:407280)
async tc
file:///Users/harshamv/Sites/sprintsocial-website/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (36:2057)
async
file:///Users/harshamv/Sites/sprintsocial-website/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (36:2576)

Answer 1

Anybody that lands here, make sure to add "use client".