Importing anything from @angular/cdk breaks E2E test build (Angular 13)

[pongells]

Current behavior

When I try to import anything from @angular/cdk (Angular 13), Cypress fails to build the test. This used to work in Angular 12, so I am not exactly sure where is the problem.

The error I am getting:

Error: Webpack Compilation Error
./node_modules/@angular/cdk/fesm2015/platform.mjs
Module not found: Error: Can't resolve '@angular/common' in 'C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015'
resolve '@angular/common' in 'C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015'
  Parsed request is a module
  using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\package.json (relative path: ./fesm2015)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015\node_modules doesn't exist or is not a directory
      C:\dev\workspace\exp\cypress-test\node_modules\@angular\node_modules doesn't exist or is not a directory
      C:\dev\workspace\exp\cypress-test\node_modules\node_modules doesn't exist or is not a directory
      C:\dev\workspace\exp\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules
        using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\dev\workspace\exp\cypress-test\node_modules
        using description file: C:\dev\workspace\exp\cypress-test\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\dev\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\dev\workspace\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\package.json (relative path: ./node_modules/@angular/common)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.json doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.json doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.mjs doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.json doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.coffee doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.mjs doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.json doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.jsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.coffee doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.jsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.mjs doesn't exist
        .coffee
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.tsx doesn't exist
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.mjs doesn't exist
        .coffee
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.coffee doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.tsx doesn't exist
            as directory
              existing directory
                using path: C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index
                  using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.coffee doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
            as directory
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common doesn't exist
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.tsx doesn't exist
        as directory
          C:\dev\node_modules\@angular\common doesn't exist
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.tsx doesn't exist
        as directory
          C:\dev\workspace\node_modules\@angular\common doesn't exist
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.json doesn't exist
                    .jsx
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.jsx doesn't exist
                    .mjs
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.mjs doesn't exist
                    .coffee
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.coffee doesn't exist
                    .ts
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.ts doesn't exist
                    .tsx
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.tsx doesn't exist
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015\node_modules]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\node_modules]
[C:\dev\workspace\exp\cypress-test\node_modules\node_modules]
[C:\dev\workspace\exp\node_modules]
[C:\node_modules]
[C:\dev\node_modules\package.json]
[C:\dev\workspace\node_modules\package.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.js]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common]
[C:\dev\node_modules\@angular\common\package.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.js]
[C:\dev\workspace\node_modules\@angular\common\package.json]
[C:\dev\node_modules\@angular\common]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.jsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.json]
[C:\dev\workspace\node_modules\@angular\common]
[C:\dev\node_modules\@angular\common.js]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.mjs]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.jsx]
[C:\dev\workspace\node_modules\@angular\common.js]
[C:\dev\node_modules\@angular\common.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.coffee]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.mjs]
[C:\dev\workspace\node_modules\@angular\common.json]
[C:\dev\node_modules\@angular\common.jsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.ts]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.coffee]
[C:\dev\workspace\node_modules\@angular\common.jsx]
[C:\dev\node_modules\@angular\common.mjs]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.tsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.ts]
[C:\dev\workspace\node_modules\@angular\common.mjs]
[C:\dev\node_modules\@angular\common.coffee]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.tsx]
[C:\dev\workspace\node_modules\@angular\common.coffee]
[C:\dev\node_modules\@angular\common.ts]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index]
[C:\dev\workspace\node_modules\@angular\common.ts]
[C:\dev\node_modules\@angular\common.tsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.js]
[C:\dev\workspace\node_modules\@angular\common.tsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.jsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.mjs]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.coffee]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.ts]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.tsx]
 @ ./node_modules/@angular/cdk/fesm2015/platform.mjs 3:0-52 38:14-31
 @ ./cypress/integration/spec.ts

Desired behavior

I should be able to import from @angular/cdk

Test code to reproduce

import {
  getSupportedInputTypes,
} from '@angular/cdk/platform';

describe('My First Test', () => {
  // just a test 
  const types = getSupportedInputTypes();

  it('Visits the initial project page', () => {
    cy.visit('/')
    cy.contains('Welcome')
  })
})

Cypress Version

9.1.0

Other

No response

[pmpak]

In our case we managed to make the test files compile using the @cypress/webpack-batteries-included-preprocessor and following their example to support typescript as speculated here: https://github.com/cypress-io/cypress/tree/develop/npm/webpack-batteries-included-preprocessor#usage

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')

