CRA未eject环境Jest测试报Cannot find module 'react-location'
问题根因
- 最初PR流程的
npm ci报错,是分支上package.json的依赖声明和package-lock.json记录的依赖树不一致导致的,常见触发场景包括手动修改package.json后未更新锁文件、不同大版本npm生成的锁文件格式不兼容。 - 修复锁文件后出现的
Cannot find module 'react-location'是典型的工具链解析规则不兼容问题:- 项目业务代码能正常运行,是因为webpack可以识别
react-location@3.3.4包中exports字段声明的入口文件 - 但CRA 5.0.1内置的jest模块解析逻辑,没有正确适配该版本react-location的包导出规则,导致跑测试时遍历node_modules找不到对应入口,触发模块不存在报错。
- 所有引用react-location的位置都报相同错误、非别名路径的第三方包解析失败,也符合这个故障特征。
- 项目业务代码能正常运行,是因为webpack可以识别
修复方案
按侵入性从低到高排序,优先试第一个方案:
方案1:添加jest模块映射(推荐,无需修改依赖版本)
因为项目未执行eject,直接在package.json的jest配置项中增加模块名映射,跳过jest的自动解析逻辑,直接指向react-location的实际CJS入口文件即可。
将原有jest配置修改为:
"jest": { "globalSetup": "./src/_shared/testUtils/timezone.js", "moduleNameMapper": { "^react-location$": "<rootDir>/node_modules/react-location/dist/cjs/index.js", "^react-location-devtools$": "<rootDir>/node_modules/react-location-devtools/dist/cjs/index.js" } }
修改完成后执行以下命令清缓存重跑测试:
npx jest --clearCache npm run test
方案2:重装依赖修复可能的安装残缺问题
如果方案1执行后仍报路径不存在,说明之前修复锁文件时依赖安装不完整,执行以下命令彻底重装:
# 删除现有依赖和锁文件 rm -rf node_modules package-lock.json # 使用Node 16.x配套的npm 8.x版本执行安装(不要用npm 9+,和CRA 5存在兼容问题) npm install
重装完成后再应用方案1的配置即可。
方案3:降级react-location到兼容版本
如果前两个方案都不生效,可以将react-location降级到保留传统main入口字段、无需额外jest配置的版本:
npm install react-location@3.2.0 react-location-devtools@3.2.0
安装完成后直接跑测试即可。
避坑说明
- CRA 5的内置工具链版本是固定绑定在react-scripts中的,不要随意将Node、npm或者外围依赖升级到跨大版本的最新版,很容易出现解析规则不兼容的问题
- 后续修改依赖后,本地执行一遍
npm install更新锁文件再提交,避免再次出现npm ci锁文件不同步的报错 - 项目中配置的路径别名(如
_shared/xxx、routes)可以正常解析,说明路径映射配置没有问题,不需要在这部分浪费排查时间
内容的提问来源于stack exchange,提问作者moinhaque
相关产品推荐
相关产品推荐

