[@cypress/react] - Can't resolve '@cypress/react/support' using v5.7

After upgrading @cypress/react from v4.16 to v5.7, starting cypress yields:

Error: Webpack Compilation Error
./cypress/support/index.js
Module not found: Error: Can't resolve '@cypress/react/support' in '/Users/vadorequest/dev/NRN/v2-mst-aptd-at-lcz-sty/cypress/support'
resolve '@cypress/react/support' in '/Users/vadorequest/dev/NRN/v2-mst-aptd-at-lcz-sty/cypress/support'
  Parsed request is a module
  using description file: /Users/vadorequest/dev/NRN/v2-mst-aptd-at-lcz-sty/package.json (relative path: ./cypress/support)
    Field 'browser' doesn't contain a valid alias configuration

cypress/support/index.js

// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// See https://dev.to/cuichenli/how-do-i-setup-my-nextjs-development-environment-2kao
import '@cypress/react/support';
import './commands';

// See https://docs.cypress.io/api/events/catalog-of-events.html#Uncaught-Exceptions
Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  console.error('Application error caught:', err, runnable);
  return false;
});

I tried changing to import '@cypress/react';, and then got new errors about Error: cy.visit from a component spec is not allowed, although I’m testing pages, not components. I’ve probably missed something in the https://docs.cypress.io/guides/references/changelog#7-0-0 notes.

---

I wasn’t aware to find the changelog for the @cypress/react package, it’s probably buried somewhere in the monorepo.

Could you change the NPM description for @cypress/react to link to the changelog for that particular package? It’d make upgrade smoother.

[lmiller1990]

You don’t need @cypress/react/support anymore, just delete that line and you should be good. Here’s one of my test projects using the latest versions of everything, you could take a look at that for inspiration: https://github.com/lmiller1990/cypress-react-template.

We also have a bunch more exmaples here for React _+ webpack/vite: https://github.com/cypress-io/cypress-component-examples/tree/main/create-react-app

Let me know if you have problems even after deleting that import

[lmiller1990]

Hi! There’s a bit on why component testing might be useful in this blog post. It can be convenient to test component in isolation - although not everyone needs this feature.

There’s a setup guide for next.js, and a completed next.js example here.

Let me know if you’d like more info or get stuck, should you choose to explore component testing more. 🎉