ERROR @wdio/utils:shim: TypeError: Cannot read properties of undefined (reading 'attach')

[RodrigoGambino]

Environment (please complete the following information):

"devDependencies": {
   "@types/node": "^20.11.21",
   "@wdio/allure-reporter": "^8.32.2",
   "@wdio/appium-service": "^8.32.3",
   "@wdio/browserstack-service": "^8.32.3",
   "@wdio/cli": "^8.32.3",
   "@wdio/cucumber-framework": "^8.32.3",
   "@wdio/globals": "^8.32.3",
   "@wdio/junit-reporter": "^8.32.2",
   "@wdio/local-runner": "^8.32.3",
   "@wdio/sauce-service": "^8.32.3",
   "@wdio/selenium-standalone-service": "^8.15.0",
   "@wdio/spec-reporter": "^8.32.2",
   "allure-commandline": "^2.27.0",
   "allure-cucumberjs": "^2.13.0",
   "appium": "^2.5.1",
   "appium-uiautomator2-driver": "^3.0.1",
   "appium-xcuitest-driver": "^7.1.2",
   "concurrently": "^8.2.2",
   "cucumber-html-reporter": "^7.1.1",
   "eslint": "^8.57.0",
   "eslint-config-standard": "^17.1.0",
   "eslint-plugin-cucumber": "^2.0.0",
   "eslint-plugin-import": "^2.29.1",
   "eslint-plugin-node": "^11.1.0",
   "eslint-plugin-promise": "^6.1.1",
   "ts-node": "^10.9.2",
   "typescript": "^5.3.3",
   "wdio-chromedriver-service": "^8.1.1",
   "wdio-cucumber-parallel-execution": "^3.6.15",
   "wdio-cucumberjs-json-reporter": "^5.2.0",
   "wdio-wait-for": "^3.0.11",
   "webdriverio": "^8.32.3",
   "xunit-viewer": "^10.5.1"
 },
 "dependencies": {
   "@cucumber/language-server": "^1.4.0",
   "@wdio/codemod": "^0.12.0",
   "date-fns": "^3.3.1",
   "dotenv": "^16.4.5",
   "jscodeshift": "^0.15.2",
   "npm-check-updates": "^16.14.15"
 }

Config of webdriver.io and the reporter

const cucumberJson = require("wdio-cucumberjs-json-reporter").default;

reporters: [
    'spec',
    ['cucumberjs-json', {
      jsonFolder: jsonTmpDirectory,
      language: 'en',
      screenshotsDirectory: './screenshots/',
      storeScreenshots: true,
      disableHooks: true
    }]
]

afterStep: async function (step, scenario, result, context) {
      cucumberJson.attach(await browser.takeScreenshot(), 'image/png');
  },

onComplete: () => {
    try {
      let consolidatedJsonArray = wdioParallel.getConsolidatedData({
        parallelExecutionReportDirectory: jsonTmpDirectory
      });

      let jsonFile = `${jsonTmpDirectory}report.json`;
      fs.writeFileSync(jsonFile, JSON.stringify(consolidatedJsonArray));

      var options = {
        theme: 'bootstrap',
        jsonFile: jsonFile,
        output: `test/reports/html/report ${currentTime}.html`,
        reportSuiteAsScenarios: true,
        scenarioTimestamp: true,
        launchReport: true,
        ignoreBadJsonFile: true
      };

      reporter.generate(options);
    } catch (err) {
      console.log('err', err);
    }
  },

Describe the bug
I want to add a screenshot to the report in each step of the script, but I get the error "ERROR @wdio/utils:shim: TypeError: Cannot read properties of undefined (reading 'attach')", and I have everything configured as indicated, but I can't find the solution, or what's wrong. The afterStep hook is executed after each step, but at each step the error occurs.

To Reproduce
Just add the codes where appropriate in the wdio.conf.ts file.

Expected behavior
Add screenshots to each step in the report.

Snapshots

Additional context
Add any other context about the problem here.

[christian-bromann]

@RodrigoGambino have you tried to import the attach method as follows:

const { attach } = require("wdio-cucumberjs-json-reporter")

[RodrigoGambino]

@christian-bromann I added the import of attach to the code as you indicate, but it still throws the same error.

[christian-bromann]

It appears there may be an issue with the import process. Unfortunately, my ability to assist is limited in this context. I would recommend conducting a thorough debugging to identify and resolve the problem.

[RodrigoGambino]

@christian-bromann When I check the code

const { attach } = require("wdio-cucumberjs-json-reporter")

I get a message that says ""attach" is declared, but its value is never read".

[christian-bromann]

@RodrigoGambino yes, because you have to use it as such:

- cucumberJson.attach(await browser.takeScreenshot(), 'image/png');
+ attach(await browser.takeScreenshot(), 'image/png');

I will go ahead and close this as I doubt this is an actual bug in the reporter.

[RodrigoGambino]

@christian-bromann Using only attach instead of cucumberJson to attach a screenshot solved the problem, it was possible to attach the screenshots in each step of the report. Then you should no longer use

cucumberJson.attach(await browser.takeScreenshot(), 'image/png');

because in my case I followed the steps indicated in the report instructions and this error appears, then only

attach(await browser.takeScreenshot(), 'image/png');

is valid.

The report configuration instructions should be updated I think, or not?.

[christian-bromann]

The report configuration instructions should be updated I think, or not?.

Yeah, mind raising a PR for this?

[RodrigoGambino]

where do I create the branch from main? It seems I don't have permissions to create branches.

[christian-bromann]

@RodrigoGambino please fork the repository and raise a PR from your fork.