module.exports = (on) => {
  on('file:preprocessor', webpackPreprocessor({
    typescript: require.resolve('typescript')
  }))
}

Not sure why this package can transpile the packages from @angular/cdk while the default config from cypress cannot, since this is supposed to be the actual default cypress is using to transpile test files if you don't use a custom 'file:preprocessor' at all

[pongells]

Thanks @panagiotis199, it seems to be working and even though it might not be the "proper" solution it's definitely better than nothing! :D

[kmaraz]

We have the same error with version of Cypress 8.7.0 and latest Angular 13.

[johncrim]

I'm seeing the same issue after upgrading to ng 13, except I'm seeing failures loading @angular/core and @angular/common. To be clear, I did not require a custom webpack config before upgrading to ng 13, but as of ng 13 an override is required.

I'd already worked through a number of related errors (eg jest also broke after the change to the angular library package format to .mjs files). Here's the fix that worked for me:

1. Add NPM modules

yarn add -D ts-loader

2. Update the plugins file to use the overridden webpack config:

// plugins/index.ts
/// <reference types="cypress" />
import webpackPreprocessor from '@cypress/webpack-preprocessor';
import webpackConfig from '../cypress.webpack.config';

...

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = async (on: Cypress.PluginEvents, config: Cypress.ResolvedConfigOptions) => {
  // ... other prior config

  on('file:preprocessor', webpackPreprocessor({
    webpackOptions: webpackConfig
  }));

  return config;
};

3. Add this replacement webpack config to handle .mjs and .ts files

// cypress.webpack.config.ts

import path from 'path';

const tsConfigFile = path.resolve(__dirname, './tsconfig.json');

export default {
  resolve: {
    extensions: ['.ts', '.js', '.mjs']
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [ /node_modules/ ],
        use: {
          loader: 'ts-loader',
          options: {
            configFile: tsConfigFile
          }
        }
      },
      { // Angular linker needed to link partial-ivy code
        // See https://angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
        test: /[/\\]@angular[/\\].+\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@angular/compiler-cli/linker/babel'],
            compact: false,
            cacheDirectory: true
          }
        }
      }
    ]
  }
};

Hopefully the default @cypress/webpack-preprocessor will be updated soon to handle this scenario, and I can remove this workaround.

[itayod]

I can confirm it happens to me as well, any news here?

[mjhenkes]

I can recreate this issue and confirm it's a bug, although it seems to be a tricky one.

Angular removed the 'main' entries in their package.json files. Generally this is fine because with webpacks mainFiles default, webpack would fall back to the modules mainFile entry which is defined in the package.json. But for some reason yet to be determined this fails in webpack 4 and webpack only attempts to find the main entry.

The reason this is corrected by adding the batteries included pre-processor is because cypress currently bundles webpack 4 instead of 5. So when adding the preprocessor and fulfilling the peer dependancies, folks seem to be using webpack 5. With webpack 5 this compilation issue does not occur.

So if you are attempting the work around use webpack 5.

[distante]

So if you are attempting the workaround use webpack 5. Where should we use webpack 5?

I am not sure what do you mean with this @mjhenkes ,

[myflowpl]

@johncrim thanks, your workaround helped me a lot 💪

but after putting your code i got this error:

Webpack Compilation Error
Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\projects\[...]\node_modules\@angular\core\fesm2020'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
...

then I had to add resolve->fullySpecified: false to config lines into your webpack config:

      { // Angular linker needed to link partial-ivy code
        // See https://angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
        test: /[/\\]@angular[/\\].+\.m?js$/,
        resolve: {
          fullySpecified: false,
        },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@angular/compiler-cli/linker/babel'],
            compact: false,
            cacheDirectory: true
          }
        }
      }

Now it's working 🤩

I'm using Nx monorepo and .js files as webpack config & plugins file, so here are my files:

apps\web-e2e\src\plugins\index.js

const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const webpackConfig = require('../../cypress.webpack.config');

module.exports = async (on, config) => {
  on('file:preprocessor', webpackPreprocessor({
    webpackOptions: webpackConfig
  }));
  return config;
}

apps\web-e2e\cypress.webpack.config.js

const path = require('path');

