React项目导入Header、App组件报Module not found错误如何解决？

你遇到的模块找不到错误核心是相对路径计算错误，以及可能存在的文件名大小写、目录拼写不匹配问题，修正方案如下： #

核心错误点 #

1. index.js 导入路径错误
   常规React项目中index.js默认放在src根目录下，你写的../components/ui/App中../会跳到src目录之外，自然无法找到对应文件。
2. App.js 导入路径错误
   如果你的App.js已经存放在components/ui目录下，你写的./components/ui/Header会尝试在ui目录下再找一层components/ui文件夹，对应路径不存在。

修正步骤 #

1. 先确认你的项目目录符合以下结构（如果有调整自行对应路径）：

src/
├── index.js
└── components/
    └── ui/
        ├── App.js
        └── Header.js

2. 修正index.js的App导入语句：
   将原代码中的
   import App from '../components/ui/App'
   替换为
   import App from './components/ui/App'
3. 修正App.js的Header导入语句：
   将原代码中的
   import Header from './components/ui/Header'
   替换为
   import Header from './Header'

其他排查项 #

如果修正路径后仍报错，检查以下内容：

• 文件名大小写与导入语句完全一致，比如文件名为Header.js就不能用import Header from './header'导入，部分系统和构建工具对大小写敏感
• 文件夹名称拼写正确，确认是components而非component
• 如果你的组件文件后缀为.jsx，可在导入时补全后缀，比如import Header from './Header.jsx'

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