question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting up Cypress using webpack 5 and react-scripts

See original GitHub issue

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:

Captura de Tela 2021-11-18 às 15 52 33 Captura de Tela 2021-11-18 às 15 52 53

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!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:5
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
antonio-rodriguescommented, Jan 13, 2022

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)

2reactions
FelipeLahticommented, Dec 18, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

webpack 5 custom react project throwing error Cypress ...
if i use create-react-app then setup works fine only i am facing issue with webpack configuration option . Kindly let me know any...
Read more >
Component Testing Config
When you launch Cypress for the first time in a project, the app will automatically guide you through setup and configuration. You don't...
Read more >
Unit testing React components in Cypress without CRA and ...
1. Install Cypress · 2. Add cypress.json · 3. Update support bindings · 4. Configure the plugins · 5. Write your tests ·...
Read more >
cypress/webpack-preprocessor
Cypress preprocessor for bundling JavaScript via webpack. Latest version: 5.16.0, last published: 5 days ago.
Read more >
Problem setting up Cypress component tests for CRA with ...
This worked for me. Remove cypress.config.js and cypress folder; Initialize the the cypress config and choose create-react-app fram.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found