React组件导入报错：无法解析../src/components/Menu模块

咱们一步步来搞定这个模块找不到的问题哈！首先得搞明白错误的根源：你的导入路径写错啦！

你的项目结构里，Home.js位于src/pages/Home/目录下，而Menu.js在src/components/Menu/目录下。你当前写的import Menu from './../components/Menu';，实际是从src/pages/Home/往上走到src/pages/目录，然后去寻找components文件夹——但这个目录里根本没有components，自然会找不到模块。

下面给你两种解决方案，按需选择：

方案1：修正相对路径（快速解决） #

把Home.js里的导入语句改成：

import Menu from '../../components/Menu';

解释一下：../表示往上走一级目录，../../就是往上走两级——从src/pages/Home/走到src/pages/，再走到src/，这时就能找到components/Menu文件夹了。

方案2：配置绝对路径（长期更省心） #

如果不想每次都算相对路径的层级，可以配置绝对路径，以后导入组件直接从src目录开始写路径：

1. 在项目根目录（和src同级）创建jsconfig.json文件，写入以下内容：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

2. 之后在Home.js里就可以这样导入：

import Menu from 'components/Menu';

不管你的文件在哪个子目录，都能直接用这种方式导入src下的文件，非常方便。

额外检查项 #

如果改了路径还是报错，不妨检查这两点：

• 文件名大小写：确保你的Menu组件文件确实是Menu.js，而不是menu.js（Mac/Linux系统是区分文件名大小写的）；
• 文件位置：确认Menu.js确实在src/components/Menu/目录下，没有被误放到其他地方。

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