DayJS throwing TS2339 error

[Zach-Costa]

Hey! Awhile back, we refactored our tests to use DayJS, due to Moment.js being deprecated. We followed the Cypress recipe to get it set up, and it works perfectly fine when running tests. However, Intellisense reports the following error on every single instance of DayJS in our code: TS2339: Property 'dayjs' does not exist on type 'Cypress & EventEmitter'.

We've tried a few solutions to this. The solution we've commonly seen is to add it to the Cypress namespace in the support/index.ts file, like so:

/// <reference types="cypress" />

import dayjs from 'dayjs';

declare namespace Cypress {
    interface Chainable {
        ... your custom commands

    }
    interface Cypress {
        dayjs: dayjs.Dayjs;
    }
}

This results in the exact same error. We have also tried adding it to a global namespace in the support/index.ts file:

/// <reference types="cypress" />

import dayjs from 'dayjs';

declare global {
  namespace Cypress {
    interface Chainable {
      ... your custom commands
    }
    interface Cypress {
      dayjs: dayjs.Dayjs;
    }
  }
}

This removes the TS2339 error, but then results in a new error: TS2349: This expression is not callable. Type 'Dayjs' has no call signatures.

This is my tsconfig.json file:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "./dist/",
    "noImplicitAny": false,
    "module": "es2015",
    "target": "es2015",
    "jsx": "react",
    "allowJs": true,
    "types": ["cypress", "@percy/cypress"],
    "moduleResolution": "node",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  },
  "include": ["**/*.ts", "node_modules/cypress/types/mocha/index.d.ts"]
}

I am at my wit's end - Any ideas what I am doing wrong here? Since our tests run without issue, it's not a blocker, but it results in hundreds of errors that make it nearly impossible to find actual errors being reported.

[Zhen-Bo]

create a cypress-global-vars.d.ts in your support folder
cypress-global-vars.d.ts file:

/// <reference types="cypress" />

import dayjs from 'dayjs';

declare global {
  namespace Cypress {
    interface Cypress {
      dayjs: dayjs.Dayjs;
    }
  }
}

[Zach-Costa]

Forgot I had posted this! We did end up solving this awhile ago, but this was pretty much our exact solution. Thanks for following up on this!