如何修复CRA中配置Cypress组件测试时出现的报错？

云上老周

2026-7-21

在CRA中配置Cypress组件测试时的webpack加载错误解决

问题描述

使用Cypress 12.12.0在Create React App（CRA）中配置组件测试时，出现以下报错：

Your configFile threw an error from: cypress/config/myConfig.config.ts
We stopped running your tests because your config file crashed.
../../Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/createReactAppHandler.js:70:15
68 | }
69 | catch (err) {
70 | throw new Error(Failed to require webpack config at ${webpackConfigPath} with error: ${err});
| ^
71 | }
72 | }
73 | exports.cypressGlobals = ['cy', 'Cypress', 'before', 'after', 'context'];
74 | function addCypressToWebpackEslintRulesInPlace(webpackConfig) {

已重装Cypress，但问题依旧。

可能的解决方法

检查自定义配置文件的语法和依赖
确认cypress/config/myConfig.config.ts中无语法错误（比如未闭合的括号、类型定义错误），同时检查文件中引入的依赖是否已正确安装，webpack相关包版本是否与当前项目匹配。
验证webpack配置路径
确保配置文件中指定的webpack路径正确，Cypress能定位到对应文件。如果是自定义webpack配置，检查路径拼写是否有误，或尝试使用绝对路径。
匹配Cypress与CRA的webpack版本
CRA自带的webpack版本可能和Cypress 12.12.0存在兼容问题。可以查看当前CRA使用的webpack版本，安装匹配的cypress-webpack-dev-server版本，或尝试升级/降级Cypress到更兼容的版本（比如13.x系列）。
暂时使用默认CRA配置
移除自定义的myConfig.config.ts，改用Cypress默认的CRA处理逻辑，验证是否能正常运行。如果可以，再逐步添加自定义配置，排查引发错误的具体部分。
清理项目缓存与依赖
除重装Cypress外，运行npm run clean或yarn clean清理CRA缓存，删除项目根目录的node_modules和package-lock.json/yarn.lock后重新安装所有依赖。