如何修复Next.js中useDisclosure不是函数的TypeError错误

错误原因 #

useDisclosure 函数在NextUI新版本（如v3）中已从 @nextui-org/react 包迁移至 @nextui-org/modal 包，原导入路径不再有效，因此触发「不是函数」的类型错误。

解决步骤 #

1. 修正导入路径 #

将原有导入代码调整为：

import {Button, Checkbox, Input, Textarea} from "@nextui-org/react";
import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure} from "@nextui-org/modal";

把 useDisclosure 的导入源从 @nextui-org/react 转移到 @nextui-org/modal 中。

2. 确保依赖版本匹配 #

检查项目中 @nextui-org/react 和 @nextui-org/modal 的版本是否一致，若存在版本差异或未安装对应包，执行以下命令重新安装：

# 使用npm
npm install @nextui-org/react @nextui-org/modal --save

# 使用yarn
yarn add @nextui-org/react @nextui-org/modal

3. 清除缓存并重启服务 #

缓存可能导致模块解析异常，执行以下操作：

• 删除项目根目录下的 .next 文件夹
• 重启开发服务器：

npm run dev

或直接带清除缓存参数启动：

npm run dev -- --clear-cache

内容的提问来源于stack exchange，提问作者Enea Hysa