Trouble with Typescript + Yarn 3 PNP + VSCode and Cypress

[jdborneman-terminus]

Bear with me as I'm relatively new to both TypeScript AND Cypress.

I've got a small stand alone Cypress project I'm using as a POC. I recently upgraded yarn from 1 to 3 to take advantage of PNP and Zero-Installs support. WHen I run my tests on the command line they work WONDERFULLY.

BUT...

VSCode is throwing fits about not finding type definitions for cypress (and a node module I wrote for common stuff for the app we're testing like load, login, navigation)

My root tsconfig.json:

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "noImplicitAny": false,
      "strictNullChecks": true,
      "noImplicitThis": true,
      "alwaysStrict": true,
      "types": [],
    }
  }

My cypress/tsconfig.json:

{
  "extends": "../tsconfig.json",
  "include": ["**/*.ts"],
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "cypress/types"],
    "noImplicitAny": false,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
  }
}

VS Code is throwing fits on this file, saying:
Cannot find type definition file for 'cypress'. The file is in the program because: Entry point of type library 'cypress' specified in compilerOptions

There is no "production" for this project since it's all just run for testing, so my devDependencies look like:

"devDependencies": {
    "@babel/core": "7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@cypress/webpack-preprocessor": "^5.5.0",
    "@types/cypress": "^0.1.2",
    "@types/expect": "^1.20.2",
    "@types/mocha": "^9.0.0",
    "babel-loader": "^8.2.3",
    "cypress": "^9.0.0",
    "cypress-automation-core": "git+ssh://[email protected]:<<REDACTED>>/cypress-automation-core.git",
    "cypress-file-upload": "^5.0.8",
    "cypress-grep": "^2.10.1",
    "eslint": "^8.3.0",
    "eslint-plugin-cypress": "^2.11.2",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4"
  }

cypress-automation-core is our attempt to write a module that will contain basic stuff like default tags, application login and basic top level navigation, etc. It's being referenced as a github reference until we get an instance of Artifactory stood up. It is also typescript.

And finally, a ts file where a very basic test is being written

import env from '../../env';
import tags from '../../tags';
import { loadApp,
         loginApp,
         navigateToProfile } from 'cypress-automation-core'

describe('The App', () => {
    beforeEach(() => {
        loadApp(env.BASE_URL);
        navigateToProfile(env.USERNAME, env.PASSWORD);
    })

    describe('Profile', () => {
        it('can navigate to the profile page.', tags('@UI', '@SMOKE'), () => {
            navigateToProfile();
        })
    })
  })

On this page I'm seeing Cannot find module X or its corresponding type declarations. errors on from 'cypress-automation-cre', describe, beforeEach, and it

Any ideas at all as to what we might be doing wrong, or could do better to fix VSCode? I followed the instructions here (https://yarnpkg.com/getting-started/editor-sdks#vscode) including

• installing ZipFS
• Making sure that it's using the Workspace version in /.yarn/sdks/typescript/lib
• Like I said above, it all runs beautifully on the command line. Just trying to get VSCode to behave.
• The .zip in the cache for cypress and cypress-automation-core exist and seem to be the correct versions.

Thanks!

[josephzidell]

Looks like there's an open issue that may be related #22747