With a newly migrated repo, the `migrate-cypress-to-10` results in invalid setup

[SuneRadich]

Current Behavior

I have just migrated our nx repo to the latest nx, and in turn also Angular 14. Everything seems to be running as expected. I then proceeded to run the migration to update the Cypress setup to v.10.

The generator runs without any errors, but trying to run an e2e test afterwards results in an error.

Steps I have tried without success:

Deleting package-lock.json, and rerunning npm install Running npm dedupe Pinning cypress version 10.2.0 in package.json

Expected Behavior

After having run the generator to migrate the cypress setup to 10, I expect an existing e2e setup to run.

Steps to Reproduce

Make sure you have an nx 14.5.4 setup Run the nx g @nrwl/cypress:migrate-to-cypress-10 as described on https://nx.dev/cypress/v10-migration-guide Run an existing e2e project nx e2e PROJECT-NAME-e2e. I can see from the log, that it correctly starts up a Storybook, but it fails when running cypress.

Failure Logs

I see the following error stack trace:

objc[97203]: Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x223557808) and /Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libGLESv2.dylib (0x1140753c8). One of the two will be used. Which one is undefined.
Your configFile is invalid: /Users/suneradich/Projects/velliv-du/apps/partport/feature-overview-e2e/cypress.config.ts

It threw an error when required, check the stack trace below:

TypeError: (0 , cypress_1.defineConfig) is not a function
    at Object.<anonymous> (/Users/suneradich/Projects/velliv-du/apps/partport/feature-overview-e2e/cypress.config.ts:16:28)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Module.m._compile (/Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/src/index.ts:1455:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/src/index.ts:1458:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:89:14
    at Generator.next (<anonymous>)
    at /Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/node_modules/tslib/tslib.js:113:16)
    at loadFile (/Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:85:35)
    at /Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:116:38
    at Generator.next (<anonymous>)
    at /Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/node_modules/tslib/tslib.js:113:16)
    at EventEmitter.<anonymous> (/Users/suneradich/Library/Caches/Cypress/10.2.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:113:35)
    at EventEmitter.emit (node:events:527:28)

Environment

>  NX   Report complete - copy this into the issue template

   Node : 16.15.1
   OS   : darwin arm64
   npm  : 8.11.0
   
   nx : 14.5.4
   @nrwl/angular : 14.5.4
   @nrwl/cypress : 14.5.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.5.4
   @nrwl/eslint-plugin-nx : 14.5.4
   @nrwl/express : Not Found
   @nrwl/jest : 14.5.4
   @nrwl/js : 14.5.4
   @nrwl/linter : 14.5.4
   @nrwl/nest : 14.5.4
   @nrwl/next : Not Found
   @nrwl/node : 14.5.4
   @nrwl/nx-cloud : 14.3.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.5.4
   @nrwl/web : 14.5.4
   @nrwl/workspace : 14.5.4
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:
         @ngneat/transloco: 2.23.5
         @ngrx/effects: 14.0.2
         @ngrx/entity: 14.0.2
         @ngrx/router-store: 14.0.2
         @ngrx/store: 14.0.2
         ng2-charts: 3.1.2
         @ngrx/schematics: 14.0.2
         @ngrx/store-devtools: 14.0.2
         @storybook/angular: 6.5.10
         @twittwer/compodoc: 1.8.0

Dependencies in package.json

