Setting up Cypress using webpack 5 and react-scripts

[wschenkel]

Current behavior

I am facing an issue with setting up Cypress with webpack 5. When I run the test end-to-end It works properly, but when I run the component test (cypress run-ct) I got an error. Follow the errro below:

What I could notice is I'm using the react-scripts library and it is using webpack 4 under the hood. I tried to use webpack-5-react-scripts but it didn't work as well.

Anyone has already faced this before?

My package.json
My webpack config
My Cypress plugin

Debug logs

No response

Cypress Version

9.0.0

Package Manager

yarn

Operating system

Mac

Other

Node version: 14.18.1
Thanks in advance!

[chrisbreiding]

I was able to reproduce with the following:

package.json

{
  "scripts": {
    "cy:open:ct": "cypress open-ct"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@cypress/react": "^5.10.3",
    "@cypress/webpack-dev-server": "^1.7.0",
    "babel-loader": "^8.2.3",
    "cypress": "^9.0.0",
    "react-scripts": "^4.0.3",
    "webpack": "^5.64.1"
  }
}

webpack.config.js

const path = require('path')

module.exports = {
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
    ]
  },
}

cypress/plugins/index.js

const injectDevServer = require('@cypress/react/plugins/react-scripts')

module.exports = (on, config) => {
  injectDevServer(on, config)
  return config
}

Then running npm run cy:open:ct.

If I change the webpack dependency to ^4, it runs fine.

[FelipeLahti]

Having the same issue but with react-scripts v5 which uses webpack 5 under. Any workarounds?

[FelipeLahti]

Looks like @cypress/webpack-dev-server doesn't support webpack v5 just yet. See https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/src/webpackDevServerFacts.ts

[ZachJW34]

@FelipeLahti the latest version of webpack-dev-server is 4.6.0 which supports Webpack v5 so we should be able to support v5. Looks like react-scripts@5 is stable, so if there are any issues when running Cypress it's most likely coming from @cypress/react since we haven't added any tweaks to support the new version. Could you post the errors you are seeing and possibly a repo reproducing your issue? I was able to get cypress working with create-react-app@5.0.0 but I would like to see what's happening on your end.

You can check out a (somewhat) working version of Cypress and react-scripts@5 here. You can clone the repo, check out the react-scripts-5 branch, cd ./react-scripts-5 and run npx cypress open-ct

[cypress-bot]

The code for this is done in cypress-io/cypress#19434, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[FelipeLahti]

Getting this @ZachJW34 which is better than what I have today:

This #19434 looks promising. Any ETA on the release?

[ZachJW34]

@FelipeLahti that PR was merged and released in @cypress/react@5.12.0. Have your tried it with the latest?

[FelipeLahti]

@ZachJW34 Looks like the release for @cypress/react@5.12.1 didn't include that change.
https://github.com/cypress-io/cypress/compare/@cypress/react-v5.11.0...@cypress/react-v5.12.0 didn't seem to include the change either. I also did check the node module installed and I could find the change...

[ZachJW34]

@FelipeLahti the compare shows the commit for cra-5 support "feat: support create-react-app v5 (#19434)", it's down at the bottom. The changes were indeed released as part of 5.12.0, you can check out this branch for a working example (the project called "my-app").

[FelipeLahti]

Ok. Getting this now on a fresh installation #19674

[antonio-rodrigues]

That is my use case also, it started today.

Old installation/yarn.lock works just fine.

In a fresh project, or deleting yarn.lock then yarn install, it fails with the error:
TypeError: Cannot read properties of undefined (reading 'uid') at Object.statSync (/foo/bar/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/polyfills.js:303:17)

[robcaldecott]

I can only make this work by reverting to react-scripts@4.0.3

[alecmerdler]

This is broken for me as well. Simply followed the official docs for React component testing.

[FelipeLahti]

I create this repo here with a reproducible example with the same dependencies I have in my project.
https://github.com/FelipeLahti/error-create-react-app-v5
It's using the latest dependencies for cypress.

"@cypress/react": "^5.12.1",
"@cypress/webpack-dev-server": "^1.8.0",
"cypress": "^9.3.1",
node version is v16.13

Steps to reproduce in the repo:

nvm install v16.13
npm i
npm run test:ct

This is the error I get

Let me know if I can help

[GideonShils]

Hey @FelipeLahti, I was hitting the same error as you, and was able to get around it by installing webpack 5 as a top level dependency in my project via:

npm install webpack --save-dev

Cypress's webpack-dev-server is still dependent on webpack 4, which is likely causing it to get installed as a top level dependency in your project. This can be confirmed by running npm install in your sample repo, and checking the webpack version in node_modules/webpack/package.json (it's 4.44). Since your project has webpack 4 installed, cypress's webpack-dev-server is running that version, but is trying to read the webpack 5 compatible webpack.config.js file that ships with CRA5. The specific errors you're seeing are all related to config.js options that exist in webpack 5 but not in 4.

By installing webpack5 at the top level, the dev server will use that version instead, which will hopefully hold you over until cypress ships with native support.

[FelipeLahti]

Hey @GideonShils
It worked! I had the dependency html-webpack-plugin missing in this repo too.

Updated https://github.com/FelipeLahti/error-create-react-app-v5 and it's working now. Thanks!

Would be good if update the docs. I'll see if I can open a PR next week

[rockhold]

Closing this issue, as it was addressed in #19434