Cypress-cucumber-preprocessor: Error: Can't walk dependency graph: Cannot find module

[hect1c]

Current behavior

I am trying to setup cypress-cucumber-preprocessor in my project. Cypress + React + Typescript

I have it all working as expected but when I try and setup cypress-cucumber-preprocessor with typescript I get the following error Error: Can't walk dependency graph: Cannot find module '^cypress/lib/auth.helper'

This happens with any custom module aliases used in my cypress files.

Here is my plugin index file:

const browserify = require('@cypress/browserify-preprocessor')
const cucumber = require('cypress-cucumber-preprocessor').default
const resolve = require('resolve')

module.exports = (on, config) => {
 const options = {
    ...browserify.defaultOptions,
    typescript: resolve.sync('typescript', { baseDir: config.projectRoot }),
  }

  on('file:preprocessor', cucumber(options))
}

Below is my tsconfig.json file in cypress directory

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress"],
    "isolatedModules": false,
    "allowJs": true,
    "noEmit": true,
    "baseUrl": "..",
    "paths": {
      "^cypress": [
        "../cypress/*"
      ]
    }
  },
  "include": [
    "../node_modules/cypress",
    "**/*.ts"
  ],
  "exclude": [],
}

Below is my tsconfig file at root

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "sourceMap": false,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitThis": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "rootDirs": ["src/__generated__", "src/**/__generated__"],
    "baseUrl": ".",
    "paths": {
      "@static/*": [
        "./public/static/*"
      ],
      "@generated/*": [
        "./src/__generated__/*"
      ],
      "@*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.js",
    "public",
    "cypress",
    "jest.setup.js",
    "release.config.js"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.spec.tsx",
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/*.graphql",
    "cache/Cypress/**"
  ]
}

I've tried different examples with typescript and tsify but they did not work as well and got same issue. 

Desired behavior

I would like to get the cypress-cucumber-preprocessor working with typescript in my current project.

Test code to reproduce

The code is a bit large but will try and provide a minimal working clone.

Versions

• Cypress version: 6.8.0
• Preprocessor version: 4.0.3
• Node version:

[hect1c]

Hey,

I was able to reproduce this in a separate project: https://github.com/hect1c/cypress-cucumber-nextjs-typescript

If you do the following you will see the error:

• clone repo
• npm i
• npm run dev
• in a separate terminal npm run e2e

This will open the cypress chrome browser. From there just click on the Builder.feature and then you will see the error message.

[hect1c]

Hey, did I not provide enough information? Would be great if I could get some guidance on this as I would like to very much use this plugin and start porting our tests over to Gherkin syntax. Thanks ahead of time for your support on this.

[lgandecki]

Hello, sorry to keep you waiting. The reproduction will definitely be very helpful, thanks for that. One of us should be able to take a look at it sooner than later. At the same time please remember we are volunteers and are doing this for free in our spare time. :) So silence here doesn't mean there is something wrong with your report..

@MateuszNowosad maybe you would be able to take a look at this one? Besides veryfing that it fails on your end as well I'd check with older versions of cypress/our plugin. But obviously take any steps you feel are best :)

[badeball]

I'm not able to reproduce the issue you're describing using the mentioned repository. It runs, albeit not without errors, but with a different and expected error.

Can you add a simple test that is not a Cucumber-test, merely containing the following and see that it runs under the same configuration?

// foobar.spec.js
it("should work", () => {
  expect(true).to.eq(true);
});

.. if that doesn't run and you observe the same error, then this is in fact not an issue with the preprocessor.

[hect1c]

@lgandecki Thanks for the response, and really appreciate the support you guys do on the plugin and the community.

@badeball Sorry I think I was not clear

The issue is more so related to module resolution using typescript + cucumber following the information here: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#with-out-of-the-box-support

I also have a lot of custom module resolvers trying to access them using @module/lib. It seems when I add cucumber following the documentation using browserify my custom module imports are no longer working which is the error you are getting in the reproducible project.

I've tried various recommended solutions:

• https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/324
• webpack example: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/324
• without webpacke exampl: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/324

I'm struggling to get the cucumber implementation to work with typescript and custom module imports. Without cucumber and just cypress + typescript it all works fine including the custom module imports.

Any help is greatly appreciated, thanks for the great plugin.

[MateuszNowosad]

@hect1c
I took a look at this issue and tried to reproduce it with a provided example but I wasn't able to just like @badeball. I did some digging and decide that a better approach than fixing yours will be to make my own using your configs and I think I succeeded with creating an example with only dependencies being cypress, typescript, and cypress-cucumber-preprocessor.

I forked cypress-cucumber-typescript-example and added a branch with a title 537-Cant_walk_dependency_graph

To run it you have to:
npm install and run npm test

It also includes a test suggested by @badeball and it passes so I will be digging down on this issue and when I figured something out I will update you on this.

[zjkipping]

Is there any update on this? @MateuszNowosad @hect1c I'm having this same issue when trying to access a global path listed in my tsconfig.json. I'm in a NX workspace so the global paths are coming from a root tsconfig.base.json & the cypress application extends from that. It doesn't appear to be looking at the tsconfig in the cypress application at all? Is there a way to pass this into the options for the cucumber-preprocessor? For now I might resort to relative paths instead of globals & see if that is a spot fix...

I have also tried the webpack configuration approach, but with webpack5 that doesn't seem to work. Even if I get the webpack configuration working, it throws a random error about err.replace not existing.

[zjkipping]

It seems the walking dependency graph issue happens irrespective of the tsconfig extension. I added the global path to the tsconfig located in the cypress application & the issue still persists. I confirmed the relative pathing works currently as a stop gap. Though it's a rather bad stop gap due to auto importing using the tsconfig's global paths.

[MateuszNowosad]

I've tried to pinpoint the issue but I can't exactly find the root cause. Since I wasn't making any progress on this and this ticket didn't get any responses with more information for me to go on I've put it on the back burner. Any extra information around this issue is valuable to me so if you find out anything worth mention, that you left out from your previous comments, I would gladly take a look at it (preferably in a form of a repository featuring something new about this problem). I will try to allocate some time to revisit this. As a side note, I encourage you to take a look around our code, sometimes it's easier to solve the problem when you know the exact use case.

[zjkipping]

I'll try to whip up small NX workspace repository based on this client project's setup and see if I can replicate the Nx + Cypress + TS + Cucumber issues I'm currently experiencing. Thanks for the fast response @MateuszNowosad

[fonzerelly]

+1 We have the same problem.

[hect1c]

I'm still having the issue and will try and replicate it using the forked repo that @MateuszNowosad created and go from there.

Similar to @zjkipping it works with relative paths but I'm importing / using a lot of different utils and helpers scattered through the project so using relative path would not be practical. Will also try and scan through the code to see if I can find anything that may help.

[zjkipping]

Here is the github repo I promised @MateuszNowosad:

Issues with the "out-of-box support": https://github.com/zjkipping/nx-cypress-cucumber/tree/out-of-box-support

Issues with the "webpack config": https://github.com/zjkipping/nx-cypress-cucumber/tree/webpack-config

To run the branches you would just need to yarn install & then run yarn e2e.

The "out-of-box-support" branch is throwing an error with walking the dependency graph.
The "webpack-config" branch is throwing an error about err.replace being undefined.

The webpack config one has Nx's typescript preprocessor for TS thrown on top. I've had the same "error" using just a straight up normal webpack config as well as seen in that forked repository above.

[pietschy]

Thanks @zjkipping for taking the time to reproduce this.

We're getting the same issue in our project. Any modules referenced from the paths in tsconfig.base.json break with the Can't walk dependency graph: error.

I've also spent the day battling webpack (without success) and the err.replace issue seems to be related to cypress not supporting webpack 5 yet. See https://github.com/cypress-io/cypress/issues/8948 and https://github.com/cypress-io/cypress/issues/8948#issuecomment-737156406

This Webpack 5 support issue claims to be almost released but I can't see that its landed yet: https://github.com/cypress-io/cypress/issues/8900#issuecomment-867290832