Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:25
  • Comments:43 (2 by maintainers)

github_iconTop GitHub Comments

18reactions
noggin182commented, Jan 13, 2022

@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;
};
8reactions
johncrimcommented, Dec 28, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dale Nguyen on Twitter: "For the one who has issues while ...
For the one who has issues while running Nx 13, Angular 13 & Cypress 9.2.0. github.com. Importing anything from @angular/cdk breaks E2E test...
Read more >
Deprecated APIs and features - Angular
Angular strives to balance innovation and stability. Sometimes, APIs and features become obsolete and need to be removed or replaced so that Angular...
Read more >
Create a component harness for your tests with Angular CDK
Component harnesses can be shared between unit tests, integration tests, and end-to-end tests. They result in less brittle tests as ...
Read more >
Angular 15: New features and breaking changes - devmio
It was released together with corresponding versions of the Angular framework, the Angular CLI for development and build, and the Angular Material Component ......
Read more >
End-to-end testing with Cypress - Testing Angular
Change the angular.json configuration file in order to add ng run commands. Create a sub-directory named cypress with a scaffold for your tests...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

regression: Cypress 9.1.0 throws when code coverage is enabled, failing every test

Next page

Cypress 'expect' with 'regex' fails to validate on second occurrence.