React JS中Module not found报错：我的文件路径是否有问题？

报错信息 #

ERROR in ./src/pages/Login.jsx 8:0-39
Module not found: Error: Can't resolve '../hooks/useAuth' in 'C:\Users\Anggur\Downloads\hotelify-dicoding-capstone-main\frontend-react\src\pages'
ERROR in ./src/pages/Login.jsx 9:0-50
Module not found: Error: Can't resolve '../globals/apiEndpoint' in 'C:\Users\Anggur\Downloads\hotelify-dicoding-capstone-main\frontend-react\src\pages'

核心排查步骤 #

直接按以下顺序验证：

1. 核对目录结构是否匹配
   确认项目src目录下的文件层级是否为：

   src/
     pages/
       Login.jsx
     hooks/
       useAuth.js
     globals/
       apiEndpoint.js
   

   注意：构建工具默认区分大小写，哪怕Windows系统不区分，文件名如果是UseAuth.js或ApiEndpoint.js，和导入的useAuth/apiEndpoint大小写不一致也会报错。

2. 检查导入语句的路径写法
   打开Login.jsx确认第8、9行的导入代码：

   • 导入useAuth的语句应为：import useAuth from '../hooks/useAuth';
   • 导入apiEndpoint的语句应为：import apiEndpoint from '../globals/apiEndpoint';
     避免层级写错（比如多写../或少写）、文件夹名称拼写错误（比如hook代替hooks）。

3. 确认文件是否存在
   直接到对应路径查看：

   • 检查C:\Users\Anggur\Downloads\hotelify-dicoding-capstone-main\frontend-react\src\hooks下是否有useAuth.js
   • 检查C:\Users\Anggur\Downloads\hotelify-dicoding-capstone-main\frontend-react\src\globals下是否有apiEndpoint.js
     若文件不存在，需恢复或重新创建。

4. 排查路径别名配置（如果有）
   打开config.js，如果配置了路径别名（比如@指向src），导入语句需对应调整为import useAuth from '@/hooks/useAuth';这类写法，若别名配置错误也会导致模块找不到。

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