Currently, I am tasked with writing TypeScript end-to-end tests for an Angular 11 application. Following the recommended practices of Cypress, my test setup is encountering a conflict due to existing jQuery dependencies (3.5.1) in the app and Cypress (8.4.1) using its own global jQuery (3.3) type definitions. This conflict results in the following runtime error:
error TS6200: Definitions of the following identifiers conflict with those in another file: TypeOrArray, Node, htmlString...
Although the app compiles and runs, every routing request /request leads to the error Cannot get /request. Curiously, forcing a recompile by adding dummy code allows it to function properly after displaying the same pre-runtime error.
Here are some specifics about my setup:
/cypress/tsconfig.json
{
"extends": "../tsconfig.json",
"include": [
"./**/*.ts"
],
"compilerOptions": {
"target": "es5",
"lib": [
"es5",
"dom"
],
"types": [
"cypress", // this was supposed to ignore jquery types conflicts as per docs
"cypress-localstorage-commands",
]
}
}
tsconfig.json
{
"compileOnSave": true,
"include": [
"...", // other stuff
"**/*.d.ts",
"src/main.ts",
"src/polyfills.ts"
],
"exclude": [
"node_modules/cypress/*",
"cypress/support/index.d.ts"
],
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target"": "es5",
"typeRoots": [
"node_modules/@types",
"./@types"
],
"lib": [
"es2017",
"dom"
]
}
}
The error message received: https://i.stack.imgur.com/qtmvD.png
Therefore, my questions are:
- How can I resolve the conflicting types issue?
- What causes it to work on the second attempt but not the first?
My unsuccessful attempts so far include:
- Applying skipLibcheck to both or individual tsconfigs.
- Configuring tsconfig according to their guidelines to address this problem.
- Trying to
excludecypress within the main tsconfig and jQuery within cypress's tsconfig.