Why is my Cypress 12.12. configFile invalid with Angular 16?

I am getting this error when running npx cypress open:

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)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Module.m._compile (/Users/id868720/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:857:29)
at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Object.require.extensions. [as .ts] (/Users/id868720/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:859:16)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at loadFile (/Users/id868720/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:89:14)
at EventEmitter. (/Users/id868720/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:116:38)
at EventEmitter.emit (events.js:400:28)
at EventEmitter.emit (domain.js:475:12)
at process. (/Users/id868720/Library/Caches/Cypress/12.12.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:33:22)
at process.emit (events.js:400:28)
at process.emit (domain.js:475:12)

with this config :
>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

This is my package.json:

{
"name": "project",
"version": "230623",
"browser": {
"crypto": false
},
"scripts": {
"automation:report": "npx nyc report --reporter=text-summary",
"build": "npm run build:all",
"build:all": "ng build --extra-webpack-config ./webpack.extra.js --output-hashing=none --stats-json --project --single-bundle true && npm run process:bundle",
"build:all:automation": "ng build --extra-webpack-config ./cypress/webpack.coverage.config.js --stats-json --output-hashing=none --single-bundle true && npm run process:bundle",
"build:all:dev": "ng build --extra-webpack-config ./webpack.extra.js --output-hashing=none --configuration=dev --stats-json --project  --single-bundle true && npm run process:bundle",
"build:automation": "npm run build:all:automation",
"build:local": "ng build --extra-webpack-config ./webpack.extra.local.js --output-hashing=none --stats-json --project cbu-role-selector --single-bundle true --source-map && npm run process:bundle",
"build:local:watch": "ng serve --configuration=local --project cbu-role-selector --proxy-config proxy.conf.json --open --single-bundle true",
"build:watch": "ng build --watch --extra-webpack-config ./webpack.extra.local.js --output-hashing=none --project cbu-role-selector --single-bundle true",
"build:watch:dev": "ng build --watch --extra-webpack-config ./webpack.extra.js --output-hashing=none --project cbu-role-selector --single-bundle true",
"bundle:report": "webpack-bundle-analyzer dist/stats.json",
"ci": "npm run lint && npm run test && npm run build:all",
"ci:compile": "npm run build:all && npm run process:package",
"ci:lint": "ng lint",
"ci:publish": "npm publish",
"ci:sonar": "sonar-scanner",
"ci:test": "npm run test",
"compile": "npm run build:all",
"compile:angular": "ngcc -s ./node_modules/@angular -p main",
"cypress": "npx cypress open",
"cypress:coverage": "npm run cypress:run && npm run automation:report",
"cypress:install": "npm install cypress@12.12.0 --no-save --ignore-scripts",
"cypress:run": "npx cypress run",
"lint": "eslint projects/**/*.ts",
"lint:fix": "eslint projects/**/*.ts --fix",
"local": "lite-server --baseDir=./elements -c ./config/node_red/bs-config.js",
"node-red": "cd config/node_red && node ../../node_modules/node-red/red.js -v flows.json -s settings.js",
"prepublishOnly": "node scripts/prepublishOnly.js",
"process:bundle": "node ./scripts/process-bundle.js",
"process:package": "sh ./scripts/package-version.sh",
"process:watch": "node scripts/process-watch.js",
"publish:nexus": "npm publish",
"sonar": "sonar-scanner",
"sonar:automation": "sonar-scanner -Dsonar.projectKey=-test-UI-local",
"sort:package": "npx sort-package-json",
"start": "concurrently --kill-others \"npm run build:watch\" \"npm run node-red\" \"npm run local\" \"npm run process:watch\"",
"stryker": "stryker run",
"test": "jest --config=./jest.config-all.json"
},
"husky": {
"hooks": {
"pre-commit": "npm run process:package && npm run lint:fix && npm run sort:package && git add .",
"post-merge": "npm run process:package && npm run sort:package && git add ."
}
},
"nyc": {
"all": true,
"check-coverage": true,
"exclude": [
"src/**",
"cypress/**",
"**/*.spec.ts",
"coverage/**",
"**/*.config.ts"
],
"extends": "@istanbuljs/nyc-config-typescript",
"extension": [
".ts"
],
"include": [
"projects/**/*.component.ts",
"projects/**/*.service.ts"
],
"instrument": true
},
"dependencies": {
"@datorama/akita": "8.0.1",
"@webcomponents/custom-elements": "1.2.4",
"@webcomponents/shadydom": "1.7.3",
"file-saver": "1.3.8",
"graphql": "15.8.0",
"graphql-tag": "2.12.6",
"libphonenumber-js": "^1.9.44",
"localforage": "1.10.0",
"lodash": "4.17.15",
"ngx-mask": "^14.0.3",
"reselect": "2.5.4",
"rxjs": "7.8.1",
"rxjs-compat": "6.6.7",
"subscriptions-transport-ws": "0.9.18",
"tslib": "2.4.1",
"url-polyfill": "1.1.12",
"xstate": "4.6.7",
"zone.js": "0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "16.0.0",
"@angular-eslint/builder": "16.0.1",
"@angular-eslint/eslint-plugin": "16.0.1",
"@angular-eslint/eslint-plugin-template": "16.0.1",
"@angular-eslint/schematics": "16.0.1",
"@angular-eslint/template-parser": "16.0.1",
"@angular/animations": "16.0.0",
"@angular/cdk": "16.0.0",
"@angular/cli": "16.0.0",
"@angular/common": "16.0.0",
"@angular/compiler": "16.0.0",
"@angular/compiler-cli": "16.0.0",
"@angular/core": "16.0.0",
"@angular/elements": "16.0.0",
"@angular/forms": "16.0.0",
"@angular/language-service": "16.0.0",
"@angular/material": "16.0.0",
"@angular/platform-browser": "16.0.0",
"@angular/platform-browser-dynamic": "16.0.0",
"@angular/router": "16.0.0",
"@cypress/browserify-preprocessor": "3.0.2",
"@cypress/code-coverage": "3.10.0",
"@cypress/webpack-preprocessor": "5.12.0",
"@datorama/akita-ngdevtools": "3.0.2",
"@istanbuljs/nyc-config-typescript": "1.0.1",
"@proximus/pxs_angular_testing": "11.5.0",
"@proximus/pxs-automation": "1.34.0",
"@stryker-mutator/core": "6.1.2",
"@stryker-mutator/html-reporter": "3.1.0",
"@stryker-mutator/jest-runner": "6.1.2",
"@stryker-mutator/typescript": "4.0.0",
"@types/jest": "28.1.3",
"@types/lodash": "4.14.119",
"@types/node": "16.11.45",
"@typescript-eslint/eslint-plugin": "5.59.2",
"@typescript-eslint/parser": "5.59.2",
"apollo-server": "2.18.2",
"babel-core": "6.26.3",
"babel-loader": "8.2.5",
"babel-plugin-lodash": "3.3.4",
"babel-preset-env": "1.7.0",
"casual": "1.6.2",
"concat": "1.0.3",
"concurrently": "5.3.0",
"copy": "0.3.2",
"core-js": "2.6.9",
"crypto-js": "4.1.1",
"cypress": "^12.12.0",
"cypress-file-upload": "4.1.1",
"cypress-shadow-dom": "1.4.1",
"eslint": "8.40.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsdoc": "39.3.3",
"eslint-plugin-prefer-arrow": "1.2.3",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-snakecasejs": "2.2.0",
"fs-extra": "8.0.1",
"http-proxy-middleware": "2.0.1",
"husky": "4.3.7",
"jest": "29.5.0",
"jest-create-mock-instance": "1.1.0",
"jest-diff": "28.1.3",
"jest-environment-jsdom": "29.5.0",
"jest-localstorage-mock": "2.4.21",
"jest-mock": "28.1.3",
"jest-preset-angular": "13.1.0",
"jest-silent-reporter": "0.5.0",
"jest-when": "2.8.1",
"jest-zone-patch": "0.0.10",
"lint-staged": "10.5.4",
"lite-server": "2.6.1",
"lodash-webpack-plugin": "0.11.6",
"ng-packagr": "16.0.0",
"ngx-build-plus": "16.0.0-next.7",
"node-red": "1.0.5",
"node-red-contrib-graphql": "0.2.5",
"nodemon": "2.0.6",
"nyc": "15.1.0",
"prettier": "2.2.1",
"pretty-quick": "3.1.0",
"sonar-scanner": "3.1.0",
"sort-package-json": "1.48.1",
"ts-jest": "29.0.0",
"ts-loader": "9.3.1",
"ts-node": "10.9.1",
"typescript": "5.0.4",
"webpack": "5.74.0",
"webpack-bundle-analyzer": "3.9.0"
}
}

I have already tried:

• Delete node_module Folder
• Delete package-lock.json·
• Run npm cache clean --force Command Twice
• Run npm i·
• remove the cypress.config.ts file,
• delete the cypress folder,
• then reinstall Cypress,
• npm install cypress --save-dev
• npx cypress run --browser chrome

I solved the issue by changing the cypress.config.ts

From this:

import { defineConfig } from 'cypress' 
export default defineConfig({ ... )}

To this:

module.exports = { ... }

You are likely encounter a formatting issue in your config file, please fix it the following way and add a defineConfig import:

import { defineConfig } from 'cypress';
export default defineConfig({
// Cypress configuration options
});

Hope it will help. If no, please let me know