使用@headlessui Transition组件时出现模块未找到错误求助

DevOps 小满

2026-7-12

解决@headlessui/react Transition组件模块找不到的问题

针对你遇到的Module not found: Can't resolve '/xxx/@headlessui/react/dist/components/transition/transition'错误，尝试以下解决方案：

检查导入语句是否正确
确保你是从@headlessui/react根包直接导入Transition组件，而非深层路径：
```
// 正确写法
import { Transition } from '@headlessui/react'

// 错误写法（会触发模块找不到错误）
import Transition from '@headlessui/react/dist/components/transition/transition'
```
Headless UI的组件均设计为从根包导入，深层编译路径可能随版本或构建配置变化而失效。
清理Next.js缓存
即使删除了node_modules，Next.js可能仍保留旧的构建缓存，运行以下命令清理：
```
npx next clean
```
清理完成后重新启动开发服务器或执行构建操作。
强制清理npm缓存并重装依赖
若之前的重装未解决问题，可能是npm缓存了损坏的包文件：
```
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
```
检查依赖树是否存在版本冲突
运行命令查看@headlessui/react的依赖树，确认是否有多个版本共存：
```
npm ls @headlessui/react
```
若发现多个版本，手动卸载重复依赖并重新安装指定版本：
```
npm uninstall @headlessui/react
npm install @headlessui/react@1.7.17
```
验证本地包文件结构
手动检查node_modules/@headlessui/react/dist/components/transition文件夹是否存在。若不存在，说明包安装不完整，可能是网络问题导致下载中断，可换网络环境重新安装。