⚠️ yarn berry with cypress 10.x doesn't work and complains about webpack

[gusgard]

Current behavior

Cypress doesn't work with yarn berry and pnp (plug and play).

Desired behavior

Cypress with pnp works

Test code to reproduce

• Clone the repository https://github.com/cypress-io/cypress-component-testing-apps
• Open react-next12-ts
• create empty file yarn.lock by running touch yarn.lock
• delete package-lock.json
• Set yarn berry by running yarn set version berry
• Run yarn install
• Run yarn cypress run-ct
• Tests should work!

---

Use pnp instead of node_modules

• create file by running touch .yarnrc.yml and add in the file nodeLinker: pnp (before it was nodeLinker: node-modules)
• Run yarn install
• You shouldn't have anymore the node_modules folder
• Run yarn cypress run-ct
• You have the following error:

Your configFile is invalid: /Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/cypress.config.ts

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

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/cypress.config.ts

---

but the real problem seems to be a webpack thing

• update cypress.config.ts to cypress.config.js and change the code to:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
})

• Run yarn cypress run-ct

Full output:

⚠ Warning: run-ct is deprecated and will be removed in a future release.
Use `cypress run --component` instead.

[43312:0706/165224.522850:ERROR:node_bindings.cc(276)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
[43312:0706/165224.522879:ERROR:node_bindings.cc(276)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
[43312:0706/165224.522885:ERROR:node_bindings.cc(276)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
[43312:0706/165224.522889:ERROR:node_bindings.cc(276)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
objc[43316]: Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x7ffb5c75d948) and /Users/ggard/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libGLESv2.dylib (0x10a4c89c8). One of the two will be used. Which one is undefined.
warn  - You have to use React 18 to use `experimental.reactRoot`.
[@cypress/webpack-dev-server]: removing HotModuleReplacementPlugin from configuration.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/public' directory

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.0                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v16.15.1 (/usr/local/Cellar/node@16/16.15.1/bin/node)                          │
  │ Specs:          5 found (Button.cy.tsx, InputField.cy.tsx, LoginForm.cy.tsx, Welcome.cy.tsx, i │
  │                 ndex.cy.tsx)                                                                   │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  Button.cy.tsx                                                                   (1 of 5)
21 assets
63 modules

ERROR in ../../../Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=127.0.0.1&port=8080&pathname=%2Fws&logging=info&reconnect=10:3:0
Module not found: Cannot find module '/Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/.yarn/__virtual__/next-virtual-9a0a25e60d/0/cache/next-npm-12.1.5-ad12291300-a70e70f786.zip/node_modules/next/dist/compiled/webpack/webpack-lib.js'
Require stack:
- /Users/ggard/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/internal.js

https://nextjs.org/docs/messages/module-not-found

ERROR in ../../../Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/utils/reloadApp.js:1:0
Module not found: Cannot find module '/Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/.yarn/__virtual__/next-virtual-9a0a25e60d/0/cache/next-npm-12.1.5-ad12291300-a70e70f786.zip/node_modules/next/dist/compiled/webpack/webpack-lib.js'
Require stack:
- /Users/ggard/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/utils/internal.js

Import trace for requested module:
../../../Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=127.0.0.1&port=8080&pathname=%2Fws&logging=info&reconnect=10


https://nextjs.org/docs/messages/module-not-found

client (webpack 5.72.0) compiled with 2 errors in 2170 ms
<i> [webpack-dev-middleware] wait until bundle finished: /__cypress/src/index.html
21 assets
63 modules

ERROR in ../../../Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=127.0.0.1&port=8080&pathname=%2Fws&logging=info&reconnect=10:3:0
Module not found: Cannot find module '/Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/.yarn/__virtual__/next-virtual-9a0a25e60d/0/cache/next-npm-12.1.5-ad12291300-a70e70f786.zip/node_modules/next/dist/compiled/webpack/webpack-lib.js'
Require stack:
- /Users/ggard/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/internal.js

https://nextjs.org/docs/messages/module-not-found

ERROR in ../../../Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/utils/reloadApp.js:1:0
Module not found: Cannot find module '/Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/.yarn/__virtual__/next-virtual-9a0a25e60d/0/cache/next-npm-12.1.5-ad12291300-a70e70f786.zip/node_modules/next/dist/compiled/webpack/webpack-lib.js'
Require stack:
- /Users/ggard/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/utils/internal.js

Import trace for requested module:
../../../Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=127.0.0.1&port=8080&pathname=%2Fws&logging=info&reconnect=10


https://nextjs.org/docs/messages/module-not-found

client (webpack 5.72.0) compiled with 2 errors in 90 ms

Webpack complain

Module not found: Cannot find module '/Users/ggard/Downloads/cypress-component-testing-apps/react-next12-ts/.yarn/__virtual__/next-virtual-9a0a25e60d/0/cache/next-npm-12.1.5-ad12291300-a70e70f786.zip/node_modules/next/dist/compiled/webpack/webpack-lib.js'

Cypress Version

10.0.3

Other

I tested with 10.0.2 and 10.0.1

[BlueWinds]

Hm, yeah, it does seem like we're not handling something correctly here with yarn pnp. There's a variety of issues around yarn 2 + cypress, but I think this is the first one pointing out a problem with yarn 3.

Going to send this to the Component Testing team and see if any of them have thoughts on the matter.

[gusgard]

@BlueWinds any update on this? or where the bug might be so I can take a look?

[gusgard]

pnp works with yarn v3 if we unplug the webpack-dev-server

eg:

1. yarn add webpack-dev-server
2. yarn unplug webpack-dev-server
3. add dependenciesMeta in the package.json

"dependenciesMeta": {
		"webpack-dev-server@4.11.0": {
			"unplugged": true
		}
	}