Angular 13 and Nx 13 issue

[logitimate]

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]

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]

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

[email protected] /Users/gears/Developer/projects/compilation-argument-error
├─┬ @angular-devkit/[email protected]
│ └── [email protected] 
└─┬ @jscutlery/[email protected]
  └─┬ @jscutlery/[email protected]
    └─┬ @angular-devkit/[email protected]
      └── [email protected] 

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

[email protected] /Users/gears/Developer/projects/compilation-argument-error
├─┬ @angular-devkit/[email protected]
│ └── [email protected] 
└─┬ @jscutlery/[email protected]
  └─┬ @jscutlery/[email protected]
    └─┬ @angular-devkit/[email protected]
      └── [email protected] 

[edbzn]

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]

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