Angular 13 and Nx 13 issue

logitimate commented 2 years ago

When starting a fresh project with nx 13 and angular 13 I'm getting this error

The following error was thrown by a plugin. We stopped running your tests because a plugin crashed. Please check your plugins file (/Users/loganlivingston/upgrades/storybook-test/apps/storybook-test/cypress/plugins/index.ts)

TypeError: The 'compilation' argument must be an instance of Compilation at Function.getCompilationHooks (/Users/loganlivingston/upgrades/storybook-test/node_modules/@jscutlery/cypress-angular-dev-server/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)

gearsdigital commented 2 years ago

I get the same error using an existing Angular 13 project and was also able to reproduce by creating a new project with ng new and following your setup steps.

I created a simple example which shows the issue in action: https://github.com/gearsdigital/compilation-argument-error

Additonal Infos:

node 14.19.0
@angular-devkit/architect 0.1302.6
@angular-devkit/build-angular 13.2.6
@angular-devkit/core 13.2.6
@angular-devkit/schematics 13.2.6
@angular/cli 13.2.6
@schematics/angular 13.2.6
rxjs 7.5.5
typescript 4.5.5

gearsdigital commented 2 years ago

I'ld love to dig deeper here but not sure where to start. Is it possible that the different webpack versions are causing the issue here? Angular itself is using 5.67.0 but you're depending on 5.70.0.

What is interesting is that 5.70.0 has improved its typings (https://github.com/webpack/webpack/releases/tag/v5.70.0) which sounds it could be related to this issue.

$ npm ls webpack

compilation-argument-error@0.0.0 /Users/gears/Developer/projects/compilation-argument-error
├─┬ @angular-devkit/build-angular@13.2.6
│ └── webpack@5.67.0 
└─┬ @jscutlery/cypress-angular@0.9.2
  └─┬ @jscutlery/cypress-angular-dev-server@1.7.10
    └─┬ @angular-devkit/build-angular@13.3.4
      └── webpack@5.70.0

I also tried to update angular to 13.3.5. But didn't work either...


compilation-argument-error@0.0.0 /Users/gears/Developer/projects/compilation-argument-error
├─┬ @angular-devkit/build-angular@13.3.4
│ └── webpack@5.70.0 
└─┬ @jscutlery/cypress-angular@0.9.2
  └─┬ @jscutlery/cypress-angular-dev-server@1.7.10
    └─┬ @angular-devkit/build-angular@13.3.4
      └── webpack@5.70.0

edbzn commented 2 years ago

Hey @logitimate, I just tested with a fresh Nx workspace and it works:

   Node : 16.13.0
   OS   : linux x64
   yarn : 1.22.5

   nx : 14.1.9
   @nrwl/angular : 14.1.9
   @nrwl/cypress : 14.1.9
   @nrwl/devkit : 14.1.9
   @nrwl/eslint-plugin-nx : 14.1.9
   @nrwl/jest : 14.1.9
   @nrwl/linter : 14.1.9
   @nrwl/storybook : 14.1.9
   @nrwl/workspace : 14.1.9
   typescript : 4.6.4
   ---------------------------------------
   Community plugins:
     @jscutlery/cypress-angular: 0.9.2

I think your issue is due to a conflict between different webpack versions as mentioned @gearsdigital, you can try to force the package resolution:

// package.json
{
  "resolutions": {
    "webpack": "5.72.1"
  }
}

If it does not resolve could you provide a reproduction so I can investigate?

logitimate commented 2 years ago

Our team just tried this out and it seems to be working! Thank you guys so much.

jscutlery / devkit

Angular 13 and Nx 13 issue #170