Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs

[parky128]

Hello,

I am attempting to get started using your @jscutlery/cypress-angular package with an angular component library project I am working with (using ng9 by the way)

Anyway, following the setup guide, the necessary cypress directory and config files have been added to the particular project I want to test with.

When I attempt to open the component test runner against the project, I get the following error:

robert.parker@AL-CAR-09637 nepal-ng-common-components % npx cypress open-ct --project projects/ng-generic-components
Error: The plugins file is missing or invalid.

Your `pluginsFile` is set to `/Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic-components/cypress/plugins/index.ts`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.
    at Object.get (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:988:15)
    at EventEmitter.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:154:21)
    at EventEmitter.emit (events.js:315:20)
    at ChildProcess.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (events.js:315:20)
    at emit (internal/child_process.js:903:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
 {
  isCypressErr: true,
  type: 'PLUGINS_FILE_ERROR',
  details: "Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs'\n" +
    'Require stack:\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular-dev-server/src/lib/create-angular-webpack-config.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular-dev-server/src/lib/start-angular-dev-server.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular-dev-server/src/index.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/node_modules/@jscutlery/cypress-angular/src/index.js\n' +
    '- /Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic-components/cypress/plugins/index.ts\n' +
    '- /Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js\n' +
    '- /Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js\n' +
    '    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:887:15)\n' +
    '    at Function.Module._resolveFilename (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tsconfig-paths/lib/register.js:75:40)\n' +
    '    at Module._load (internal/modules/cjs/loader.js:732:27)\n' +
    '    at Function.f._load (electron/js2c/asar_bundle.js:5:12789)\n' +
    '    at Module.require (internal/modules/cjs/loader.js:959:19)\n' +
    '    at require (internal/modules/cjs/helpers.js:88:18)\n' +
    '    at Object.<anonymous> (/Users/robert.parker/Documents/Github/nepal-ng-common-components/packages/cypress-angular-dev-server/src/lib/create-angular-webpack-config.ts:4:1)\n' +
    '    at Module._compile (internal/modules/cjs/loader.js:1078:30)\n' +
    '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)\n' +
    '    at Module.load (internal/modules/cjs/loader.js:935:32)\n' +
    '    at Module._load (internal/modules/cjs/loader.js:776:14)\n' +
    '    at Function.f._load (electron/js2c/asar_bundle.js:5:12789)\n' +
    '    at Module.require (internal/modules/cjs/loader.js:959:19)\n' +
    '    at require (internal/modules/cjs/helpers.js:88:18)\n' +
    '    at Object.<anonymous> (/Users/robert.parker/Documents/Github/nepal-ng-common-components/packages/cypress-angular-dev-server/src/lib/start-angular-dev-server.ts:4:1)\n' +
    '    at Module._compile (internal/modules/cjs/loader.js:1078:30)\n' +
    '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)\n' +
    '    at Module.load (internal/modules/cjs/loader.js:935:32)\n' +
    '    at Module._load (internal/modules/cjs/loader.js:776:14)\n' +
    '    at Function.f._load (electron/js2c/asar_bundle.js:5:12789)\n' +
    '    at Module.require (internal/modules/cjs/loader.js:959:19)\n' +
    '    at require (internal/modules/cjs/helpers.js:88:18)'
}
Error: The plugins file is missing or invalid.

Your `pluginsFile` is set to `/Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic-components/cypress/plugins/index.ts`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.
    at Object.get (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:988:15)
    at EventEmitter.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:154:21)
    at EventEmitter.emit (events.js:315:20)
    at ChildProcess.<anonymous> (/Users/robert.parker/Library/Caches/Cypress/7.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (events.js:315:20)
    at emit (internal/child_process.js:903:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

robert.parker@AL-CAR-09637 nepal-ng-common-components %

I can see this path indeed does not exist in my node_modules, so no webpack subdirectory at @angular-devkit/build-angular/src:

Is this to do with the Angular version we are using perhaps? (v9)

I am guessing it is, as the latest branch of angular_devkit/build_angular does contain the webpack src - https://github.com/angular/angular-cli/tree/11.2.x/packages/angular_devkit/build_angular/src

Can I get this to work with Angular 9?

[edbzn]

Hi,

Is this to do with the Angular version we are using perhaps? (v9)

Exactly, the Cypress dev server is configured using the internals of Angular CLI version 12.

Can I get this to work with Angular 9?

Perhaps you can try @jscutlery/cypress-angular-dev-server@0.1.0, this version does not rely on Angular 12 internals. Let me know if it works.

[parky128]

Hi @edbzn

Ok, thats got me a little further now, but i encounter a new error as follows:

[yjaaidi]

Hi @parky128, which version of html-webpack-plugin are you using?