Package subpath './dist/plugin' is not defined by "exports"...

[ajdintbk]

I tried to install this package and I got error Package subpath './dist/plugin' is not defined by "exports" in /node-modules/cypress-image-diff-js/package.json.

I'm using Angular 17 and Cypress 13 and installed package by running npm i -D cypress-image-diff-js

My cypress.config.ts looks like this:

require('dotenv').config();
import getCompareSnapshotsPlugin from 'cypress-image-diff-js/dist/plugin';
import { defineConfig } from 'cypress';
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return getCompareSnapshotsPlugin(on, config);
    },
    baseUrl: 'http://localhost:4200',
    experimentalOriginDependencies: true,
    chromeWebSecurity: false,
    env: {
      auth0Domain: process.env['AUTH0_DOMAIN'],
      organizationName: process.env['CYPRESS_ORGANIZATION_NAME'],
      username: process.env['CYPRESS_USERNAME'],
      password: process.env['CYPRESS_PASSWORD'],
    },
  },
  video: false,
  pageLoadTimeout: 35000,
  viewportWidth: 1920,
  viewportHeight: 1080,
});

I added this in commands.ts and in e2e.ts

const compareSnapshotCommand = require('cypress-image-diff-js/dist/command');
compareSnapshotCommand();

When running npx cypress open I get Package subpath './dist/plugin' is not defined by "exports" in /node-modules/cypress-image-diff-js/package.json.

And in tests I can not say cy.compareSnapshot(...)

What am I doing wrong here?

[krisodb]

Check https://cypress.visual-image-diff.dev/#rename-import-path In both cases the /dist/ need to be removed from the path.

[guilhermesousa-cwi]

In cypress.config.js I removed /dist and in the commands I had to keep /dist.

    "cypress": "12.2.0",
    "cypress-image-diff-html-report": "^2.0.2",
    "cypress-image-diff-js": "^2.1.3"

@ajdintbk

Here it worked like this:

cypress.config.js

const { defineConfig } = require("cypress");

const getCompareSnapshotsPlugin = require('cypress-image-diff-js/plugin');
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin (on, config)
    },
  },
});

commands.js

const compareSnapshotCommand = require("cypress-image-diff-js/dist/command");
compareSnapshotCommand()

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[teddythinh]

Here is my configuration based on the latest documentation^1:

cypress.config.js ^3

const { defineConfig } = require("cypress");
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/plugin'); // Remove dist path

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      return getCompareSnapshotsPlugin(on, config);
    },
  },
});

cypress/support/e2e.js ^4

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

const compareSnapshotCommand = require('cypress-image-diff-js'); // Remove dist path
compareSnapshotCommand();

I'm not configuring anything in the commands.js file.

My package versions:

"devDependencies": {
  "cypress": "^13.7.1",
  "cypress-image-diff-html-report": "^2.0.2",
  "cypress-image-diff-js": "^2.1.4"
},

[vijaycapsifi]

I get errors at both places where the import is needed

Error: Webpack Compilation Error

TS2307: Cannot find module 'cypress-image-diff-js/command' or its corresponding type declarations.

and

TS2307: Cannot find module 'cypress-image-diff-js/plugin' or its corresponding type declarations.

Here is my config:

cypress-image-diff-config.ts

import { defineConfig } from 'cypress';
import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return getCompareSnapshotsPlugin(on, config)
    }
  }
})

In this line of code import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';, cypress-image-diff-js/plugin is in red in VS Code as it can't seem to resolve.

cypress/support/e2e.ts

import './commands';
import compareSnapshotCommand from 'cypress-image-diff-js/command';
compareSnapshotCommand();

In this line of code import compareSnapshotCommand from 'cypress-image-diff-js/command';, cypress-image-diff-js/command is in red in VS Code as it can't seem to resolve.

Package versions

"cypress": "^13.8.0",
"cypress-image-diff-html-report": "^2.0.2",
"cypress-image-diff-js": "^2.1.3",

Please note I am using Cypress Cucumber to run my tests.

[jannakha-copy-01]

I'm getting "Webpack Compilation Error Module not found" when following all the instructions.

so, it's an issue with package.json of the plugin 'cypress-image-diff': The missing export is: "exports": { "./dist/config.default": { "default": "./dist/config.default.js" }, ...

after it it workds

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 30 days since being marked as stale.

[tannera]

This issue is still present in 2.2.1. Out of the box, the documented import path isn't valid.