Getting "webpack_require is not a function" error when using headlessui/react

[DJFriar]

In my project I am using this TailwindUI component. It gives the error that I have to add 'use client' to the top of the file; however when I do that, I get the following error:

The only modules used from headlessui/react are Disclosure, Menu, and Transition.

Pertinent Info

• headlessui/react: 1.7.15
• next: 13.4.9
• react: 18.2.0
• react-dom: 18.2.0
• node: 20.3.1
• tailwindcss: 3.3.2
• typescript: 5.1.6

The app was created using npx-create-next-app. I am using App routing, without an src folder.

Things I have tried

• Added 'use client' to the top of my navigation component.
• Added reactStrictMode: false to my next.config.js`.
• Stripped out all the headlessui imports to ensure there was no other issue with the TailwindUI code.
• Deleted the .next folder and re-ran npm run dev.
• Deleted the node-modules folder and package-lock.json file and then re-ran npm i and npm run dev