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

Question

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:

Answer 1

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.

Answer 2

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