[Bug] Unable to upgrade to ES6 in my TypeScript project

[Regnander]

Current behavior:

Setting "target": "ES6" in tsconfig.json will highlight upload() with the error "Property 'upload' does not exist on type 'Chainable<JQuery>'", as if VS Code cannot find the module. Setting "target": "ES5" works just fine.

Desired behavior:

I want to be able to upgrade target to ES6.

Steps to reproduce: (app code and test code)

tsconfig.json:

{
    "compilerOptions": {
        "strict": true,
        "target": "ES6",
        "types": ["cypress"]
    },
    "include": ["**/*.ts"],
    "exclude": ["/node_modules/"]
}

Cypress test file:

import 'cypress-file-upload';

context('aaa', () => {
    it('bbb', () => {
        cy.fixture('abc').then(fileContent => {
            cy.get('def').upload(fileContent)
        })
    })
})

Versions

Cypress: 3.8.3 and newer (never tried any older versions) cypress-file-upload: 3.5.3 Visual Studio code: 1.42.1

[domeknn]

+1

[Glinkis]

We also have this issue with "target": "esnext"

[abramenal]

Hi @Regnander @domeknn @Glinkis I'm not really into TypeScript stuff at the moment, but tried to fix it roughly. Check out if that's fixed in v4.0.3

[Regnander]

Unfortunately not. The only difference I could find is that Cypress code, which normally works for 3.5.3 or when uninstalled, stops working in ES5 for 4.0.3 ("Property 'fixture' does not exist on type 'cy & EventEmitter'."). Otherwise I get the same error.

	ES5	ES6
4.0.3
3.5.3
—

[abramenal]

@Regnander in v4 the command changed its API so called now it's attachFile

[Regnander]

I ran npm update to update to version 4.0.3.

Property 'attachFile' does not exist on type 'Chainable<JQuery>'.

[Regnander]

I ran npm update to update to version 4.0.3.

I meant 4.0.4.

[abramenal]

Can someone check that in v4.0.5? If that still does not work properly, I am asking your help to make proper change in https://github.com/abramenal/cypress-file-upload/blob/master/types/index.d.ts

[yonigibbs]

I've tried v4.0.5 in both IntelliJ and VSCode and both highlight the same problem with the Chainable interface defined in cypress-file-upload: it's declared twice, with a different generic type parameter in each one (see #182). The IDE warning can be seen by opening index.d.ts in the node_modules/cypress-file-upload folder. I believe this duplication, which has been in the code in a couple of the v4.0.x releases, might be at least partly related to the original issue logged here (e.g. when I use v4.0.3 I can see some of the errors shown above).

If I update index.d.ts in cypress-file-upload and simply remove the 2nd definition, all warnings in both IDEs disappear, and the problem originally logged in this issue here also does not recur, at least in my environment. So from what I can see we simply need to remove the second declaration of the Chainable interface.

However, I'm not 100% sure about this, as I haven't been able to replicate the original issue logged here, when using v3.5.3. So I suspect my setup could be different is in some way. Has someone got a repo where this issue can be replicated? If so I'm happy to take a look.

Failing that, I'll create a PR for this early next week to remove that duplicate definition, unless someone else thinks this isn't the right solution?

[yonigibbs]

Excellent, looks like I don't need to bother with the PR, as @jdcl32 included the fix mentioned above in PR #187. I've confirmed that v4.0.6 no longer shows the issues mentioned above on my system.

@abramenal, as far as I can see this issue can now be closed again, but like I said I've never been able to replicate the v3.5.3 problem so maybe there's something slightly different in my setup.

Thanks again @jdcl32 for the fix!

[peterkrieg]

Unfortunately, I'm still seeing this error, with upgrading to cypress-file-upload 4.0.6: Property 'attachFile' does not exist on type 'Chainable<JQuery<HTMLElement>>'

I'll try and dig into what's going on later! Weird because if I just copy the same declaration into my support/index.d.ts (cypress local types) it doesn't have the error. 🤔

[yonigibbs]

@peterkrieg, do you have a public repo somewhere I can look at to replicate this? Just wondering if I can compare it to my seemingly working one and hopefully get a clue to what's going on.

[peterkrieg]

Unfortunately don't have anything public since it's code at work. But I'll try and put together a minimum reproducible example!

[stphnlngdncoding]

@peterkrieg Any luck here?

[stphnlngdncoding]

I was running in to a problem where my editor (vscode) was recognizing that .attachFile was the appropriate command but the cypress test-runner was throwing a type error in the console and in the runner UI. I noticed that this library contained the appropriate namespace in the library but for some reason it wasn't being recognized.

I had to explicitly include the library in my tsconfig.json inside my cypress directory:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noEmit": false,
    "isolatedModules": false
  },
  "include": [
    "../node_modules/cypress",
    "../node_modules/cypress-file-upload",
    "**/*.ts",
    "**/*.js"
  ]
}

[josephzidell]

@peterkrieg Have you tried putting this at the top of your file?

/// <reference types="Cypress" />

code here ....

[peterkrieg]

The fix necessary for me (which I just realized, after totally missing before) was to add cypress-file-upload into the types field of the tsconfig.json for cypress.

So, my tsconfig needs the following block in compilerOptions:

{
  "compilerOptions": {
    "types": ["cypress", "cypress-file-upload"]
  }
}

This is working for me with latest cypress-file-upload version, 4.1.1. Curious if this also works for others in this thread?

[yonigibbs]

@peterkrieg, @abramenal: I don't have cypress-file-upload explicitly mentioned in tsconfig.json: I only have cypress. So for my system at least, this wasn't necessary. Glad you at least found a solution, though :-)