Angular 16与Cypress 12.12.0集成时configFile无效问题求助

问题现象 #

运行npx cypress open时触发TypeError，报错指向cypress.config.ts中的defineConfig调用：

export default defineConfig({
    |                            ^
  5 |   e2e: {
  6 |     setupNodeEvents(on, config) {
  7 |       // implement node event listeners here
  8 |     },

报错信息：

TypeError: (0 , cypress_1.defineConfig) is not a function
at Object. (/Users/id868720/magnolia-angular-cbu-role-selector-ng/cypress.config.ts:4:28)
...（省略后续栈信息）

当前环境配置 #

Cypress package version: 12.12.0
Cypress binary version: 12.12.0
Electron version: 21.0.0
Bundled Node version: 16.16.0
node: v14.20.0

已尝试删除node_modules、package-lock.json，清理缓存重装，删除Cypress配置文件及文件夹后重新安装，问题仍未解决。

排查方向与解决方案 #

1. 检查defineConfig的导入方式 #

Cypress 10+版本中，defineConfig的正确导入路径是cypress包，确认导入语句是否正确：

// 正确写法（ES模块/TypeScript）
import { defineConfig } from 'cypress';

如果用CommonJS语法：

const { defineConfig } = require('cypress');

避免错误导入非官方路径的defineConfig。

2. 调整Node.js版本 #

Cypress 12.x最低要求Node.js 14.17.0，你的14.20.0虽满足最低要求，但与Cypress内置的16.16.0存在版本差异，可能引发兼容性问题：

• 用nvm切换到匹配版本：

  nvm install 16.16.0
  nvm use 16.16.0
  

• 或者直接升级到16.x/18.x稳定版。

3. 修正TypeScript配置（针对.ts配置文件） #

确保cypress/tsconfig.json或项目根目录的tsconfig.json配置适配Cypress：

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2019",
    "esModuleInterop": true
  }
}

如果项目启用ES模块，需在package.json中添加"type": "module"，同时确保Cypress配置文件的导出方式与之匹配。

4. 彻底重装Cypress依赖 #

执行以下步骤完成深度清理重装：

1. 清理npm缓存：

   npm cache clean --force
   

2. 删除node_modules、package-lock.json、yarn.lock（若使用yarn）
3. 重装项目依赖：

   npm install
   

4. 强制重装Cypress二进制文件：

   npx cypress install --force
   

5. 检查配置文件导出方式 #

确保配置文件的导出逻辑符合Cypress要求：

• TypeScript/ES模块：用export default defineConfig(...)
• CommonJS：用module.exports = defineConfig(...)
  禁止混合使用两种导出方式。

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