configFile is invalid

[bennymeier]

Describe the bug
I just configured your plugin as mentioned in the documentation. We're using TypeScript and we get an error while starting our Cypress tests.

Your configFile is invalid: C:\Users\BenjaminM\Desktop\scripts\cypress\cypress.config.ts

It threw an error when required, check the stack trace below:
file:///C:/Users/BenjaminM/Desktop/scripts/cypress/node_modules/@frsource/cypress-plugin-visual-regression-diff/dist/plugins.mjs:7
import { addMetadata, getMetadata } from 'meta-png';
         ^^^^^^^^^^^
SyntaxError: Named export 'addMetadata' not found. The requested module 'meta-png' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'meta-png';
const { addMetadata, getMetadata } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async loadFile (C:\Users\BenjaminM\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:106:14)
    at async EventEmitter. (C:\Users\BenjaminM\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:116:32)

I have just installed your package, set up the configuration in cypress.config.ts and then started the test run.

Please complete the following information:

• OS and version: Windows 11 (Version 22H2, Build: 22621.819)
• Browser and version: Chrome (Version 108.0.5359.125)
• Cypress version: 10.10.0

[Lyokolux]

I can reproduce it: I follow the getting started and this error shows up.

• OS and version: macOS Ventura (13.1 (22C65))
• Browser and version: Firefox (Version 108.0.1)
• Cypress version: 12.02.0

[Lyokolux]

Feel free to test and merge when you can.

In the meantime, this will fix the issue (for npm users):

1. In your src, add a postinstall.js file

import fs from 'fs'

const IMPORT_FIX = "import pkg from 'meta-png'; const { addMetadata, getMetadata } = pkg;"
const IMPORT_BUG = "import { addMetadata, getMetadata } from 'meta-png';"
const FILE_PATH = "../node_modules/@frsource/cypress-plugin-visual-regression-diff/dist/plugins.mjs"

const metaPngOriginal = fs.readFileSync(FILE_PATH).toString()
const metaPngFixed = metaPngOriginal.replace(IMPORT_BUG, IMPORT_FIX)
fs.writeFileSync(FILE_PATH, metaPngFixed)

2. In your package.json, add a script: "postinstall": "node ./src/postinstall"
3. run npm i that will run postinstall command

[stephenfinch]

Any path for yarn users?

[FRSgit]

This is fixed in version 3.2.12. Feel free to reopen if you think the issue is still present.

[github-actions]

🎉 This issue has been resolved in version 3.2.12 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