config file cypress.config.ts invalid after update to 5.0.1

[kolorfilm]

I just updated to the latest version and get an error with my config when starting cypress together with the cypress-visual-regression plugin.

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 cypress.config.ts:

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'],
});

Stack trace locally:

Using the latest version of cypress 13.8.1 as well.

It worked before like a charm.

ℹ️ I found out that when I comment out the initialization of the plugin configureVisualRegression(on); within the setupNodeEvents() function in the cypress config it works. So it seems to have something do to with the changes you did in the latest 5.0.1 version.

Any ideas?

Thank you!

[area73]

Hi @kolorfilm, it looks to me that it is not recognizing the Ts file, maybe it is because of a special TS config.
Hard to tell but on this project you also have a working example used for the test, so maybe you can try to see if there is any config issue with your tsconfig.json file or package.json.

If that doesn't work, then if you can provide a workspace with the code maybe I can take a look at it

[lone-cloud]

I'm running into an identical issue on today's cypress v13.9.0. Version 5.0.1 is broken, but 5.0.0 seems to be working.

[kolorfilm]

Hi @kolorfilm, it looks to me that it is not recognizing the Ts file, maybe it is because of a special TS config. Hard to tell but on this project you also have a working example used for the test, so maybe you can try to see if there is any config issue with your tsconfig.json file or package.json.

If that doesn't work, then if you can provide a workspace with the code maybe I can take a look at it

Hi there 🙋‍♂️,

strangely nothing has changed a while for the tsconfig.ts. Running a monorepo and have more tsconfig files for different folders, but as I said, it worked before.

The tsconfig in the parent folder of the app:

app/ts.config.json

{
  "compilerOptions": {
    "incremental": true,
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "allowJs": true
  }
}

the in the subfolder where the config folder with the actual cypress plugin is running as well:

app/packages/web/ts.config.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
    "baseUrl": "src",
    "types": [
      "vite/client",
      "vite-plugin-svgr/client",
      "cypress",
      "cypress-visual-regression",
      "w3c-image-capture"
    ],
    "noEmit": true,
    "module": "esnext",
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/",

  },
  "references": [{ "path": "../face-tracking" }],
  "include": ["src", "src/**/*.json", "cypress", "./src/setupTests.ts"],
}

and finally within the cypress folder itself where the teste are located:

app/packages/web/cypress/

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "sourceMap": false,
  }
}

I also tried to use cypress.config.js instead of the typescript version, but the same error is shown when try to open cypress:

[BasicWolf]

I have exactly the same error. Downgrading to version 5.0.0 of the plugin fixes the issue, but this weird error appears with 5.0.1.

[susnux]

I think one problem is the mismatching definitions in the package.json of this project:

"main": "./dist/plugin.js",
"types": "./dist/command.d.ts",

Types are for the command but the entry point is set to plugin

[susnux]

Oh no the problem is that this projects defines type: 'module' but the provided scripts are common js not esm so they need .cjs extension.

[arberosmani]

Similiar issue here after updating cypress-visual-regression from version 5.0.0 to 5.0.1 with cypress version 13.9.0.

cypress.config.ts

import {defineConfig} from "cypress";
import {headlessBrowserWindowSizePlugin} from "./cypress/plugins/headlessBrowserWindowSize";
import {renameNycOutputReport} from "./cypress/plugins/renameNycOutputReport";
import {configureVisualRegression} from 'cypress-visual-regression/dist/plugin'

