Chakra UI中useDisclosure()报错：不是一个函数问题咨询

1. 检查Chakra UI版本 #

useDisclosure是Chakra UI v1.x及以上版本才提供的钩子，低版本不存在这个API。执行命令查看当前版本：

npm list @chakra-ui/react

若版本低于v1，升级到最新稳定版：

npm install @chakra-ui/react@latest @emotion/react@latest @emotion/styled@latest framer-motion@latest

2. 确认导入路径正确性 #

必须从@chakra-ui/react根模块导入，避免从子路径导入导致的模块解析错误：

// 正确写法
import { useDisclosure } from "@chakra-ui/react";

// 错误写法（会触发报错）
import { useDisclosure } from "@chakra-ui/react/hooks";

3. 清理重复依赖 #

项目中存在多版本Chakra UI会导致模块冲突，执行命令去重：

npm dedupe

或者彻底清理后重新安装：

rm -rf node_modules package-lock.json
npm install

4. 验证ChakraProvider包裹情况 #

确保应用根组件被ChakraProvider包裹（虽不直接引发该报错，但能避免其他连锁问题）：

import { ChakraProvider } from "@chakra-ui/react";

function App() {
  return (
    <ChakraProvider>
      {/* 你的侧边栏/抽屉组件 */}
    </ChakraProvider>
  );
}

5. 清理打包工具缓存 #

打包工具缓存可能导致旧模块未更新，按使用工具执行清理：

• Create React App：

npm run build -- --no-cache

• Vite：

vite --force

内容的提问来源于stack exchange，提问作者M. Varun Reddy