Firefox displaying error regarding cypress-cucumber-preprocessor:spec-envelopes

[avdovichj]

When running my scripts using npx cypress open and selecting Firefox as the browser, my scrips are running without any issues, but when I run one of the following commands:

npx cypress run --spec "cypress/e2e/Feature Testing/" --browser firefox --headed

or

npx cypress run --spec "cypress/e2e/Feature Testing/" --browser firefox --headed

my scripts probably fail due to an error caused by the cypress-cucumber-preprocessor:

task cypress-cucumber-preprocessor:spec-envelopes, {messages: Array[7]}, {log: false}

CypressError: cy.task() must only be invoked from the spec file or support file. Because this error occurred during a before all hook we are skipping the remaining tests in the current suite

My cypress.config.js file looks like this:

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const addCucumberPreprocessorPlugin = require("@badeball/cypress-cucumber-preprocessor").addCucumberPreprocessorPlugin;
const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      // implement node event listeners here
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });

      on("file:preprocessor", bundler);
      await addCucumberPreprocessorPlugin(on, config);

      return config;
    },
    specPattern: "**/*.feature",
    chromeWebSecurity: false,
    experimentalOriginDependencies: true,
  },

  retries: {
    runMode: 2
  }
});

And my package.json file contains these dependencies:

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^18.0.0",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
    "@cypress/webpack-preprocessor": "^5.17.1",
    "cypress": "^13.13.2",
    "esbuild": "^0.18.2"
  },
  "dependencies": {
    "@cypress/browserify-preprocessor": "latest",
    "@nuintun/qrcode": "^4.1.5",
    "cypress-real-events": "^1.12.0"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "json": {
      "enabled": true,
      "output": "cypress/cucumberReports/results.json"
    }
  }
}

And here is an example of a test using Cucumber:

/// <reference types="Cypress" />
import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";

Given("The user visits the website", function(){
    let url = Cypress.config().baseUrl
    cy.visit(url)
})

Then("The user is navigated to the landing page", function(){
    cy.get("h1").should("contain.text", "Take the stress out of preparing for surgery")
})

The other browsers (Chrome & Edge) are running without issues on both headed and headless mode and when running both 'npx cypress open' and 'npx cypress run'. How could I resolve this issue on Firefox?