React.js报Can't resolve module not found模块找不到错误

• 路径层级计算错误：当前报错的文件是src/containers/Home/HomePage.jsx，使用./开头的相对路径时，是以当前文件所在的Home文件夹为根目录寻址的：
  • 写./hooks/useMedia时，打包工具实际查找的路径是src/containers/Home/hooks/useMedia，但hooks目录实际在src根目录下，根本不在Home文件夹里，自然找不到
  • 写./src/hooks/useMedia时，实际查找路径是src/containers/Home/src/hooks/useMedia，层级完全错位
• 最初的import {UseMedia} from 'hooks/useMedia'是路径别名写法，如果没有提前给打包工具（Webpack/Vite）配置src目录的路径别名，打包工具会默认去node_modules里找名为hooks的第三方依赖包，肯定找不到对应模块。
• 容易忽略的排查点：如果路径写对仍报错，优先检查文件名/文件夹名的大小写、实际存放位置是否和预期一致（比如有没有把useMedia文件直接丢在src根目录没放进hooks文件夹、有没有把hooks拼成hook），Windows本地不区分文件大小写，但打包校验时会严格匹配。

1. 先确认文件位置：在本地文件管理器里确认useMedia文件确实存放在src/hooks/目录下，文件后缀和项目配置一致（JS项目用.js/.jsx，TS项目用.ts/.tsx）。
2. 写对相对路径：从src/containers/Home/HomePage.jsx出发，需要向上跳转2级才能到src根目录，正确导入语句如下：

import { UseMedia } from '../../hooks/useMedia';

路径逻辑：第一个../从Home文件夹跳转到containers文件夹，第二个../从containers文件夹跳转到src根目录，后续拼接hooks/useMedia即可准确定位目标文件。
3. （可选）配置路径别名简化导入：如果不想每次写深层相对路径都数../的数量，可以配置路径别名，实现直接从根目录寻址的写法：

• Vite项目：在vite.config.js的resolve.alias字段中，将src目录配置为寻址根目录
• Create React App项目：可以通过craco等配置修改工具，在不eject的情况下修改Webpack的alias配置，将src设为根路径

顺便提一句，你贴出的useMedia代码中，useEffect没有传入依赖数组，每次组件重渲染都会重复绑定媒体查询监听事件，存在内存泄漏风险，记得根据实际逻辑补全依赖项。

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