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

@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;
};

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

1. 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;
};

1. 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.

want to say for @aleesaan and others that are stuck by this. my team was also having trouble getting fully upgraded to Angular 13 because of this but we were able to get the workaround @noggin182 provided to work

what was missing was installing the peer dependencies of @cypress/webpack-preprocessor which are specified here in the second npm install command in the Installation section

so for completeness sake and for people that like to scroll to the bottom (me) the full workaround that worked in my case with Angular 13 and cypress 9.7.0 is:

install the @cypress/webpack-batteries-included-preprocessor and @cypress/webpack-preprocessor packages: npm install --save-dev @cypress/webpack-preprocessor @cypress/webpack-batteries-included-preprocessor

install the peer dependencies of @cypress/webpack-preprocessor: npm install --save-dev @babel/core @babel/preset-env babel-loader webpack

update the cypress plugin file to resemble this depending on your existing plugins (credit to @noggin182): cypress/plugins/index.ts (could alternatively be cypress/plugins/index.js)

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;
};

hope that helps people while the devs come up with a long term fix.

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

@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
          }
        }
      }
    ]
  }
};

For anyone using the nrwl cypress 10 upgrade generator , i.enx generate @nrwl/cypress:migrate-to-cypress-10 we found that the configuration above stopped working.

// cypress.config.ts
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';

// Our current webpack plugin configuration as per @aleesaan as a .js file
import setupNodeEvents from './src/plugins/index'; 

...

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__dirname),
    ...cypressJsonConfig,
    setupNodeEvents,  // <-- didn't work
  },
});

Adding it directly in cypress.config.ts fixed it for us.

// cypress.config.ts
export default defineConfig({
  e2e: {
    ...nxE2EPreset(__dirname),
    ...cypressJsonConfig,

    // The exact same content as the plugins file
    setupNodeEvents: (on, config) => {

      // @see https://github.com/cypress-io/cypress/issues/19066#issuecomment-1012055705
      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;
    }
  },
});

We had multiple issues with cypress and webpack 5. Mainly publicPath and the platform-browser errors. Solved using a combination of fixes found in various issues.

Used the below config in plugin.js and pointed all our e2e apps at this shared plugin config. I hope this can help someone else move forward with nx + angular 13 + cypress. Was a complete headache

const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const altWebpackConfig = require('@nrwl/cypress/plugins/preprocessor');
const publicPath = 'http://localhost:4400/';
let outputOptions = {};

module.exports = (on, config) => {
  const modifiedBaseConfig = altWebpackConfig.getWebpackConfig(config);

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

  Object.defineProperty(modifiedBaseConfig, 'output', {
    get: () => {
      return { ...outputOptions, publicPath };
    },
    set: function (x) {
      outputOptions = x;
    },
  });

  const options = {
    webpackOptions: modifiedBaseConfig,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', webpackPreprocessor(options));

  return config;
};

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

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

Hey @adhed yes, I still have it 😭 We’re completely stuck and can’t upgrade Angular because of this, I wonder who we can poke to look into it and fix it?

After upgrading all dependencies (including Cypress, Nx, and Angular) to latest I still get the following:

Error: Webpack Compilation Error
.../node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs
Module not found: Error: Can't resolve '@angular/common' in '.../node_modules/@angular/platform-browser/fesm2015'

After upgrading to Angular 16 (from 14) and Cypress 13.6.0 (from 12.17.1), the issue seems to be resolved. I was able to remove the custom webpack preprocessor and alias handling.

The workaround by johncrim worked perfectly for us. Additionally, since we used alias imports in the Cypress tests itself, we had to add them to the webpack config using the tsconfig-paths-webpack-plugin .

Hey, I just bumped into the same issue as well. Is there any plans to fix the issue? None of the workarounds work for me

Hi, we were also stuggling with this issue after upgrading to angular 13. The posted workarounds are working, but they require some dependencies that I don’t want to deal with when updating my packages. Are there any plans to fix this issue? Thanks

@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?

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

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

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

@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 🥳

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.