React JS创建函数组件提示找不到已存在的Buku.js文件如何解决

核心报错 #

创建函数组件时运行项目提示：无法找到路径./src/components/Buku/Buku.Js对应的文件，确认目标JS文件真实存在、导入语句书写的目录路径无错误。

排查&修复步骤 #

• 优先检查文件名大小写匹配问题
  报错信息里查找的目标文件是Buku.Js（后缀首字母J为大写），React 构建工具（Webpack/Vite）解析模块时严格区分文件名大小写，和本地Windows/macOS默认的大小写不敏感文件系统逻辑不同。只要目录名、文件名、后缀任意一个字符大小写和实际文件不一致，就会触发找不到文件的报错。
  直接打开src/components/Buku目录，核对实际文件名：如果实际文件是Buku.js（j为小写），把导入语句里的Buku.Js修正为Buku.js，确保路径里每一段字符的大小写和实际文件/目录完全一致即可。
• 检查是否被隐藏扩展名误导
  Windows系统默认隐藏已知文件类型扩展名，很容易出现你以为创建的是Buku.js，实际文件全名为Buku.js.js、Buku.Js.txt的情况。
  打开文件资源管理器的「查看」选项卡，勾选「文件扩展名」选项，查看Buku目录下文件的完整名称，删除多余的错误后缀，将文件后缀修正为标准的.js。
• 核对相对路径层级
  如果写导入语句的文件不在src目录根路径下，./src/xxx的写法是错误的，需要根据当前文件和Buku组件的相对位置调整路径：比如当前文件在src/pages目录下，正确的导入路径应为../components/Buku/Buku.js。
• 清除构建缓存重启服务
  若以上调整后仍报错，属于构建工具本地缓存异常：先停掉本地运行的开发服务，删除项目下的node_modules/.cache缓存目录，再重新执行npm start（或对应包管理工具的启动命令）重启项目即可。

注：90%以上的同类报错都是文件名大小写不匹配导致的，优先排查这一项。

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