const tsConfigFile = path.resolve(__dirname, './tsconfig.e2e.json');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js', '.mjs']
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [ /node_modules/ ],
        use: {
          loader: 'ts-loader',
          options: {
            configFile: tsConfigFile
          }
        }
      },
      { // Angular linker needed to link partial-ivy code
        // See https://angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
        test: /[/\\]@angular[/\\].+\.m?js$/,
        resolve: {
          fullySpecified: false,
        },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@angular/compiler-cli/linker/babel'],
            compact: false,
            cacheDirectory: true
          }
        }
      }
    ]
  }
};

[dalenguyen]

Confirm that @johncrim suggestion works. One thing that you may need to notice is that the version of Webpack should >= 5 in order to support fullySpecified.

[distante]

Sadly no solutions there work, adding a custom webpack config breaks all my tsconfig.base.ts custom paths and I can not use any interface I have defined on the source code.

If I import them directly with ..\..\path\to\source\code it can also not be resolved.

This is really frustating... All my tests are broken and I can not do anything...

[dalenguyen]

@distante yup, it's one thing that causes the issue. I have to use a relative path instead of the normal path indicated in tsconfig.base.ts. Not sure why it doesn't work on your end. What is the error after you import them directly?

[zoechi]

@distante I run into that issue as well. I assumed the import paths are relative to the e2e project root, but they are relative to the importing file. So for the test file my-project-e2e/src/integration/app.spec.ts I had to use ../../../../libs/my-lib/src/index. Not sure this helps in your case as well.

[aleesaan]

I've been following this thread for a while but none of the workarounds mentioned here worked for me. I'm wondering whether someone in the cypress team is investigating this, to release a proper fix?
It's been a while since Angular 13 was released, but I can't upgrade the NX project I work on until this is fixed 😢

[noggin182]

@aleesaan We are also using NX and the workarounds mentioned here didn't work for us either. However, something that did work was patching the rule that @myflowpl provided into the existing webpack config, rather than writing our own.

(Also check your cypress.json to see where you are meant to be putting the plugin and if you should be using .js or .ts)

Here is our plugin file

module.exports = (on, config) => {
    const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
    const webpackOptions = webpackPreprocessor.defaultOptions.webpackOptions;

    webpackOptions.module.rules.unshift({
        test: /[/\\]@angular[/\\].+\.m?js$/,
        resolve: {
            fullySpecified: false,
        },
        use: {
            loader: 'babel-loader',
            options: {
                plugins: ['@angular/compiler-cli/linker/babel'],
                compact: false,
                cacheDirectory: true
            }
        }
    });

    on('file:preprocessor', webpackPreprocessor({
        webpackOptions: webpackOptions,
        typescript: require.resolve('typescript')
    }));

    return config;
};

[aleesaan]

@noggin182 Thanks for the suggestion, but that didn't work for us either, I'm getting the following error:

Error: Webpack Compilation Error
Module build failed (from ../../node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@angular/compiler-cli/linker/babel' from ...

[myflowpl]

@noggin182 thanks a lot, it is much simpler and it's working for me 💪 and thanks for suggesting now to change plugins/index.js to .ts files, didn't now that it's in cypress.json

@distante It's working now, with the @noggin182 workaround where you extend, not overwrite webpack config, the ts paths aliases are back working, so for me this workaround is fully what we need 🥳

[distante]

@noggin182 ! You are the best! It works like a dream,

(Pd: Sorry for my late answer to all the people who tagged me :) )

[basvandorst]

@aleesaan which version Cypress do you use? Here the fix was also not working on Cypress 8.6.0, but after an upgrade to ^9.4 it works fine. Thanks @noggin182!

[aleesaan]

