React启动报错Can't resolve 'react-image-video-lightbox'如何解决

按以下优先级逐一排查即可：

• 校验导入语句正确性
  首先确认导入时包名拼写完全匹配（全小写、连字符连接，无大小写错误），该包为默认导出，不要使用解构导入，正确写法参考：
  import Lightbox from 'react-image-video-lightbox';
  错误的解构写法import { Lightbox } from 'react-image-video-lightbox'也会触发模块解析报错。

• 清理缓存重装依赖
  npm 6.x版本存在偶发的安装缓存、软链异常问题，会出现包实体存在但构建工具无法识别的情况，按以下步骤操作：

  1. 终止当前运行的本地开发服务
  2. 在项目根目录执行命令清理环境：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  

  3. 执行npm install重新安装全量依赖，完成后再运行npm start验证。

• 校验包的入口配置
  该包部分历史发布版本存在漏配main入口字段的问题，会直接导致构建时找不到包入口：
  打开node_modules/react-image-video-lightbox/package.json文件，检查是否存在如下配置：
  "main": "build/index.js",
  如果该字段缺失，手动补充后重启开发服务即可临时修复；长期使用建议固定安装无该问题的发布版本，避免重新安装依赖后问题复现。

• 检查自定义构建配置
  如果你的项目手动修改过webpack配置，检查resolve.modules配置项，确认没有将node_modules目录排除在模块查找路径外，也没有配置错误的路径优先级。如果是使用create-react-app初始化且未eject配置的项目，可跳过该步骤，CRA默认配置不会触发这类问题。

你当前使用的Node 12.22、npm 6.14、React 16.x环境和该包的兼容要求完全匹配，不存在版本不兼容导致的解析问题，优先排查前三项即可。

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