"dependencies": {
    "@angular/animations": "14.1.1",
    "@angular/cdk": "14.1.1",
    "@angular/common": "14.1.1",
    "@angular/compiler": "14.1.1",
    "@angular/core": "14.1.1",
    "@angular/forms": "14.1.1",
    "@angular/material": "14.1.1",
    "@angular/platform-browser": "14.1.1",
    "@angular/platform-browser-dynamic": "14.1.1",
    "@angular/router": "14.1.1",
    "@capacitor-community/firebase-analytics": "^1.0.1",
    "@capacitor-community/http": "^1.4.1",
    "@capacitor/app": "^1.1.0",
    "@capacitor/browser": "^1.0.7",
    "@capacitor/device": "^1.1.2",
    "@capacitor/haptics": "^1.1.4",
    "@capacitor/push-notifications": "^1.0.9",
    "@capacitor/splash-screen": "^1.2.1",
    "@capacitor/status-bar": "^1.0.7",
    "@capacitor/storage": "^1.2.4",
    "@golevelup/nestjs-discovery": "^2.3.1",
    "@mdi/angular-material": "^5.9.55",
    "@nestjs/common": "9.0.8",
    "@nestjs/core": "9.0.8",
    "@nestjs/platform-express": "9.0.8",
    "@ngneat/transloco": "^2.20.0",
    "@ngneat/transloco-persist-lang": "^1.0.4",
    "@ngrx/effects": "14.0.2",
    "@ngrx/entity": "14.0.2",
    "@ngrx/router-store": "14.0.2",
    "@ngrx/store": "14.0.2",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@typeform/embed": "^0.29.1",
    "@umbraco/headless-client": "^0.8.2",
    "@webcomponents/custom-elements": "^1.4.3",
    "angular-svg-icon": "^13.0.0",
    "canvg": "^3.0.9",
    "capacitor-face-id": "^2.0.2",
    "capacitor-native-biometric": "^3.0.3",
    "capacitor-native-settings": "^0.1.0",
    "chart.js": "^3.8.0",
    "cookie-parser": "^1.4.6",
    "cordova-plugin-keychain-touch-id": "^3.2.1",
    "core-js": "^3.10.1",
    "date-fns": "^2.17.0",
    "dayjs": "^1.10.4",
    "debug": "3.2.6",
    "dompurify": "^2.3.6",
    "file-saver": "^2.0.5",
    "guid-typescript": "^1.0.9",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.3.3",
    "jspdf": "^2.3.1",
    "jsrsasign": "^10.5.25",
    "lottie-web": "^5.7.6",
    "nest-router": "^1.0.9",
    "ng2-charts": "^3.0.11",
    "ngx-file-drop": "^11.0.2",
    "ngx-filesaver": "^11.0.0",
    "ngx-order-pipe": "^2.2.0",
    "ngx-swiper-wrapper": "^10.0.0",
    "query-string": "^7.1.1",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.0.0",
    "svg4everybody": "^2.1.9",
    "tslib": "^2.0.0",
    "whatwg-fetch": "^3.5.0",
    "xlsx": "^0.16.9",
    "zone.js": "0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.1.1",
    "@angular-devkit/core": "14.1.1",
    "@angular-devkit/schematics": "14.1.1",
    "@angular-eslint/eslint-plugin": "14.0.2",
    "@angular-eslint/eslint-plugin-template": "14.0.2",
    "@angular-eslint/template-parser": "14.0.2",
    "@angular/cli": "~14.1.0",
    "@angular/compiler-cli": "14.1.1",
    "@angular/language-service": "14.1.1",
    "@babel/core": "^7.12.13",
    "@nestjs/schematics": "9.0.1",
    "@nestjs/serve-static": "^3.0.0",
    "@nestjs/testing": "9.0.8",
    "@ngneat/transloco-keys-manager": "^3.4.1",
    "@ngrx/schematics": "14.0.2",
    "@ngrx/store-devtools": "14.0.2",
    "@nrwl/angular": "14.5.4",
    "@nrwl/cli": "14.5.4",
    "@nrwl/cypress": "14.5.4",
    "@nrwl/devkit": "14.5.4",
    "@nrwl/eslint-plugin-nx": "14.5.4",
    "@nrwl/jest": "14.5.4",
    "@nrwl/linter": "14.5.4",
    "@nrwl/nest": "14.5.4",
    "@nrwl/node": "14.5.4",
    "@nrwl/nx-cloud": "14.3.0",
    "@nrwl/storybook": "14.5.4",
    "@nrwl/workspace": "14.5.4",
    "@storybook/addon-a11y": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addons": "^6.5.9",
    "@storybook/angular": "6.5.10",
    "@storybook/builder-webpack5": "6.5.10",
    "@storybook/core-server": "6.5.10",
    "@storybook/manager-webpack5": "6.5.10",
    "@twittwer/compodoc": "^1.5.3",
    "@types/cookie-parser": "^1.4.3",
    "@types/gtag.js": "0.0.10",
    "@types/jest": "27.4.1",
    "@types/lodash": "^4.14.182",
    "@types/node": "18.0.0",
    "@types/webpack": "^5.28.0",
    "@typescript-eslint/eslint-plugin": "5.32.0",
    "@typescript-eslint/parser": "5.32.0",
    "babel-loader": "^8.2.3",
    "chalk": "^4.1.2",
    "cli-progress": "^3.10.0",
    "cypress": "^10.2.0",
    "cypress-file-upload": "^5.0.8",
    "cypress-skip-and-only-ui": "^1.2.14",
    "eslint": "8.15.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-storybook": "^0.5.12",
    "gulp": "^4.0.2",
    "jasmine-marbles": "~0.9.1",
    "jest": "27.5.1",
    "jest-canvas-mock": "^2.3.1",
    "jest-junit": "^12.2.0",
    "jest-preset-angular": "11.1.2",
    "jsonwebtoken": "^8.5.1",
    "lint-staged": "^10.5.4",
    "lodash": "^4.17.21",
    "mockdate": "^3.0.5",
    "ng-packagr": "14.1.0",
    "ngrx-store-freeze": "^0.2.4",
    "node-fetch": "^2.6.1",
    "nx": "14.5.4",
    "postcss": "^8.3.5",
    "postcss-import": "14.1.0",
    "postcss-preset-env": "7.5.0",
    "postcss-url": "10.1.3",
    "prettier": "2.7.1",
    "remotedev": "^0.2.9",
    "s3-node-client": "^4.4.4",
    "sass-export": "^2.1.0",
    "swiper": "^6.5.6",
    "ts-jest": "27.1.4",
    "ts-node": "10.8.2",
    "ts-node-dev": "^1.1.1",
    "typescript": "4.7.4",
    "webpack": "^5.64.0",
    "yargs": "^16.2.0"
  }

