Webpack config issue with Cypress component testing

[aleksandrlat]

The problem

After I install @percy/cypress and import it in cypress/support/index.js I get this error when run test in Cypress

Module not found: Error: Can't resolve 'zlib' in '/root/git/swoop/node_modules/ws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }

I'm running Cypress component test.
If I add zlib polyfill it starts to fail with another error when another polyfill is needed and so on

Environment

• Node version: 16.14.2
• @percy/cli version: ^1.0.8
• Version of Percy SDK you’re using: what is this?
• @percy/cypress version: ^3.1.1
• Cypress version: ^9.5.3
• If needed, a build or snapshot ID: n/a
• OS version: ubuntu 18
• Type of shell command-line [interface]: bash

Details

Looks like https://www.npmjs.com/package/ws does not work in browser and when we run cypress component tests we run everything in browser

But percy docs say it should work with component testing https://docs.percy.io/docs/cypress#component-testing

[Robdel12]

Hey @aleksandrlat! For this you'll have to provide an example repo as a reproduction because this is an issue with whatever bundler that's being used to compile the components (TypeScript, Webpack, Vite, Rollup, etc). Looks like in the stack trace you're using Webpack, so the issue is going to lie within that webpack config. For some reason that webpack config is trying to recomplile an already complied browser bundle (or is trying to grab the node complied version), which won't work.

[na-ji]

Just wanted to mention that the support of Percy Cypress inside Cypress Component Testing is not out of the box on Create React App projects. By default, CRA's webpack config does not include polyfills for http and url modules, which @percy/cypress require. So you have to add in one way or another.

[aleksandrlat]

@Robdel12 yes we use webpack and typescript. It can be time consuming to make example repo.
Percy is paid software should I write to support instead?
Could you provide working example repo where percy works in cypress component tests with webpack bundler?

[Robdel12]

An example repo would be the easiest for us to help. Here's an example repo of it working: https://github.com/Robdel12/percy-cypress-component-testing

should I write to support instead?

You're getting it right now :) If you write into Percy support you'll pretty much be talking to me through a support person

[aleksandrlat]

@Robdel12 thank you for example repo!
I tried to make same dependencies versions as in my project in your example repo
And this is what I have

"devDependencies": {
  "@cypress/react": "^5.12.4",
  "@cypress/webpack-dev-server": "^1.8.4",
  "@percy/cli": "^1.0.8",
  "@percy/cypress": "^3.1.1",
  "cypress": "^9.5.4",
  "html-webpack-plugin": "^5.5.0",
  "webpack-dev-server": "^4.8.1"
}

Everything broke after I changed this "webpack-dev-server": "^4.8.1"

Here are logs

# yarn run cypress open-ct
yarn run v1.22.0
$ /root/git/percy-cypress-component-testing/node_modules/.bin/cypress open-ct
[23289:0418/212216.476415:ERROR:gpu_init.cc(453)] Passthrough is not supported, GL is swiftshader, ANGLE is 
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/root/git/percy-cypress-component-testing/public' directory
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
GET /__/ 200 126.469 ms - -
GET /__cypress/runner/cypress_runner.css 200 63.917 ms - -
assets by status 6.57 MiB [cached] 15 assets
Entrypoint main = webpack.js main.js
runtime modules 31.3 KiB 19 modules
modules by path ./node_modules/ 2.34 MiB
javascript modules 2.32 MiB 213 modules
json modules 13.7 KiB
  modules by path ./node_modules/browserify-sign/ 2.23 KiB 2 modules
modules by path ./components/*.js 15.7 KiB 4 modules
optional modules 60 bytes [optional] 4 modules
modules by path ./cypress/support/*.js 7.06 KiB
./cypress/support/index.js 3.46 KiB [built] [code generated]
./cypress/support/commands.js 3.6 KiB [built] [code generated]
modules by path ./pages/*.js 10.4 KiB
./pages/index.spec.ct.js 3.35 KiB [built] [code generated]
./pages/index.js 7.06 KiB [built] [code generated]
util (ignored) 15 bytes [built] [code generated]
util (ignored) 15 bytes [built] [code generated]

WARNING in ./node_modules/ws/lib/buffer-util.js 103:21-42
Module not found: Error: Can't resolve 'bufferutil' in '/root/git/percy-cypress-component-testing/node_modules/ws/lib'
@ ./node_modules/ws/lib/receiver.js 12:42-66
@ ./node_modules/ws/wrapper.mjs 2:0-41 7:0-79
@ ./node_modules/@percy/sdk-utils/dist/bundle.js 605:19-31
@ ./node_modules/@percy/cypress/index.js 1:14-41
@ ./cypress/support/index.js 17:0-24
@ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js 2:30-106
@ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

WARNING in ./node_modules/ws/lib/validation.js 109:22-47
Module not found: Error: Can't resolve 'utf-8-validate' in '/root/git/percy-cypress-component-testing/node_modules/ws/lib'
@ ./node_modules/ws/lib/receiver.js 13:43-66
@ ./node_modules/ws/wrapper.mjs 2:0-41 7:0-79
@ ./node_modules/@percy/sdk-utils/dist/bundle.js 605:19-31
@ ./node_modules/@percy/cypress/index.js 1:14-41
@ ./cypress/support/index.js 17:0-24
@ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js 2:30-106
@ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=localhost&port=8080&pathname=%2Fws&logging=info&reconnect=10:3:0
Module not found: Can't resolve 'webpack/hot/log.js'
null

ERROR in ./node_modules/webpack-dev-server/client/utils/reloadApp.js:1:0
Module not found: Can't resolve 'webpack/hot/emitter.js'
null

ERROR in ./node_modules/ws/lib/sender.js:5:0
Module not found: Can't resolve 'net'
null

ERROR in ./node_modules/ws/lib/sender.js:6:0
Module not found: Can't resolve 'tls'
null

ERROR in ./node_modules/ws/lib/websocket-server.js:8:0
Module not found: Can't resolve 'net'
null

ERROR in ./node_modules/ws/lib/websocket-server.js:9:0
Module not found: Can't resolve 'tls'
null

ERROR in ./node_modules/ws/lib/websocket.js:8:0
Module not found: Can't resolve 'net'
null

ERROR in ./node_modules/ws/lib/websocket.js:9:0
Module not found: Can't resolve 'tls'
null

client (webpack 5.37.0) compiled with 8 errors and 2 warnings in 3632 ms

[aleksandrlat]

@Robdel12 I polyfilled those dependencies. But discovered one more problem.
We use dotenv-webpack webpack plugin which replaces process.env.VAR with value from .env file.
Percy was failing because it uses process.env.VAR somewhere in sdk utils.
I had to disable plugin. But it would be great if percy would not fail in case the plugin is used.

[Robdel12]

👋🏼 I believe this should be fixed with the latest CLI (https://github.com/percy/cli/releases/tag/v1.3.1) and cypress SDK: (https://github.com/percy/percy-cypress/releases/tag/v3.1.2)