Peer dependency issue - @cypress/webpack-preprocessor doesn't support webpack@^5

Current behavior

Installation of @cypress/react fails due to unresolved peer dependency.

Pre-existing install of webpack 5 & react 17

From a repository with the following packages:

  "dependencies": {
    "html-webpack-plugin": "^5.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }

when running the cypress guide command (minus webpack-dev-server):

npm install --save-dev cypress @cypress/react @cypress/webpack-dev-server

install fails with error: “Enable to resolve dependency tree” (see below screenshot) The culprit seems to be @cypress/webpack-preprocessor which can’t support a webpack version greater than 4.

Pre-existing install of react 17 only

From an empty repository, the install fails due to html-webpack-plugin ^5.3.1 needing webpack 5 rather than webpack 4

command

npm install --save-dev cypress @cypress/react @cypress/webpack-dev-server webpack-dev-server

Logs

Pre-existing install of react 17 & html-webpack-plugin 4

From the only the following repository, the install works:

  "dependencies": {
    "html-webpack-plugin": "^4.5.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
  }

command

npm install --save-dev cypress @cypress/react @cypress/webpack-dev-server webpack-dev-server

Logs

Environment

• node: v14.16.0
• npm: v7.11.2
• Mac OS Big Sur version 11.3

Expected behavior

Clean install with support for webpack 5

[Laurent147]

@lmiller1990 thanks for the very reactive fix. I tested the install on my side and all seems to work with the exact command suggested by your guide. Thanks!

[lmiller1990]

Fixed in #16412, @cypress/react": "^5.6.0". It’s been released. I re-ran the above command and it worked.