@basvandorst I just tried with ^9.4 but still same issue :( aka Error: Cannot find module '@angular/compiler-cli/linker/babel'
Any other ideas?

[dalenguyen]

@aleesaan Does it work if you import '@angular/compiler' to supports/index.ts?

[aleesaan]

@dalenguyen thanks for the suggestion, but unfortunately I still get the same error I mentioned earlier 😢

[johncrim]

@aleesaan - is @angular/compiler-cli in your dev dependencies? It should be 13+.

Also, for my workaround above, cypress is 9.3+.

The fullySpecified=false is also required if you use webpack 5 and ES Modules, and any of your code or dependencies don't use full paths in their imports. Webpack 5 changed the default behavior to make it ESM standards compliant, but it causes a lot of problems b/c many imports aren't fully specified (which worked fine in webpack 4 and commonjs).

The other option is using [--experimental-specifier-resolution=[mode]](https://nodejs.org/api/esm.html#customizing-esm-specifier-resolution-algorithm) when running node - if you use that, the fullySpecified=false isn't required.

[aleesaan]

@johncrim - yes, I have "@angular/compiler-cli": "^13.2.1" in my dev dependencies.

I also have the fullySpecified=false, I get this error trying the same setup @noggin182 suggested. Namely, I installed @cypress/webpack-batteries-included-preprocessor as a dev dependency, and then added this to my plugins/index.js file:

  const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
  const webpackOptions = webpackPreprocessor.defaultOptions.webpackOptions;

  webpackOptions.module.rules.unshift({
    test: /[/\\]@angular[/\\].+\.m?js$/,
    resolve: {
      fullySpecified: false,
    },
    use: {
      loader: 'babel-loader',
      options: {
        plugins: ['@angular/compiler-cli/linker/babel'],
        compact: false,
        cacheDirectory: true,
      },
    },
  });

  on(
    'file:preprocessor',
    webpackPreprocessor({
      webpackOptions: webpackOptions,
      typescript: require.resolve('typescript'),
    }),
  );

But I still get the error 😢 Am I missing something else?

[ChristianKlima]

Hi,

we are already using the workaround, but it seems that test execution time is longer. Will there be an offical fix soon? Thank you in advance

[FrancoisCamus]

In case anyone also using ngrx, in my case I had to modify the regex a bit to /[/\\](@angular|@ngrx)[/\\].+\.m?js$/

[dennisluitwieler]

@ChristianKlima you mention test-execution time is longer. Are you referring to merely cypress tests and/or unit tests? We're also using the workaround and we've also noticed a significant performance hit in unit tests execution time, but we're not sure what is causing that yet.

[ChristianKlima]

Hello Dennis, I'm referring to cypress tests. After some investigation I found out that this is the reason for the slower execution time of cypress tests: link.

[gerardcastell]

I'm facing the same error than @aleesaan . Cypress 9.4.1, Nx and Angular 13+. Any suggestion?

[PuffPastry]

Have been struggling with this as well. All efforts to no avail. None of the workarounds in this thread worked, though the error was reduced down to a dependence on the 'v8' module, which stems from @angular-devkit/architect/node which is called by the @cypress/webpack-preprocessor

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'v8' in 'C:\{path}\node_modules\@angular-devkit\architect\node'
    at Watching.handle [as handler] (C:\{path}\node_modules\@cypress\webpack-preprocessor\dist\index.js:180:23)
    at C:\{path}\node_modules\webpack\lib\Watching.js:259:9
    at Hook.eval [as callAsync] (eval at create (C:\{path}\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\{path}\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (C:\{path}\node_modules\webpack\lib\Watching.js:256:28)
    at C:\{path}\node_modules\webpack\lib\Watching.js:179:21
    at Compiler.emitRecords (C:\{path}\node_modules\webpack\lib\Compiler.js:862:39)
    at C:\{path}\node_modules\webpack\lib\Watching.js:157:22
    at C:\{path}\node_modules\webpack\lib\Compiler.js:844:14
    at Hook.eval [as callAsync] (eval at create (C:\{path}\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\{path}\node_modules\tapable\lib\Hook.js:18:14)
    at C:\{path}\node_modules\webpack\lib\Compiler.js:841:27
    at C:\{path}\node_modules\neo-async\async.js:2818:7
    at done (C:\{path}\node_modules\neo-async\async.js:3522:9)
    at alreadyWritten (C:\{path}\node_modules\webpack\lib\Compiler.js:673:8)
    at C:\{path}\node_modules\webpack\lib\Compiler.js:761:19
    at C:\{path}\node_modules\graceful-fs\graceful-fs.js:123:16
    at C:\{user}\AppData\Local\Cypress\Cache\9.5.1\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

Any help is much appreciated.

[adhed]

Hey, thanks for the suggestions to avoid this issue, but has anyone still struggling with that? @aleesaan and @PuffPastry have you solved your problem?