React-TS中导入NavButton组件报错：模块未找到

AI 小北

2026-7-30

解决Module not found: Can't resolve './NavButton' 错误

你遇到的是React项目中常见的模块导入路径错误，以下是针对性的排查和解决步骤：

检查文件位置是否匹配
确认NavButton.js（或.jsx/tsx）文件和当前的Header.js（或.jsx/tsx）文件是否在同一个src/components目录下。如果NavButton在子文件夹里，比如src/components/buttons/NavButton.js，导入路径要改成./buttons/NavButton。
核对文件名大小写
即使Windows系统文件名不区分大小写，但React的构建工具（如Webpack/Vite）对大小写敏感。确保导入时的NavButton和实际文件名完全一致，比如不要把navButton.js写成NavButton导入。
确认文件扩展名
如果你的项目没有配置自动识别JSX/TSX扩展名，需要在导入时加上完整扩展名：
```
import NavButton from './NavButton.jsx';
```
或者检查项目配置文件（如webpack.config.js或vite.config.js），确保resolve.extensions里包含了.jsx/.tsx。
检查文件名拼写
仔细核对导入语句里的NavButton和实际文件名的拼写，有没有多写或少写字母，比如把NavBtn写成NavButton这类笔误。
重启开发服务器
有时候缓存会导致路径识别异常，重启npm start或yarn dev这类开发服务命令，再尝试导入。