Cypress: Cypress breaks webpack compiling when installed as an npm package

[joshmccure]

Current behavior:

Currently when I install the cypress npm package on my angular cli project it breaks webpack compiling. The error only happens when after cypress is installed via npm and then ng serve is run to trigger webpack compiling.

The repository itself has no trouble compiling pre-cypress or any other npm package

It seems related to lodash we define lodash as

import * as _ from 'lodash';

Please see the stack trace down the bottom

Desired behavior:

cypress should not break webpack compiling

How to reproduce:

Create and Angular 4 project and try to compile is after cypress is installed as an npm package

Additional Info (images, stack traces, etc)

ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (198,41): Property 'uNumber' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/_global/modal/party-select/party-select-modal.component.ts (126,21): Property 'partyRoleName' does not exist on type 'Party'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-form/contact-form.component.ts (422,41): Property 'TelephoneNumber' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (93,16): Property 'RoleName' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (93,37): Property 'RoleType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (127,64): Property 'TypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (128,16): Property 'Type' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (147,17): Property 'Number' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (147,41): Property 'Number' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (148,66): Property 'TTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (149,17): Property 'NumberType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (168,65): Property 'EmailTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-details/contact-details.component.ts (169,17): Property 'emailType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/account-form/account-form.component.ts (494,17): Property 'telephoneNumber' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/account-form/account-form.component.ts (494,41): Property 'TelephoneNumber' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (110,16): Property 'partyRoleName' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (110,37): Property 'PartyRoleType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (178,65): Property 'AddressTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (179,16): Property 'addressType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (198,17): Property 'telephoneNumber' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/contacts/contact-form/contact-form.component.ts (422,17): Property 'telephoneNumber' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (199,17): Property 'telephoneNumberType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (199,75): Property 'TelephoneTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (200,17): Property 'telephoneNumberType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (200,45): Property 'telephoneNumberType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (200,73): Property 'telephoneNumberType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (201,17): Property 'communicationType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (201,72): Property 'CommunicationTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (202,17): Property 'communicationType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (202,43): Property 'communicationType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (202,69): Property 'communicationType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (221,17): Property 'emailType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (221,65): Property 'EmailTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (222,17): Property 'communicationType' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/accounts/user-details/user-details.component.ts (222,72): Property 'CommunicationTypeID' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/templates/cat-form/cat-form.component.ts (111,63): Property 'value' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/templates/cat-form/cat-form.component.ts (111,75): Property 'value' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/templates/dog-form/dog-form.component.ts (135,63): Property 'value' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/templates/dog-form/dog-form.component.ts (135,75): Property 'value' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/templates/flyer-form/flyer-form.component.ts (128,63): Property 'value' does not exist on type '{}'.
ERROR in /Users/Josh/Desktop/ui/src/app/templates/flyer-form/flyer-form.component.ts (128,75): Property 'value' does not exist on type '{}'.

webpack: Failed to compile.

• Operating System: Mac Osx
• Cypress Version: latest
• Browser Version: 63 chrome

[bahmutov]

Hmm, I don't see cypress anywhere in your stack trace. Are you sure this is due to installing Cypress? I find this sentence weird in your bug report

The repository itself has no trouble compiling pre-cypress or any other npm package

We have been adding Cypress to Angular project without problems - see https://www.cypress.io/blog/2017/12/11/an-alternative-to-protractor-for-angular-projects/ for example

[joshmccure]

@bahmutov
Adding more information because I think this is a genuine bug now.

Just to clarify to problem. The compilation errors are coming from application code not cypress test code, but these errors only occur after installing Cypress as an NPM package.

I'm pretty sure this is because of some sub-dependencies that cypress installs for lodash typings which then force these on the application code. I'll list the errors below and walk through the application code.

Here is 1 of the many stack trace errors - (they're all the same and all in component.ts files)

ERROR in /Users/Josh/Documents/ui/src/app/accounts/account-details/account-details.component.ts (110,16): Property 'partyRoleName' does not exist on type '{}'.

webpack: Failed to compile.

here is the code causing the error - note partyRoleName

  private retrieveRoles() {
    this.accountService.getPartyRoles(this.account.PartyID).subscribe(
      partyRoles => {
        _.map(partyRoles, (role) => {
          role.partyRoleName = role.PartyRoleType.name;
        });
        this.Roles = partyRoles;
        if (this.Roles.length > 0) {
          this.retrievePrimaryContact();
          _.each(this.Roles, (role) => {
            role.owner = { party: new Party() };
            this.accountService.getPartyRoleParentsByRelationshipTypeId(role.iD, 13).subscribe(
              parents => {
                if (parents.length) {
                  role.owner = parents[0];
                  role.owner.party.PartyName = parents[0].partyName;
                }
              }
            );
            this.retrieveShares(role);
            this.retrieveRelations(role);
          });
        }
      }
    );
  }

We also define lodash at the top of the file
import * as _ from 'lodash';

For now I need to have my cypress folder to have its own package.json as a workaround but this is less than ideal - otherwise it breaks our projects dependencies

[bahmutov]

Can you exclude the Cypress in the tsconfig.json?

[alexmgrant]

This is most definitely an issue. My build fails on first compile throwing type errors where lodash is used, only when cypress is installed via npm. "cypress" is ignored in tsconfig.ts.

*edit I was able to get this working. I added cypress to ignore in tsconfig.ts & removed @types/lodash from my project.

[jedwantstocode]

I updated using the command from the cypress test runner now I can't build components with same error above. :(

[georgegrafos]

Hi, is there any update to this issue?

I have had similar issues as stated above with running yarn ng for my project. This results in errors being thrown anywhere lodash is used in the project. As @alexmgrant mentioned, removing @types/lodash does fix the issue, but this doesn't seem like an ideal fix.

Upon installation, Cypress adds @types/lodash to my project's node_modules. I thought it might be versioning issues, but even matching my project's lodash version with the one Cypress uses made no difference. I've tried excluding Cypress in tsconfig.json as well as specifying which types to use, excluding lodash and it did not fix the issue.

[motabass]

For me, only deleting @types/lodash from node_modules directory by hand works around the issue.

[fr0]

This is probably due to two things that combine to create the problem:

1. @types/lodash is in Cypress's dependencies list; typically, type def packages should be in devDependencies. They are needed for compilation of the code, but not needed at runtime. (Things like @types/mocha and @types/chai might be a weird exception to this rule specifically in Cypress's use case; although, you could argue that users should put those in their package.json's devDependencies instead).
2. Cypress is referencing an old version of @types/lodash (4.14.87). I have problems when using that version. However, when upgrading to 4.14.120, things work fine.

[bahmutov]

@fr0 and @motabass I am thinking of moving all @types out of prod dependencies, any comments on the proposal #3371?

[ro-savage]

Potential fix: https://github.com/cypress-io/cypress/pull/3425

[jennifer-shehane]

The code from https://github.com/cypress-io/cypress/pull/3425 is done, but this has yet to be released. We'll update this issue and reference the changelog when it's released.

[cypress-bot[bot]]

Released in 3.2.0.