export default defineConfig({
  video: true,
  e2e: {
    setupNodeEvents(on, config) {
      headlessBrowserWindowSizePlugin(on, config, {width: 1920, height: 1080});
      renameNycOutputReport(on, config);
      require('@cypress/code-coverage/task')(on, config);
      configureVisualRegression(on);
      return config;
    },
[...]

[karlhorky]

Oh no the problem is that this projects defines type: 'module' but the provided scripts are common js not esm

@susnux Looks like you're on to something with that, I narrowed it down to this PR:

• 225 v4 spec directory not included in screenshot path #233 (comment)

so they need .cjs extension.

I'm not sure this is the solution - I'm guessing probably the solution will be to actually publish ESM in the JS files.

[karlhorky]

Workaround

Use pnpm patch or patch-package to edit your files to convert the CommonJS syntax to ESM syntax - a patch like this worked for us:

patches/cypress-visual-regression+5.0.1.patch

diff --git a/node_modules/cypress-visual-regression/dist/command.js b/node_modules/cypress-visual-regression/dist/command.js
index b0458a3..f54c3ed 100644
--- a/node_modules/cypress-visual-regression/dist/command.js
+++ b/node_modules/cypress-visual-regression/dist/command.js
@@ -22,8 +22,8 @@ var command_exports = {};
 __export(command_exports, {
   addCompareSnapshotCommand: () => addCompareSnapshotCommand
 });
-module.exports = __toCommonJS(command_exports);
-function addCompareSnapshotCommand(screenshotOptions) {
+// module.exports = __toCommonJS(command_exports);
+export function addCompareSnapshotCommand(screenshotOptions) {
   Cypress.Commands.add(
     "compareSnapshot",
     // @ts-expect-error todo: fix this
diff --git a/node_modules/cypress-visual-regression/dist/plugin.js b/node_modules/cypress-visual-regression/dist/plugin.js
index 22827b4..322be67 100644
--- a/node_modules/cypress-visual-regression/dist/plugin.js
+++ b/node_modules/cypress-visual-regression/dist/plugin.js
@@ -1,4 +1,8 @@
 "use strict";
+
+import { createRequire } from 'module';
+import import_chalk from 'chalk';
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -35,7 +39,8 @@ __export(plugin_exports, {
   generateImage: () => generateImage,
   updateSnapshot: () => updateSnapshot
 });
-module.exports = __toCommonJS(plugin_exports);
+// module.exports = __toCommonJS(plugin_exports);
+const require = createRequire(import.meta.url);
 var import_fs2 = require("fs");
 var path = __toESM(require("path"), 1);
 var import_pixelmatch = __toESM(require("pixelmatch"), 1);
@@ -47,7 +52,7 @@ var import_fs = require("fs");
 var import_pngjs = require("pngjs");
 
 // src/utils/logger.ts
-var import_chalk = __toESM(require("chalk"), 1);
+// var import_chalk = __toESM(require("chalk"), 1);
 var import_util = require("util");
 var logLevelKeys = {
   debug: 3,
@@ -257,7 +262,7 @@ async function generateImage(diffPNG, imagePath) {
     });
   });
 }
-var configureVisualRegression = (on) => {
+export var configureVisualRegression = (on) => {
   on("task", {
     compareSnapshots,
     updateSnapshot

[kolorfilm]

Hi there,

any update when it will be fixed?

thank you! 🙏🏻

[lgenzelis]

Same thing here. v.5.0.0 works fine for me, but updating to v5.0.1 throws an error (both locally and in my project github actions CI):

Your configFile is invalid: /home/runner/work/my-project/my-project/cypress.config.ts

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

file:///home/runner/work/my-project/my-project/cypress.config.ts:2
import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin';
         ^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: The requested module 'cypress-visual-regression/dist/plugin' does not provide an export named 'configureVisualRegression'

Maybe something changed in the way you are exporting the types on the package?

[cfecherolle]

I just started using this plugin today and I was wondering how to make it work, glad to know I'm not alone.
Is there any other way than downgrading to 5.0.0, as of today?

[susnux]

No you have to pin to 5.0.0

[Zaista]

I'm in the process of publishing a new release which aims to fix issues like these. Before the official release I've created and published an alpha release (as mentioned here). I'd like to ask here as well somebody to verify if problems are really solved with the alpha release before I go on and publish it.

[kolorfilm]

I'm in the process of publishing a new release which aims to fix issues like these. Before the official release I've created and published an alpha release (as mentioned here). I'd like to ask here as well somebody to verify if problems are really solved with the alpha release before I go on and publish it.

I tested it with this alpha version and it works for me, so it seems to be fixed. 🏁 🚀

[cfecherolle]

I'm in the process of publishing a new release which aims to fix issues like these. Before the official release I've created and published an alpha release (as mentioned here). I'd like to ask here as well somebody to verify if problems are really solved with the alpha release before I go on and publish it.

Thank you! I tested the alpha and got an issue with TypeScript:

[TypeScript] Property 'compareSnapshot' does not exist on type 'Chainable<JQuery<HTMLElement>>'.

On this line:

cy.get(mapboxCanvasSelector).compareSnapshot("draw-edges");

Which used to compile without complaints from TypeScript when using 5.0.0.
If I use ts-ignore to force the compiler to bypass the error, the snapshot comparison is executed as it should.

I did not change anything except for the library version, and then ran my tests.

It also seems that the "actual" folder configuration handling has changed, as I kept the same Cypress config file as before but my "actual" screenshots are now generated in a weird nested path:

• Before: app/cypress/snapshots/actual/draw-edges.png
• After: app/cypress/snapshots/actual/cypress/e2e/draw-edges.cy.ts/draw-edges.png

[area73]

Hi @cfecherolle , about the new output directory , it is intended because previously to that we had some issues when using the same name of a cy in different folders , please reffer to this PR to see the reason for.
About the first issue I will have to take a look at it , it could be something related with Cypress version , but any way you can always ignore as a workaround

[Zaista]

The issue should be fixed with v5.0.2, regarding the problem from @cfecherolle, I'll create a task for that and we can deal with it separately