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

[ZachJW34]

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.

Desired behavior

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

Test code to reproduce

1. npx create-next-app my-next-app && cd my-next-app
2. npm i -D cypress
3. npx cypress open
4. Walk through CT setup, "Choose a browser" page will show misleading warning.

Cypress Version

10.4.0

Other

No response

[baus]

Hey team! Please add your planning poker estimate with ZenHub @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34

[marktnoonan]

Looks like a pretty small change. But I'm not totally sure at a glance where getBundlerDependency is being called when the nextjs dependencies function doesn't actually call it, and already ignores the bundler argument. Which would have been my naive assumption about the change needed here.

[mike-plummer]

My guess is this is the line giving the error: ProjectConfigManager.ts -const result = await isDependencyInstalled(bundler, this.options.projectRoot) - it treats the bundler as a required dependency even if it isn't listed in the dependencies. Would need to rework the wizard deps logic to remove this condition and then ensure other frameworks have their bundler listed as a dependency

[JasonFairchild]

Just wanted to add that I have experienced this. I thought it might be a bug, so this is reassuring to find. But to be clear, if I'm using nextjs with 'latest' version, then I shouldn't expect to see any mismatched dependency warning, right? I can also confirm that I've run into no problems so far, but I've only written a few component tests, so not super in depth yet from that perspective. Does it help to note this probably comes along with this merge?

I also happened to notice that the warning can stack up multiple times. Maybe because I was modifying configuration that would cause the CT runner experience to restart to some degree and add another warning? Small thing, but maybe you want to think about improving it as well:

[lmiller1990]

@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.

[lmiller1990]

Okay, fixed the duplicate warnings :facepalm: https://github.com/cypress-io/cypress/pull/23339

We will look into Next.js warnings separately and track progress in this issue.

[cypress-bot[bot]]

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

[cypress-bot[bot]]

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.