Cypress Component Testing is not running in a new Vite+React+TypeScript project

[jude-lawson]

Current behavior

Hi Cypress Team!

First off, thanks for making a great tool. I've been using Cypress for awhile and I just wanted to take the briefest of moments to appreciate the work you've done.

My issue is related specifically to Cypress Component Testing. I am adding Cypress Component Testing to a project that uses Vite+React+TypeScript. After setting up the project with the standard settings from Vite's React-TS template, adding Cypress, and running the automated configuration to set up component testing and running the new test, the Cypress app freezes on the "Your tests are loading..." screen.

Desired behavior

When I start the newly created test, the test should load and show the default <App /> component I am rendering with cy.mount in the test.

Test code to reproduce

I've set up a repo to replicate the issue. I'm using Cypress Component Testing in a little different context, but I distilled the issue down to a minimum reproducible example found here: https://github.com/jude-lawson/cy_vite_repro

The steps to reproduce are in the repo's README!

Cypress Version

10.4.0

Other

I've reached out for help on the Cypress Discord and was directed here to get some additional help. As mentioned before I am trying to use Cypress Component Testing in a little different context (a monorepo), but the isolated workspace is still a brand new Vite+React+TS project, just like the minimum reproducible example (which is not a monorepo).

I'm using pnpm, but I've also tried this with npm as well just to eliminate pnpm as a variable and the issue still occurred.

Thanks for any help you can provide, and please let me know if there are any other steps I can take or additional information that I can provide.

[rockindahizzy]

Hey @jude-lawson, thanks for providing a reproduction repo! Unfortunately, I was not able to reproduce the error using that repo.

I also tried following the steps in your readme to create a project from scratch (thanks for those additional details!), but had no luck reproducing it that way either.

Can you check the console in the browser when it gets stuck on Your tests are loading...? Maybe there is more context in the console logs.

[jude-lawson]

Thanks @rockindahizzy ! That is so bizarre, I've tried on a couple of different machines and had a colleague try on their's, and we were seeing similar frozen results across the board. I wonder if it has something to do with operating system or even shell configurations? On my colleagues machine they received the following:

Opening Cypress...
(node:82740) 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:82740) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
Error [ERR_LOADER_CHAIN_INCOMPLETE]: "file:///Users/<redacted>/Library/Caches/Cypress/10.4.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/esm/transpile-only.mjs 'resolve'" did not call the next hook in its chain and did not explicitly signal a short circuit. If this is intentional, include `shortCircuit: true` in the hook's return.
    at new NodeError (node:internal/errors:387:5)
    at ESMLoader.resolve (node:internal/modules/esm/loader:860:13)
    at async ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:7)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12) {
  code: 'ERR_LOADER_CHAIN_INCOMPLETE'
}

I checked in the Chrome console while the freezing was occurring and did not get any messages (other than that the Cypress favicon could not be found). In the Cypress shell log itself, this is what I see. I'm not sure if you see anything concerning there that I don't:

> pnpm cypress open
(node:27618) 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:27618) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
GET /__/ 200 2.902 ms - -
GET /__/assets/index.91824acf.css 200 2.829 ms - -
GET /__/assets/index.ffc5e978.js 200 4.667 ms - -
GET /__cypress/runner/cypress_runner.css 200 1.930 ms - -
GET /__/assets/Specs.74aa911a.js 200 1.358 ms - 485
GET /__/assets/Index.4cabd910.css 200 4.105 ms - -
GET /__/assets/ResultCounts.bce3a6fb.js 200 3.282 ms - -
GET /__/assets/SpecPatterns.854be47d.js 200 2.944 ms - -
GET /__/assets/CreateSpecModal.870094f5.js 200 3.810 ms - -
GET /__/assets/add-large_x16.2ccd70c8.js 200 2.906 ms - 783
GET /__/assets/Index.b35a21f4.js 200 3.857 ms - -
GET /__/assets/CloudConnectModals.8865672c.css 200 2.910 ms - -
GET /__/assets/CloudConnectModals.ec18f75a.js 200 2.999 ms - -
GET /__/assets/settings_x16.f98964fd.js 200 3.145 ms - -
GET /__/assets/cypress_s.29af549a.png 200 6.291 ms - 4425
GET /__/assets/chrome.1b5cb774.svg 200 1.351 ms - -
GET /__/assets/electron.fb07f5cc.svg 200 2.840 ms - -
GET /__/assets/firefox.9be61e66.svg 200 2.422 ms - -
POST /ListAccounts?gpsia=1&source=ChromiumBrowser&json=standard 200 634.976 ms - -
GET /chrome-variations/seed?osname=mac&channel=stable&milestone=104 304 644.996 ms - -
GET /__cypress/runner/cypress_runner.js 200 2.619 ms - -
GET /v1/pages/ChRDaHJvbWUvMTA0LjAuNTExMi43ORIQCZn9u06bB-cGEgUNE1Cf1A==?alt=proto 200 637.389 ms - -
GET /__/assets/Runner.8ff9b22f.css 200 2.041 ms - -
GET /__/assets/Switch.1afce9ba.js 200 2.248 ms - -
GET /__/assets/refresh_x16.3827f14b.js 200 2.065 ms - -
GET /__/assets/Runner.d00ececf.js 200 3.109 ms - -
GET /v1/pages/ChRDaHJvbWUvMTA0LjAuNTExMi43ORIQCUuvX4XcrqZJEgUNN5ze0w==?alt=proto 200 544.172 ms - -
POST /v1:GetModels?key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 641.743 ms - -

