config file invalid (using .ts) after update to 3.2.0

[Michael Päßler]

I just updated to the latest version at get an error with my config:

configFile is invalid: /home/runner/work/app/packages/web/cypress.config.ts

It threw an error when required, check the stack trace below:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/runner/work/app/packages/web/cypress.config.ts
    at new NodeError (node:internal/errors:406:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
    at defaultLoad (node:internal/modules/esm/load:120:20)
    at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
    at new ModuleJob (node:internal/modules/esm/module_job:65:26)
    at ModuleLoader.#createModuleJob (node:internal/modules/esm/loader:290:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:248:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:229:17)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:315:23)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
npm ERR! Lifecycle script `cypress:test:integration` failed with error: 
npm ERR! Error: command failed 

my config:

import * as fs from 'fs';
import * as path from 'path';
import { defineConfig } from 'cypress';
import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin';

const windowSize = {
  width: 1440,
  height: 960,
};

// The way `changeVideoSource` works is that `static-hd-actual.y4m` is overwritten when changing the video dynamically.
// So we would overwrite `static-hd-valid.y4m` and then couldn't use it anymore. Initially `static-hd-actual.y4m` needs
// to be written once to launch the app with it.
const fileNameVideoActual = `static-hd-actual.y4m`;
const fileNameVideoValid = `static-hd-valid.y4m`;

function changeVideoSource(videoSource: string = fileNameVideoValid) {
  const webcamPath = path.join('cypress', 'fixtures', fileNameVideoActual);
  const sourceVideoPath = path.join('cypress', 'fixtures', videoSource);

  const video = fs.readFileSync(sourceVideoPath);

  fs.writeFileSync(webcamPath, video);
}

export default defineConfig({
  e2e: {
    baseUrl: process.env.CYPRESS_APP_BASE_URL || 'http://localhost:3000',
    supportFile: './cypress/support/index.ts',
    setupNodeEvents(on) {
      configureVisualRegression(on);
      changeVideoSource();

      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.name === 'chrome' || browser.name === 'chromium') {
          launchOptions.args.push('--use-fake-ui-for-media-stream');
          launchOptions.args.push('--use-fake-device-for-media-stream');
          launchOptions.args.push(
            `--use-file-for-fake-video-capture=` +
              path.join('cypress', 'fixtures', fileNameVideoActual)
          );
          launchOptions.args.push(`--window-size=${windowSize.width},${windowSize.height}`);
          return launchOptions;
        }
      });

      //see: https://stackoverflow.com/questions/59973591/using-fake-video-in-plugins-i-cant-using-two-video-in-a-test-flow-in-cypress
      on('task', {
        changeVideoSource(videoSource) {
          console.log('TASK - Changing video source to', videoSource);
          changeVideoSource(videoSource);
          return null;
        },
        resetVideoSource() {
          console.log('TASK - Resetting video source');
          changeVideoSource();
          return null;
        },
      });
    },
  },
  chromeWebSecurity: false,
  trashAssetsBeforeRuns: true,
  env: {
    failSilently: false,
    visualRegressionType: 'regression',
    visualRegressionBaseDirectory: 'cypress/snapshots/base/visual-regression',
    visualRegressionDiffDirectory: 'cypress/snapshots/diff/visual-regression',
  },
  screenshotsFolder: 'cypress/screenshots/actual',
  retries: {
    runMode: 2,
    openMode: 0,
  },
  defaultCommandTimeout: 10000,
  requestTimeout: 10000,
  numTestsKeptInMemory: 0,
  video: false,
  blockHosts: ['*example.com'],
});

using eslint 8.57.0

any ideas?

thank you!

[Mike McCready]

@kolorfilm

Your error description does not look like it is related to ESLint.

• Please take a look at cypress-io/cypress#27450

[Michael Päßler]

@MikeMcC399 thank you! I‘ll have a look. Strangely this error just popped up today when the version was upgraded. It worked without a charm before.

can‘t figured out yet if it also can have something to do with another plugin what was updated as well together with eslint-plugin-cypress.

[Mike McCready]

@kolorfilm

eslint-plugin-cypress does not require typescript

If you are using npm then try

npm ls typescript

to see where it could be coming from.

[Michael Päßler]

Thank you ! The reason is cypress-visual-regression. I'll open an issue there. Thanks a lot! And sorry for making noise here.

[Mike McCready]

@kolorfilm

It's good you were able to track down the reason. 👍🏻

Closing this issue now as it is not caused by eslint-plugin-cypress (and a duplicate of cypress-io/cypress#27450 in the Cypress issue list).