"useDisclosure is not a function"

[t3db0t]

I'm trying to implement a Modal and have followed the example code precisely, but I'm getting this:

Unhandled Runtime Error
TypeError: (0 , _nextui_org_react__WEBPACK_IMPORTED_MODULE_11__.useDisclosure) is not a function

on this line

const {isOpen, onOpen, onOpenChange} = useDisclosure();

I am importing useDisclosure correctly, and I can't see anything else wrong. Has anyone run into something like this?

[jrgarciadev]

are you importing it from v2 package?

import {useDisclosure} from '@nextui-org/react';

https://codesandbox.io/p/sandbox/3tq4rf?file=%2FApp.jsx&utm_medium=sandpack

[t3db0t]

Did v2 just come out? I think the problem might be that I'm using the previous version and the API changed somewhat drastically

[jrgarciadev]

Yes, due to we switch from Stitches to TailwindCSS the backwards compatibility was hard to maintain. V2 is now the default one

[brendalf]

If you're still having this issue, add 'use client' in the beginning of your file.

[devhasibulislam]

worked for me 2!

[print-VarunSharma]

why does 'use client' fix the issue? Thank you!

[phoebe-uw]

this worked for me, thanks!

[Vicky522]

thank u <3

[saehfulamri]

thanks, worked for me

[devhasibulislam]

why does 'use client' fix the issue? Thank you!

The error you're encountering, TypeError: (0 , _nextui_org_react__WEBPACK_IMPORTED_MODULE_11__.useDisclosure) is not a function, suggests that there's an issue with the way you're using useDisclosure from the Next UI library in your Next.js project.

Adding use client might appear to fix the issue because it might ensure that the code is executed only on the client side, which could potentially resolve issues related to server-side rendering (SSR) or differences in behavior between client and server environments.

Next.js provides a distinction between code that runs on the client side and code that runs on the server side. Sometimes, certain functions or hooks should only be used on the client side due to their reliance on the browser environment or other client-specific features.

Adding use client (assuming it's a valid construct in your codebase, although it's not standard Next.js syntax) might be a way to ensure that the problematic code is only executed in the client environment, where it's expected to work correctly.

However, without more context about your code and the specific problem you're encountering, it's challenging to provide a precise solution. It would be helpful to see the relevant code where you're using useDisclosure and how it's being imported and utilized within your Next.js project.

[print-VarunSharma]

Thank you for the prompt response on this! 🙏🏽

The environment instantiation makes sense. I was simply calling it as expected from the nextui package, but I'm curious on a more granular level as to exactly why useDisclosure only works in a client based component.

[devhasibulislam]

Yeah 😅

Sometimes you can use prompt response for such problems.