执行npm start编译报错：src外文件导入不支持，软链接尝试失败求助

这个错误是因为Create React App（CRA）的默认配置限制了只能从src/目录内导入文件，目的是避免路径混乱和打包异常。下面给你两种可行的解决办法：

方法一：直接移动文件到src目录（最简单） #

• 把AppUi整个目录复制/移动到项目的src/文件夹下
• 修改src/index.js里的导入语句：
  原来的：

  import AppUi from '../AppUi'
  

  改成（假设AppUi移到了src根目录）：

  import AppUi from './AppUi'
  

• 重新运行npm start即可，这种方法最稳妥，不会有软链接带来的路径问题。

方法二：正确创建node_modules软链接 #

如果不想移动文件，按照以下步骤创建软链接（分系统操作）：

前提假设项目结构 #

假设你的项目和AppUi的目录结构是这样的：

parent-folder/
├── your-project/
│   ├── src/
│   │   └── index.js
│   └── node_modules/
└── AppUi/  # 你要导入的外部目录

操作步骤 #

1. 打开终端，进入你的项目根目录（your-project/）
2. 根据你的系统执行对应的软链接命令：
   • Mac/Linux：

     ln -s ../../AppUi node_modules/AppUi
     

     （这里的../../AppUi是从node_modules目录出发，往上两级找到AppUi，路径要根据你实际的目录结构调整）
   • Windows 命令提示符（CMD）：

     mklink /D node_modules\AppUi ..\..\AppUi
     

     （/D表示创建目录软链接，路径用反斜杠，同样要对应你的实际目录）
   • Windows PowerShell：

     New-Item -ItemType SymbolicLink -Path node_modules\AppUi -Target ..\..\AppUi
     

3. 修改src/index.js的导入语句，改为直接引用模块名：

   import AppUi from 'AppUi'
   

   如果AppUi的入口文件不是默认的index.js，可以指定具体路径，比如：

   import AppUi from 'AppUi/src/AppUi.js'
   

4. 重新运行npm start，编译应该就能正常通过了。

注意事项 #

• 软链接的路径一定要正确，否则会出现找不到模块的问题
• Windows系统创建软链接可能需要管理员权限，右键终端选择“以管理员身份运行”
• 如果AppUi目录下有package.json，确保里面的main字段指向正确的入口文件，这样才能直接用模块名导入

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