Adding custom functions for Synpress/Cypress Project

I want to add custom functions to a synpress project. (Synpress is a wrapper around Cypress which allows interaction with Metamask). Note there is a question: Cypress custom command is not recognized when invoked but even though I read through this QA, my custom functions are not recognized.

This is my project setup.

synpress_project/
├─ cypress/
│  ├─ e2e/
│  ├─ support/
├─ package-lock.json
├─ package.json

From the answer mentioned before

All the code and referenced modules in index.js are loaded before your test file. So you need to refer(require) commands.js in your index.js file

I obeyed to that, inside cypress/support:

commands.js

import "@testing-library/cypress/add-commands";

// add it here, because custom functions need synpress commands as well
import "@synthetixio/synpress/support";

// add custom functions

Cypress.Commands.add("disconnectFromDappify", () => {
    cy.disconnectMetamaskWalletFromDapp().should("be.true");
  });

index.js

import './commands'

I know that the files are being read, since removing the line import "@synthetixio/synpress/support"; breaks the tests (metamask interaction does not work anymore). However, my function is not available

TypeError: cy.disconnectFromDappify is not a function

package.json

{
  "devDependencies": {
    "cypress": "^10.0.1"
  },
  "scripts": {
    "test": "env-cmd -f .env npx synpress run -cf synpress.json"
  },
  "dependencies": {
    "@synthetixio/synpress": "^1.2.0",
    "env-cmd": "^10.1.0"
  }
}

synpress.json

{
    "baseUrl": "http://localhost:3000",
    "userAgent": "synpress",
    "retries": { "runMode": 0, "openMode": 0 },
    "integrationFolder": "cypress/e2e/specs",
    "screenshotsFolder": "screenshots",
    "videosFolder": "videos",
    "video": false,
    "chromeWebSecurity": true,
    "viewportWidth": 1366,
    "viewportHeight": 850,
    "component": {
      "componentFolder": ".",
      "testFiles": "**/*spec.{js,jsx,ts,tsx}"
    },
    "env": {
      "coverage": false
    },
    "defaultCommandTimeout": 30000,
    "pageLoadTimeout": 30000,
    "requestTimeout": 30000,
    "supportFile": "cypress/support/index.js"
  }

With help of a colleague, I was able to solve it.

Although, I specified "supportFile": "cypress/support/index.js" inside the synpress.json. It could not find the custom functions.

But if I changed the way the supportFile is called, explicit instead of implicit, it works.

Add --supportFile='cypress/support/index.js' to the end of the command.

"scripts": {
    "test": "env-cmd -f .env npx synpress run -cf synpress.json --supportFile='cypress/support/index.js'"
  },

Additionally, remove import "@testing-library/cypress/add-commands"; from the commands.js file. (don't know why this is needed, but code breaks, if used, any hints are welcome!)