cypress-visual-regression icon indicating copy to clipboard operation
cypress-visual-regression copied to clipboard

Non-TS projects Readme Configuration does not work v5+

Open NickStees opened this issue 1 year ago • 3 comments

I followed the Readme for install and configuration but something about the readme is wrong for non-typescript projects. I then figured I would install V4.x and that seemed to work, so something is wrong with the setup now for v5.

https://github.com/cypress-visual-regression/cypress-visual-regression?tab=readme-ov-file#configuration

I get the following error

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

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/cypress-visual-regression/dist/plugin.js from /cypress.config.js not supported.
plugin.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename plugin.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /node_modules/cypress-visual-regression/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

NickStees avatar May 08 '24 13:05 NickStees

I recently started getting this same message too but my version was on v5.0.0. Upgrading to v5.0.1 didn't help.

vanessavun avatar May 08 '24 17:05 vanessavun

I downgraded Cypress to v13.8.1 (with v5.0.0) and Cypress is working again.

vanessavun avatar May 08 '24 20:05 vanessavun

It looks that we have some issues with ESM and commonsJS

area73 avatar May 08 '24 22:05 area73

@area73 Yeah, it's adding "type": "module" in the package.json:

https://github.com/cypress-visual-regression/cypress-visual-regression/commit/811d77cef2d5023b72ccec2604efdf8e116626d5#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R5

Maybe the easier approach would be to remove type but provide both main and module attributes for different module system entrypoints.

eugenet8k avatar May 20 '24 17:05 eugenet8k

Also getting this even tried updating type to commonjs but that just ran into problems with chalk.

Downgraded to 5.0.0 and working again

burkedavid avatar May 27 '24 13:05 burkedavid

seems like better solution is to downgrade to 5.0.0 right ?

torresrodrigoe avatar May 28 '24 13:05 torresrodrigoe

Downgrading to Cypress v.13.8.0 and cypress-visual-regression v.5.0.0 worked for me

iacopo-carlini-LEI avatar May 31 '24 15:05 iacopo-carlini-LEI

I did a bit of tinkering, removed the troubling "type": "module", added dedicated cjs and esm output files, and also added solutions to some specific cypress problems.

Now I've released an alpha version before and official release, and all the test I've done were successful, nonetheless I would appreciate it some of you tried it out to see if it really works for your setup.

So, please install the alpha version using the npm i [email protected] and try it out. To see appropriate configurations, you can refer to example test projects I've added, for example here

Zaista avatar Jun 04 '24 18:06 Zaista

I got a good test result for 5.0.2-alpha.

My config file contains const { configureVisualRegression } = require("cypress-visual-regression");

With [email protected], I see "Cypress configuration error" and "Your config file is invalid" in the Cypress test runner. After running npm i -D [email protected] I am able to open Cypress and run specs as normal.

mikeyavorsky avatar Jun 04 '24 21:06 mikeyavorsky

This issue should be fixed with v5.0.2

Zaista avatar Jun 09 '24 11:06 Zaista