Cypress hangs in component testing using Vite (Vite 3 / Cypress 10 / Node 18)

[slauzinho]

Current behavior

We recently updated to use "vite": "^3.0.4" since then when running a component test, Cypress hangs on Your tests are loading....

If I change to start using "vite": "^2.9.13" everything starts working as expected.

This seems to happen if I choose either Chrome, Electron or Firefox, it also happens if I do npx cypress run --component.

npx cypress run --component
(node:23073) ExperimentalWarning: Custom ESM Loaders is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:23073) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.1                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v18.0.0 (/Users/XXXXX/.nvm/versions/node/v18.0.0/bin/node)                   │
  │ Specs:          1 found (HelloWorld.cy.ts)                                                     │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  HelloWorld.cy.ts                                                                (1 of 1)

Timed out waiting for the browser to connect. Retrying...

The issue seems to be related with the node version, if I try with node 16.X it works but if I try with node 17 or 18 it doesn't (where it used to)

Desired behavior

Should run component tests

Test code to reproduce

https://github.com/slauzinho/cypress-10-vite-3

Run with node version 17.x or 18.x

Cypress Version

10.3.1

Other

No response

[lmiller1990]

What's the exact version of Node.js you are on? I tried 17.9.1 (linux x64) but could not reproduce.

It might be related to this change in Vite 3: https://vitejs.dev/guide/migration.html#architecture-changes-and-legacy-options. Some info in a similar issue I wrote.

Some people reported fixing this by changing server.port, see here: #22784 (comment)

[slauzinho]

@lmiller1990 I initiallly tried with node 18.0.0 but also tested with node 17.9.1 on m1 mac it has the same issue.

But I can confirm that changing:

//cypress.config.ts
server: {
          host: '127.0.0.1',
},

Fixes the issue

[lmiller1990]

Nice, we will do that for you soon https://github.com/cypress-io/cypress/pull/23048/files so you won't need to (once this is merged + released).