Error: Can't walk dependency graph: Cannot find module

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:

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:32 (7 by maintainers)

Top GitHub Comments

6reactions

yann-combarnouscommented, Nov 25, 2021

Same issue here, cannot get Typescript’s “baseUrl” or “alias” honoured by the browserify pre-processor, with the setup described in this project. See reproduction repo here: https://github.com/yann-combarnous/cypress-cucumber-ts-baseurl

5reactions

JurajJakubovcommented, Dec 14, 2021

What worked for me (cypress + cucumber + typescript + webpack5) Webpack file

const path = require('path');
const webpack = require("webpack");

module.exports = {
    resolve: {
        alias: {
            '@ALIAS/SOMETHING': path.resolve(path.join(__dirname, '../../dist/something')),
            '@ALIAS/SOMETHINGELSE': path.resolve(path.join(__dirname, '../../dist/somethingElse'))
        },
        extensions: ['.ts', '.js'],
        fallback: {
            path : require.resolve("path-browserify")
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'ts-loader',
                    }
                ]
            },
            {
                test: /\.feature$/,
                use: [
                    {
                        loader: 'cypress-cucumber-preprocessor/loader'
                    }
                ]
            },
            {
                test: /\.features$/,
                use: [
                    {
                        loader: 'cypress-cucumber-preprocessor/lib/featuresLoader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ]
};

plugins/index.js

const webpack = require("@cypress/webpack-preprocessor");

module.exports = (on, config) => {

    const options = {
        webpackOptions: require("PATH TO WEBPACK FILE")
    };
    on("file:preprocessor", webpack(options));
  
};

Top Results From Across the Web

Can't walk dependency graph - Stack Overflow

I had the same error. This error means that it cannot find the required js file. Make sure that the file is in...

cypress-io/cypress - Gitter

cypress is showing below error messager after adding Drag and Drop plugin index.js and package.json file. Error: Can't walk dependency graph: Cannot find...

Error: Can't walk dependency graph: Cannot find module

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

Can't walk dependency graph: Cannot find module 'jquery' from

【node打包缺包】Error: Can't walk dependency graph: Cannot find module 'jquery' from.

Fix Global Installs Not Working | "Cannot find module" error FIX

Getting " Cannot find module " after installing something globally (with -g)? Well, this video shows you how to fix global package/module ...