Version 10: Your configFile is invalid cypress.config.ts

[sitefinitysteve]

Current behavior

I can't get by this screen after the cypress UI pops up, everything seemed fine until the config->.ts step.

Error
Your configFile is invalid: C:\Github\Project\cypress.config.ts

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

[Stack trace](http://localhost:22331/__launchpad/index.html#)
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:371:5)
    at throwIfUnsupportedURLProtocol (node:internal/modules/esm/resolve:1033:11)
    at defaultResolve (node:internal/modules/esm/resolve:1103:3)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ESMLoader.import (node:internal/modules/esm/loader:332:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1042:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
    at importModuleDynamically (node:vm:381:46)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at loadFile (C:\Users\steve\AppData\Local\Cypress\Cache\10.0.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:126:9)
    at EventEmitter. (C:\Users\steve\AppData\Local\Cypress\Cache\10.0.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:136:38)
    at EventEmitter.emit (node:events:520:28)
    at EventEmitter.emit (node:domain:475:12)
    at process. (C:\Users\steve\AppData\Local\Cypress\Cache\10.0.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\util.js:33:22)
    at process.emit (node:events:520:28)

import { defineConfig } from 'cypress'

export default defineConfig({
  projectId: 'nqoyvw',
  viewportWidth: 1480,
  viewportHeight: 1260,
  video: false,
  videosFolder: 'cypress/videos',
  screenshotsFolder: 'cypress/screenshots',
  pageLoadTimeout: 60000,
  requestTimeout: 45000,
  responseTimeout: 45000,
  experimentalStudio: true,
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require('./cypress/plugins/index.js')(on, config)
    },
    baseUrl: 'https://dev.project.ca',
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
  },
})

Debug logs

No response

Cypress Version

10

Package Manager

npm

Operating system

Windows

Other

Node: v16.14.0
tsc: Version 4.0.2

[sitefinitysteve]

[jennifer-shehane]

@sitefinitysteve Can you provide the content in your package.json file and your tsconfig files?

[sitefinitysteve]

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/node": "^10.17.50",
    "cypress": "^10.0.0",
    "cypress-wait-until": "^1.7.1",
    "har-validator": "^5.1.5"
  },
  "dependencies": {
    "@types/angular": "^1.6.51",
    "@types/bootstrap": "^3.4.0",
    "@types/jquery": "^2.0.56",
    "watchify": "^3.11.1"
  },
  "scripts": {
    "cypress": "cypress open",
    "macdot-watchify": "watchify Project\\Mvc\\Views\\MacdotTool\\Resources\\MacdotTool-ng.js -o Project\\Mvc\\Views\\MacdotTool\\Resources\\MacdotTool-ng.min.js",
    "record": "cypress run --record --key MYKEY"
  }
}

I don't have a tsconfig, don't use typescript in the project, I have a tsconfig.json.ignore from back when I did, but that's clearly nothing

{
	"compileOnSave": true,
    "compilerOptions": {
		"lib": ["es2015", "es2015.iterable", "dom"],
		"target": "es6",
		"module": "commonjs",
        "noEmitOnError": true,
		"watch": true,
		"skipLibCheck": true
    },
	"exclude": [
		"./node_modules/@types/*",
		"./node_modules/@types/bluebird/index.d.ts",
		"./node_modules/@types/bluebird/*",
		"./node_modules/@types/jquery/*"
	]
}

[tgriesser]

@sitefinitysteve in that case, can you try changing cypress.config.ts -> cypress.config.js and change

import { defineConfig } from 'cypress'

to

const { defineConfig } = require('cypress')

see if you're able to continue? We'll be updating the logic to better manage TypeScript detection in the meantime

[sitefinitysteve]

Hmm, no, now I'm getting

Your configFile is invalid: C:\Github\Medportal\cypress.config.ts

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

[Stack trace](http://localhost:23407/__launchpad/index.html#)
C:\Github\Project\cypress.config.ts:3
export default defineConfig({
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    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 loadFile (C:\Users\steve\AppData\Local\Cypress\Cache\10.0.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:102:14)
    at EventEmitter. (C:\Users\steve\AppData\Local\Cypress\Cache\10.0.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:136:38)
    at EventEmitter.emit (node:events:520:28)
    at EventEmitter.emit (node:domain:475:12)
    at process. (C:\Users\steve\AppData\Local\Cypress\Cache\10.0.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\util.js:33:22)
    at process.emit (node:events:520:28)
    at process.emit (node:domain:475:12)
    at emit (node:internal/child_process:938:14)
    ```

[sitefinitysteve]

If you need typescript added to the project, and you think that'd fix it... I'm cool with that btw, I just don't use it for anything

[jennifer-shehane]

@sitefinitysteve It should not error in this case for you. We have some logic to detect a TypeScript project and it may be a bit loose in your case where we're not detecting correctly.

[sitefinitysteve]

I do have ts installed globally, but should I just fire in

npm install typescript --save-dev

And see what happens?

The error it's reporting in the generated config is this

Argument of type '{ projectId: string; viewportWidth: number; viewportHeight: number; video: false; videosFolder: string; screenshotsFolder: string; pageLoadTimeout: number; requestTimeout: number; responseTimeout: number; experimentalStudio: boolean; e2e: { ...; }; }' is not assignable to parameter of type 'Partial<UserConfigOptions<any>>'.
  Object literal may only specify known properties, and 'experimentalStudio' does not exist in type 'Partial<UserConfigOptions<any>>'.ts(2345)

[rockhold]

'experimentalStudio' can be safely removed from your config. For more info, check out this discussion: #21561

[tgriesser]

Sorry, should have also said to change export default to module.exports = to allow it to work without needing to add typescript as a dependency

[sitefinitysteve]

@tgriesser Still threw an error... I just added typescript and it loads just fine, we can close