React中react-animated-heart未链接 模块无法解析如何解决

按以下顺序逐一排查即可定位解决：

• 确认依赖安装位置正确
  你的业务代码存放在frontend/src目录下，npm依赖必须安装在frontend目录层级，不能装在上层项目根目录。先切到C:\ApplyWithin_repo_file\ApplyWithin\frontend路径，检查当前目录下package.json的dependencies字段是否包含react-animated-heart，如果缺失直接执行对应安装命令：
  npm install react-animated-heart
  用yarn/pnpm的话对应执行yarn add react-animated-heart/pnpm add react-animated-heart即可。装完确认frontend/node_modules下存在react-animated-heart文件夹，如果安装后依然识别不到，直接删掉整个node_modules文件夹和对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行全量依赖安装。多目录结构项目很容易出现装错目录的问题，执行安装命令前一定要确认终端当前路径在frontend目录下。
• 检查导入语句写法
  打开报错的JobCard.jsx文件，确认第三方包的导入语句没有误写相对路径，正确写法如下：

  import Heart from "react-animated-heart";
  

  不要手滑写成带./前缀的相对路径形式，这类写法会让构建工具仅在当前业务组件目录下查找文件，自然无法定位到node_modules里安装的包。
• 清理构建工具缓存
  前两步确认无误仍报错的话，基本是构建缓存异常导致：停掉本地开发服务，删掉frontend/node_modules/.cache目录后重新启动项目即可。如果是自定义webpack配置的项目，额外检查webpack配置里的resolve.modules项，确保配置包含node_modules路径，避免依赖查找范围被错误限制在src目录内。
• 兜底处理方案
  以上操作都试完还是报错的话，基本是这个npm包本身发版存在问题，比如入口配置错误、漏打构建产物。这个心形动画组件本身代码量很小，可以直接把组件源码拷到项目本地src目录下作为业务组件引入使用，功能完全一致，还能避免后续第三方包版本变动带来的问题。

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