Search code examples
javascripttypescriptwebpackcypress

How to get more detail than 'Webpack Compilation Error' with Cypress?

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:

enter image description here

Solution

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