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 · 13 comments
Closed

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

joshmccure opened this issue Jan 25, 2018 · 13 comments

Comments

@joshmccure
Copy link

@joshmccure 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
Copy link
Contributor

@bahmutov 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
Copy link
Author

@joshmccure 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
Copy link
Contributor

@bahmutov bahmutov commented Feb 16, 2018

Can you exclude the Cypress in the tsconfig.json?

@alexmgrant
Copy link

@alexmgrant 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
Copy link

@jedwantstocode 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
Copy link

@georgegrafos 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
Copy link

@motabass motabass commented Dec 19, 2018

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

@fr0
Copy link

@fr0 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
Copy link
Contributor

@bahmutov 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
Copy link

@ro-savage ro-savage commented Mar 12, 2019

Potential fix: #3425

@jennifer-shehane
Copy link
Member

@jennifer-shehane 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
Copy link

@cypress-bot cypress-bot bot commented Mar 15, 2019

Released in 3.2.0.

@only4arunkumar
Copy link

@only4arunkumar only4arunkumar commented May 25, 2021

Today happen to get the same error. But none of the above solution were relevant to me .
But later found that my support/command.js file had an import statement for loaddash . not sure how it got added.
removing it resolved my issue

@cypress-io cypress-io locked as resolved and limited conversation to collaborators May 26, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants