Webpack Compilation Error when importing '@chromatic-com/cypress/support'

[gregoripolak]

Describe the bug I am encountering a Webpack compilation error when trying to integrate @chromatic-com/cypress for snapshot testing in my Cypress e2e project. After following the installation and setup guidelines provided by Chromatic, including updating cypress.config.ts with installPlugin and adding the import statement in e2e.ts, I faced an issue during test execution.

To Reproduce Steps to reproduce the behavior:

1. Installed the latest versions of chromatic and @chromatic-com/cypress.
2. Updated cypress.config.ts with installPlugin as per the official guide.
3. Added import "@chromatic-com/cypress/support"; to e2e.ts.
4. Ran tests using the command: ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 pnpm cypress run
5. Encountered the following Webpack compilation error:

   Error: Webpack Compilation Error
   ./cypress/support/e2e.ts
   Module not found: Error: Can't resolve '@chromatic-com/cypress/support' in '/path/to/project/cypress/support'
   resolve '@chromatic-com/cypress/support' in '/path/to/project/companion-e2e/cypress/support'
   Parsed request is a module

Expected behavior I expected Chromatic for Cypress to integrate seamlessly without requiring explicit configuration for Webpack, as most setup steps were straightforward according to the documentation.

[skitterm]

Hi @gregoripolak, sorry to hear about this blocker. A couple questions:

1. Are you using a monorepo? I see companion-e2e/ there, just wanted to understand better your project structure (and if your Cypress files -- including cypress.config.js -- are at the project root or in a subpackage).
2. Do you experience the issue if you use yarn or npm instead? We haven't done a lot of testing with pnpm yet, so ruling that out/in would be helpful for us.

Thanks!

[gregoripolak]

Hi @skitterm we are indeed using mono-repo, We have a cypress.config.js at the subpackage level, importing installPlugin and calling it went fine. Regarding yarn\npm, I don't think this is related, the problem is when importing support file → import { snapshot } from 'rrweb-snapshot'; requires webpack configuration.

[skitterm]

Thanks @gregoripolak, we'll take a look at this!

[lucaslim]

Having the same issue when import @chromatic-com/cypress/support.

I tried pointing to @chromatic-com/cypress/dist/support.mjs' instead and it throws another error

Error: Webpack Compilation Error
./node_modules/rrweb-snapshot/dist/rrweb-snapshot.js 93:15
Module parse failed: Unexpected token (93:15)
File was processed with these loaders:
 * ../../Library/Caches/Cypress/11.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/lib/cross-origin-callback-loader.js
 * ../../Library/Caches/Cypress/11.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/lib/cross-origin-callback-loader.js
You may need an additional loader to handle the result of these loaders.
|     if (!n) return -1;
|     const id = (_a = this.getMeta(n)) == null ? void 0 : _a.id;
>     return id ?? -1;
|   }
|   getNode(id) {
 @ ./node_modules/@chromatic-com/cypress/dist/support.js 3:20-45
 @ ./test/e2e/cypress/support/e2e.ts

Package.json

"@chromatic-com/cypress": "0.6.16",
"cypress": "11.2.0",
"storybook": "8.1.0", 

unable to get it to run with storybook 8.2.x i guess we have to wait for the fix #181

Not sure if it helps, i'm running a CRA application

[skitterm]

Hi @lucaslim, it looks like you're on v11 of Cypress. We only support Cypress 13.5.0 or newer, so you'll want to upgrade Cypress to have Chromatic work in your case.

@gregoripolak based on your error message above I am assuming you are on a version of Cypress older than 13.5.0 as well; let me know if I'm mistaken.

This error happens because we're counting on Webpack 5 features being available, but Cypress only started using Webpack 5 as of version 12.17.4.

Sorry this wasn't more straightforward; we'll specify the supported versions of Cypress in our docs so it's clear to users.