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.

Next.js CT apps have "Component Testing Mismatched Dependencies" warning for deps it doesn't need.

See original GitHub issue

Current behavior

When booting up a Next.js app for CT testing, a warning for Component Testing Mismatched Dependencies is displayed on the “Open Browser” page. This warning says that the application is missing “webpack”, but Next.js applications don’t require webpack since Next bundles it internally.

Screen Shot 2022-08-09 at 10 28 34 AM

Desired behavior

The warning should not show when launching Next.js Component Testing

Test code to reproduce

npx create-next-app my-next-app && cd my-next-app
npm i -D cypress
npx cypress open
Walk through CT setup, “Choose a browser” page will show misleading warning.

Cypress Version

10.4.0

Other

No response

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

lmiller1990commented, Aug 15, 2022

@JasonFairchild I think you are right in suggesting the mismatched bug was introduced in https://github.com/cypress-io/cypress/issues/23216#issuecomment-1213493767 - that’s where we added the dependencies check feature, but missed the edge case of Next.js and the inline webpack they ship.

Also the stacking errors looks bad, that’s definitely a separate bug we should address.

0reactions

cypress-bot[bot]commented, Sep 13, 2022

Released in 10.8.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to Cypress v10.8.0, please open a new issue.

Top Results From Across the Web

How to fix missing dependency warning when using useEffect ...

I have this current setup, React hook useEffect runs continuously forever/infinite loop and the only comment is about useCallback() which I'm not familiar...

RFC: Global CSS Imports #27953 - vercel/next.js - GitHub

I have two nextjs app that have a bunch of common components. To avoid repeating/copy pasting I create a small component library to...

react-version | Next.js

Component stack trace in development: see the component tree that lead up to an error; Hydration mismatch warnings: trace down discrepancies in your...

Component Testing Config - Cypress Documentation

When you launch Cypress for the first time in a project, the app will automatically guide you through setup and configuration. You don't...

How to Create and Publish a React Component Library

All code from this tutorial as a complete package is available in this repository. If you are... Tagged with webdev, react, javascript, ...