Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cypress breaks webpack compiling when installed as an npm package #1227

Closed
joshmccure opened this Issue Jan 25, 2018 · 12 comments

Comments

9 participants
@joshmccure
Copy link

joshmccure commented Jan 25, 2018

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

This comment has been minimized.

Copy link
Collaborator

bahmutov commented Jan 25, 2018

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

This comment has been minimized.

Copy link
Author

joshmccure commented Jan 26, 2018

@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

This comment has been minimized.

Copy link
Collaborator

bahmutov commented Feb 16, 2018

Can you exclude the Cypress in the tsconfig.json?

@alexmgrant

This comment has been minimized.

Copy link

alexmgrant commented Jul 11, 2018

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

This comment has been minimized.

Copy link

jedwantstocode commented Jul 16, 2018

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

@georgegrafos

This comment has been minimized.

Copy link

georgegrafos commented Dec 1, 2018

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

This comment has been minimized.

Copy link

motabass commented Dec 19, 2018

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

@fr0

This comment has been minimized.

Copy link

fr0 commented Jan 23, 2019

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

This comment has been minimized.

Copy link
Collaborator

bahmutov commented Feb 7, 2019

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

@ro-savage

This comment has been minimized.

Copy link

ro-savage commented Mar 12, 2019

Potential fix: #3425

@jennifer-shehane

This comment has been minimized.

Copy link
Member

jennifer-shehane commented Mar 13, 2019

The code from #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

This comment has been minimized.

Copy link

cypress-bot bot commented Mar 15, 2019

Released in 3.2.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.