Let me know if maybe a video of the GUI or something would help? Is there a Cypress log file I can inspect to dig in further? It looks like there's probably just some variable that I am missing, so I'm happy to try whatever you think is best!

[elijahstorm]

@jude-lawson Seems this issue has to do with the new node version, 18.6.0, and some new features added to it. If your local machine is using that version of node, currently Cypress fails with it. I recommend keeping your local node version on whatever it was just before the update. At least unless Cypress catches up and has a fix for this in the future.

[jude-lawson]

Thanks @elijahstorm ! I think my colleague was on 18.6.0, so that's definitely whats causing that hook error. Is the freezing issue related to this though? I am currently on node 17.9.0. Is that a supported node version? Happy to switch it up if not!

[elijahstorm]

It's worth giving it a shot to and trying 18.2.0. That worked for us via docker and auto CI deployments.

But honestly my local machine was running version 16 just fine, until I updated it recently. So I'm not totally sure if it'll fix your freezing issue.

[urecha]

Hey, same issue here. Vite+React and indefinite "Tests are loading" with essentially the same symptons as described by jude-lawson.

I quickly checked how your reproduction would perform locally, @jude-lawson, and observed it to work when using node 16.15.1 (just what I currently was on), but not to do so with 18.2.0 (and 18.6.0 already failed when running npx cypress open).

But that's for the mentioned reproduction. In my actual project, tests won't load for any of these node versions..

I've got React v 18.2.0, vite v 3.0.3 & cypress 10.4.0 with the reactRefresh plugin in my vite.config.js and the scaffolded framework: 'react', bundler: 'vite' cypress config.

[jude-lawson]

@elijahstorm / @urecha I ran some more tests with a colleague yesterday evening and it looks like we got this behavior based on different node versions:

node 16.13.1 - works
node 17.9.1 - freezes
node 18.2.0 - freezes
node 18.7.0 - errors

I tried this out and got similar results (which is great because it looks like the current LTS version of node works!):

node 16.16.0 - works
node 17.9.0 - freezes
node 18.2.0 - freezes

Here's a short video example of me switching between node 16 (LTS) and node 18 (Current) to exemplify the behavior:

cy_vite_repro.mov

Definitely looks to be like the LTS is working, but Current is freezing. Let me know if you'd like me to test anything else!

[rockindahizzy]

Hey everyone,

Thanks for helping get to the root of the issue. I was able to recreate this by changing my node version.

It actually looks like we have a PR that has been recently merged that should fix this issue.

In the meantime, you may be able to workaround this by adjusting your vite.config.ts to include

  server: {
    host: '127.0.0.1'
  }

I tired it in your reproduction, @jude-lawson, and it seemed to work!

[AtofStryker]

@ZachJW34 assigning to you since you have a PR to fix this issue.

[ZachJW34]

I'm going to close this issue since we have merged #23048 which will be included in our next release. If you are seeing an error that isn't related to Vite hanging due to node version >=17, we can reopen or you can create another issue!

[jude-lawson]

Awesome, thanks everyone who looked in to this and helped provide workarounds. Looking forward to the next release, and thanks for building great software 🎉

Also, this is a complete side note, but Cypress's documentation is some of the best I've ever utilized, and I often point to it as an archetype of great documentation. Thank you for writing useful documentation as well!