无法正确导入Header.jsx：同级与components文件夹路径问题

• 确认文件夹结构
  先核对目录层级是否正确，正确结构应该是这样：

  项目根目录
  ├── App.js
  └── components
      └── Header.jsx
  

  如果App.js或components文件夹嵌套在其他目录（比如src），路径要对应调整，比如./src/components/Header。

• 检查扩展名配置
  若使用Create React App，默认支持省略.jsx扩展名；但如果是自定义webpack/vite项目，需要在配置文件中将.jsx加入解析扩展名列表：

  • webpack：在resolve.extensions中添加.jsx
  • vite：在resolve.extensions里包含.jsx
    未配置的话，必须写全扩展名：import Header from "./components/Header.jsx";

• 核对拼写与大小写
  注意系统（尤其是Linux/macOS）区分文件名大小写，需确认：

  • components拼写无误，别写成component或Components
  • 导入的Header与文件名Header.jsx大小写完全一致，避免写成header

• 检查组件导出方式
  查看Header.jsx的导出逻辑：

  • 若是默认导出：export default function Header() { ... }，用import Header from "./components/Header";导入没问题
  • 若是命名导出：export function Header() { ... }，需改成import { Header } from "./components/Header";

• 排查缓存与路径错误

  • 不要使用错误的.components/Header.jsx路径，正确相对路径开头是./（代表当前目录）
  • 重启开发服务器，缓存可能导致路径变更无法即时生效

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