Can't seem to get this to work with Cypress 12.16.0 and Typescript

[bobbhatti]

I am trying to run this with the following

Cypress 12.16.0
Typescript
Cypress-Cucumber-PreProcessor

Am receiving the following error

The error was thrown while executing your e2e.setupNodeEvents() function:
TypeError: (0 , cypress_split_1.cypressSplit) is not a function

What am I doing wrong?

[bahmutov]

is this a TS error or an actual runtime error?

[bobbhatti]

it feels like a typescript error. the require was converted to an import, however even if i use require it still fails, i am using browserify in setupNodeEvents too

[bahmutov]

Maybe use "// @ts-ignore" above the line to stop TS from complaining

…

On Wed, Jul 5, 2023 at 2:56 PM Bob Bhatti ***@***.***> wrote: it feels like a typescript error. the require was converted to an import, however even if i use require it still fails, i am using browserify in setupNodeEvents too — Reply to this email directly, view it on GitHub <#77 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQ4BJQ2ZV7F7CQQFKWSIVLXOW2HLANCNFSM6AAAAAAZ6AUWYE> . You are receiving this because you commented.Message ID: ***@***.***>

-- Dr. Gleb Bahmutov, PhD Schedule video chat / phone call / meeting with me via https://calendly.com/bahmutov ***@***.*** @bahmutov ***@***.***> https://glebbahmutov.com/ https://glebbahmutov.com/blog https://github.com/bahmutov

[bobbhatti]

ah cool thanks, will give it a go thank you

[Elte156]

@bahmutov I am having the same issue.

If I try to use import like so:

import cypressSplit from 'cypress-split';

I would need to create a custom type declaration file cypress-split.d.ts

declare module 'cypress-split' {
  export default function cypressSplit(
    on: PluginEvents,
    config: PluginConfigOptions
  ): Promise<PluginConfigOptions | void> | PluginConfigOptions | void;
}

But when trying to boot up cypress, I get this error

Your configFile threw an error from: /root/project/apps/XXX/cypress.config.ts

The error was thrown while executing your e2e.setupNodeEvents() function:

TypeError: (0 , cypress_split_1.default) is not a function at setupNodeEvents 
   (/root/project/apps/XXX/cypress.config.ts:12:19) 
   at /root/.cache/Cypress/12.11.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:122:14

The solution to this is to use require, but it's not recommended according to our linters.

// eslint-disable-next-line @typescript-eslint/no-var-requires
const cypressSplit = require('cypress-split');

I think the ultimate solution would be:

1. Export type declarations with your package builds
2. Add them to the types lib @types/cypress-split

Then TS projects could automatically import these type declarations.

[Baune8D]

Use:

import * as cypressSplit from 'cypress-split';

[Elte156]

Use:

import * as cypressSplit from 'cypress-split';

@Baune8D I tried this and the linting error is:

Could not find a declaration file for module 'cypress-split'. './node_modules/cypress-split/src/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/cypress-split` if it exists or add a new declaration (.d.ts) file containing `declare module 'cypress-split';`ts(7016)

The reason is that I have noImplicitAny set to true. I'd prefer not to downgrade my project linting to account for the non-existent typing of this library.

[Baune8D]

@Elte156 Yeah you proberly need to implement your own typings. But it will fix the TypeError: (0 , cypress_split_1.default) is not a function at setupNodeEvents error.

[github-actions]

🎉 This issue has been resolved in version 1.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Elte156]

@bahmutov thanks for releasing 1.5.0.

I was able to use import instead of require, so my linter was no longer throwing an issue.

import cypressSplit from 'cypress-split';

I still encountered the same error though:

The error was thrown while executing your e2e.setupNodeEvents() function:

TypeError: (0 , cypress_split_1.default) is not a function
    at setupNodeEvents (/XXX/cypress.config.ts:12:19)
    at /root/.cache/Cypress/12.11.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:122:14

The solution was to add this to my tsconfig.json
Might be helpful to add this to your README TS section.

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

[Baune8D]

@bahmutov thanks for releasing 1.5.0.

I was able to use import instead of require, so my linter was no longer throwing an issue.

import cypressSplit from 'cypress-split';

I still encountered the same error though:

The error was thrown while executing your e2e.setupNodeEvents() function:

TypeError: (0 , cypress_split_1.default) is not a function
    at setupNodeEvents (/XXX/cypress.config.ts:12:19)
    at /root/.cache/Cypress/12.11.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:122:14

The solution was to add this to my tsconfig.json Might be helpful to add this to your README TS section.

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

FYI You can import using import * as cypressSplit from 'cypress-split'; without esModuleInterop

[Elte156]

FYI You can import using import * as cypressSplit from 'cypress-split'; without esModuleInterop

@Baune8D If I do this I get this error in my IDE.

This expression is not callable.
  Type 'typeof import("/XXX/node_modules/cypress-split/src/types")' has no call signatures.ts(2349)

It suggests me to do this:

So I either:

• use esModuleInterop with import cypressSplit from 'cypress-split';
• OR change to use cypressSplit.default(on, config); with import * as cypressSplit from 'cypress-split';

[Baune8D]

FYI You can import using import * as cypressSplit from 'cypress-split'; without esModuleInterop

@Baune8D If I do this I get this error in my IDE.

This expression is not callable.
  Type 'typeof import("/XXX/node_modules/cypress-split/src/types")' has no call signatures.ts(2349)

It suggests me to do this:

So I either:

• use esModuleInterop with import cypressSplit from 'cypress-split';
• OR change to use cypressSplit.default(on, config); with import * as cypressSplit from 'cypress-split';

Yeah you are right, import * as cypressSplit from 'cypress-split'; still works and seems to be the way to import it without esModuleInterop, but the new typings gives an error.

cypressSplit.default(on, config); gives a runtime error: TypeError: cypressSplit.default is not a function so that is not an alternative.

[Elte156]

cypressSplit.default(on, config); gives a runtime error: TypeError: cypressSplit.default is not a function so that is not an alternative.

FYI, on 1.5.0 the function cypressSplit.default(on, config); works for me and there is no runtime error.

[Baune8D]

cypressSplit.default(on, config);

Yes it works if you use esModuleInterop: true, but without there is not currently any way to use it since the previous method of import * as cypressSplit from 'cypress-split'; is now broken with the new typings 😅 Any way, i will create a new issue for it 👍

[Baune8D]

I created a PR that fixes this for both esModuleInterop settings: #114