React应用引入plain-draggable报anim-event模块缺失如何解决

问题复现 #

• 在React项目的package.json中添加依赖配置："plain-draggable": "^2.5.14"
• 执行npm i命令安装全量依赖
• 运行react-scripts start启动应用时，控制台抛出如下错误：

Module not found: Can't resolve 'anim-event' in '/Users/use/app/tom/new_version/app/node_modules/plain-draggable'

• 临时验证方案：执行cd node_modules/plain-draggable进入模块目录，再执行npm i安装其内部依赖后，项目可正常启动，但每次重新安装依赖后都需要重复该操作，无法永久生效。

问题原因 #

当前安装的plain-draggable@2.5.14版本存在包配置缺陷，没有将运行必需的anim-event模块声明为自身依赖，npm执行主项目安装时不会自动拉取这个缺失的子依赖，导致构建时模块解析失败。手动进入子包目录安装依赖只是临时补全了文件，下次执行全量依赖安装时操作会被覆盖。

根治方案 #

方案1：直接在项目中安装缺失依赖（推荐） #

直接把缺失的anim-event安装为你项目的直接依赖，npm会把包装到根目录node_modules下，构建时plain-draggable就可以正常解析到这个模块，一次安装永久生效：

npm install anim-event --save

安装完成后重新执行启动命令即可，后续不管执行多少次npm i都不会再出现该报错。

方案2：配置postinstall脚本自动补装 #

如果不想额外引入直接依赖，可以在项目package.json的scripts配置中添加postinstall生命周期钩子，让npm每次完成全量依赖安装后，自动进入plain-draggable目录补装它的依赖：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "cd node_modules/plain-draggable && npm i"
  }
}

配置保存后，下次执行npm i时会自动完成补装操作，不需要手动进入目录执行命令。该方案对yarn、pnpm包管理器同样生效。

方案3：更换无配置缺陷的版本 #

可以更换plain-draggable的版本，选择已经修复了依赖声明问题的版本安装，从根源上避开这个bug。

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