Whenever there is an error inside one of my imported modules, all I get from Cypress is the message Error: Webpack Compilation Error. There doesn't seem to be a useful error stack anywhere so it is incredibly frustrating to have to hunt down the source of the error. I was wondering if there is a way of getting more details on the error?

I'm writing the tests in TypeScript and using cypress-webpack-preprocessor to compile the test code.

Here is the webpack.config.js that I'm passing to cypress-webpack-preprocessor:

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
};

Here is the screenshot of the lovely error message:

Whenever there is an error inside one of my imported modules, all I get from Cypress is the message Error: Webpack Compilation Error. There doesn't seem to be a useful error stack anywhere so it is incredibly frustrating to have to hunt down the source of the error. I was wondering if there is a way of getting more details on the error?

I'm writing the tests in TypeScript and using cypress-webpack-preprocessor to compile the test code.

Here is the webpack.config.js that I'm passing to cypress-webpack-preprocessor:

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
};

Here is the screenshot of the lovely error message:

• javascript
• typescript
• webpack
• cypress

• 1 Any solution to this? We're running into the same error. – tamarabyte Commented Sep 9, 2019 at 21:07
• @tamarabyte I'm afraid not... Maybe open an issue on the cypress repo? – Sajad Torkamani Commented Sep 10, 2019 at 9:30
• 1 Also getting this issue... – tjklemz Commented Sep 19, 2019 at 19:04

4 Answers 4

You can see your webpack logs by running cypress in debug mode documentation

Mac/Linux

DEBUG=cypress:* cypress run

Windows

set DEBUG=cypress:*
cypress run

It is quite a bit of output, as there's logging from everything cypress does - one of which is cypress:webpack, which can give you the full message.

I observed giving an incorrect path could give this error. Try to give a full path as shown below.

Incorrect path

import { Login } from 'Login.js';

Correct Path

import { Login } from '../page-object-model/Login.js';

const { should } = require("chai")

Remove the above line from your code. This line maybe on the top of your commands.js file.

The error arises when a Cypress function is invoked intentionally or unintentionally within the commands.js file.

For example, by calling the cypress( ) function, Cypress will import a specific line of code in the commands.js file, resulting Error: Webpack Compilation error when you execute a Cypress test.

const cypress = require("cypress");