NextJS+MUI项目中useScrollTrigger导入报错：default不是函数

问题现象 #

使用NextJS 14.2.3和MUI 5.15.18构建项目时，导入useScrollTrigger函数出现报错：

TypeError: (0 , mui_material_useScrollTrigger__WEBPACK_IMPORTED_MODULE_2_.default) is not a function

解决方案 #

1. 修正导入方式（最常见原因） #

useScrollTrigger是命名导出而非默认导出，若使用默认导入会触发该错误。
错误写法：

import useScrollTrigger from '@mui/material/useScrollTrigger';

正确写法：

import { useScrollTrigger } from '@mui/material/useScrollTrigger';

2. 确保MUI依赖版本统一 #

检查package.json中所有MUI相关包（如@mui/material、@mui/system、@mui/icons-material等）的版本是否均为5.15.18，版本不一致可能导致导出逻辑冲突。
执行命令重新安装统一版本：

npm install @mui/material@5.15.18 @mui/system@5.15.18 @mui/icons-material@5.15.18

3. 标记组件为客户端组件（App Router场景） #

若Navbar.tsx位于NextJS App Router目录下（app/文件夹），需在文件顶部添加'use client'指令——useScrollTrigger是客户端专属Hook，无法在服务端组件中运行：

'use client';

import { useScrollTrigger } from '@mui/material/useScrollTrigger';
// 其余组件代码

4. 清理依赖与框架缓存 #

• 删除node_modules、package-lock.json（或yarn.lock）文件
• 重新安装依赖：npm install
• 清理NextJS缓存并重启开发服务：

npm run dev --no-cache

5. 检查类型定义文件有效性 #

若手动修改过MUI的类型定义文件，恢复为官方默认版本；若未修改，上述缓存清理步骤通常能解决类型定义异常问题。

内容的提问来源于stack exchange，提问作者Aabhimanyu Gupta