Cypress: Import line under commands.ts causes errors

Question

When I add imports into the commands.ts, then I get errors by running the tests.

commands.ts

import 'cypress-localstorage-commands';

/* eslint-disable */
declare namespace Cypress {
  interface Chainable<Subject = any> {
     commandA();
     commandB();
     commandC();
  }
}

Error:

Module not found: Error: Can't resolve 'cypress-localstorage-commands' in 'C:...\cypress\support\commands\commands' resolve 'cypress-localstorage-commands' in 'C:...\cypress\support\commands'
Parsed request is a module using description file: C:...\angular\package.json (relative path: ./cypress/support/commands) Field 'browser' doesn't contain a valid alias configuration

Could you maybe improve your question by adding details regarding the cypress-localstorage-commands module you try to import? In general though, I can say that we have also been using Cypress for a while now and imports in commands.ts always resulted in issues, either the tests break or IntelliSense for Custom Commands stopped working. Depending on the contents of your module, I would consider moving these directly to the commands.ts. — Sebastiano Schwarz, Feb 18 '22 at 06:29
Link to cypress-localstorage-commands: https://github.com/javierbrea/cypress-localstorage-commands The test cases, that use the commands from this modul are working. The remaining test after running in the test runner get an error (see above) — CypressDog, Feb 18 '22 at 07:10

score 5 · Accepted Answer · answered Feb 18 '22 at 08:12

The solution of my import error was to add 'global' to commands.ts.

import cypress-localstorage-commands';
/* eslint-disable */
declare global{
  namespace Cypress {
    interface Chainable<Subject = any> {
       commandA();
       commandB();
       commandC();
    }
  }
}

Cypress: Import line under commands.ts causes errors

1 Answers1