React JS编译报错：Module Not Found（导入src外文件不支持）

错误信息 #

编译失败。

模块未找到：错误：你尝试导入的../components/App位于项目src/目录之外。不支持从src/外部进行相对导入。
你可以将其移到src/内部，或者从项目的node_modules/中添加一个符号链接到它。
ERROR in ./src/index.js 6:0-36
模块未找到：错误：你尝试导入的../components/App位于项目src/目录之外。不支持从src/外部进行相对导入。
你可以将其移到src/内部，或者从项目的node_modules/中添加一个符号链接到它。

webpack 编译出现1个错误

问题背景 #

我是React JS初学者，正在学习React中的映射（mapping）相关内容，运行应用时出现上述编译错误，请求帮助解决。我的项目文件结构为：项目根目录下有src文件夹和components文件夹，src目录内包含index.js等文件。

问题原因 #

你的components文件夹处于src目录外部，而Create React App的默认配置禁止从src目录以外的位置导入文件，因此触发了该编译错误。

解决方案 #

方案1：移动components文件夹到src内（推荐） #

这是最符合官方规范且操作最简单的方法：

• 将根目录下的components文件夹直接移动到src目录内部。
• 修改src/index.js中的导入路径，把../components/App改为./components/App。
• 重新启动开发服务器，错误即可解决。

方案2：用符号链接绕过限制（适合特殊场景） #

如果不想移动文件夹，可以通过在node_modules中创建符号链接实现导入：

1. 打开终端，进入项目根目录。
2. 根据系统执行对应命令创建符号链接：
   • Linux/Mac：ln -s ../components node_modules/components
   • Windows（PowerShell）：New-Item -ItemType SymbolicLink -Path .\node_modules\components -Target ..\components
3. 修改src/index.js中的导入路径，把../components/App改为components/App。
4. 重启开发服务器。

补充建议 #

作为React初学者，优先选择方案1，遵循官方项目结构规范可以避免后续更多配置类问题。

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