Hi! I have been trying to customize webpack configuration to transpile a dependency that uses private fields, but no matter what I pass to

'@cypress/webpack-preprocessor';

Cypress fails with a compilation error. Currently I have:

ts
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
import * as wp from '@cypress/webpack-preprocessor';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const webpackOptions = {
        resolve: {
          extensions: ['.ts', '.js'],
        },
        module: {
          rules: [
            {
              test: /\.ts/,
              include: /node_modules/,
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/typescript'],
                  ['@babel/preset-env', { targets: 'defaults' }],
                ],
                // presets: ['@babel/typescript', '@babel/preset-env']
              },
            },
          ],
        },
      };

      on('file:preprocessor', wp({ webpackOptions }));

      return config;
    },
    ...nxE2EPreset(__dirname),
  },
});

It throws this error:

Error: Webpack Compilation Error
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import './commands';
| import { configure } from '@testing-library/cypress';

Even just using

webpackOptions: undefined

it breaks the entire configuration. All the docs says that it provides the default configuration, but it seems that something else provides more options. Any idea how to setup this? Thanks!

Did you happen to figure this out? I'm getting an error about recognizing private fields too (although different than yours a bit)

Module parse failed: Unexpected character '#' (12:4)