[barbados-clemens]

do you have a cypress.json in the root of your workspace? if so can you delete it/rename it?

[SuneRadich]

Yes I did. If I remove that file, my e2e tests run again. Can I convert the global json file to a cypress.config.ts file, and expect the config options to be picked up by all my libraries?

[barbados-clemens]

I'm unsure, as that's not a setup I'm familar with. you can try to see if it auto-matically works. if not I'd recommend just importing that file and spreading it into your config. i.e.

// root level cypress.config.ts
export default defineConfig({
 // your default options you want to apply for everything
})

// in your project level cypress.config.ts
import workspacePreset from '../../cypress.config'
export default defineConfig({
  ...workspacePreset
  // rest of the config that's there today.
})

more context on what's happening is ts-node is resolving your cypress.json instead of the cypress node_module.

you can verify this via using the ts-node REPL (or at least in my testing) and typing require('cypress') which will return the json, but if you type it again it'll return the actual cypress node_module.

[SuneRadich]

I would hate to manually have to add my global settings, more specifically configuration for test-reporting for our CI setup. If its a manual task, then I have to do it for all our many libs and apps - but then also to all newly created libs.

I thought having a root-level cypress.json was the way to handle global settings?

[barbados-clemens]

I'm not familiar with what is the 'correct' way to have global settings for cypress, as it was only recently I realize the root cypress.json file would "auto-magically" get included in all projects.

I would personally do what I described above as it's explicit in what is/isn't included in a given config so it's understood what influences the given cypress configuration.

did you try having a root cypress.config.ts to see if it's also magically included?

I can also look into adding this as apart of the migration to convert the root config and add to every project since that would mimic the same behavior as v9 (assuming the root cypress.config.ts isn't included)

I'd also look at providing a better error when cypress runs into this error of not being able to find defineConfig and a root cypress.json is found.

[SuneRadich]

I'll make a test to see if a global file still works as previous, I'll let you know how it goes.

[barbados-clemens]

Talked with the cypress folks about the best way to share a root level config across projects,

we are both in agreement that creating a root cypress config file (i.e. cypress.shared-config.ts) and then importing and spreading that in your project local config would be the way to go.

another option is to use the .env file at the root to inject CYPRESS_ env vars that override the config, though this is less explicit and could run into some confusion trying to debug how a value is set across your projects. I'd go for the explicit way.

[SuneRadich]

I will find a way to manage any global config I might need. For now we live without it.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.