Component Test with Vite cold-start issue causes first test to fail

Current behavior

:~/environment/my-app (my-branch) $ npx cypress run --component
...
  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.2.0                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v14.16.1 (/home/ec2-user/.nvm/versions/node/v14.16.1/bin/node)                 │
  │ Specs:          6 found (.................................................)                    │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
Running:  ProfileCard.cy.js                                                               (1 of 6)
12:23:30 PM [vite] ✨ new dependencies optimized: vuetify/lib
12:23:30 PM [vite] ✨ optimized dependencies changed. reloading


  (Attempt 1 of 3) An uncaught error was detected outside of a test
  (Attempt 2 of 3) An uncaught error was detected outside of a test
  1) An uncaught error was detected outside of a test

  0 passing (2s)
  1 failing

  1) An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Failed to fetch dynamically imported module: http://localhost:3000/__cypress/src/src/components/ProfileCard.cy.js
...

The other tests pass.

On the second run, tests pass.

First test always fails in CI pipeline on Github Actions.

Adding test retries does not help

Desired behavior

Some way of preventing the first test from failing.

Some way of warming up Vite so that it doesn’t have this cold-start problem (I’m also going to file a bug report there).

Test code to reproduce

Proprietary code. Will work on setting up a forked repo if necessary. Will take time.

Cypress Version

10.2.0

Other

No response

[lmiller1990]

@mcheung610 Vite will do a pre-cache before running. You might not see it often locally, since it caches in node_modules/.vite, but on CI, since you likely have a fresh node_modules each run, it makes CI seem more unreliable.

What we’ve done is added all our dependencies to optimizeDeps.include. See here: https://github.com/cypress-io/cypress/blob/develop/packages/app/vite.config.mjs#L8-L19

You can clear your vite cache with rm -rf node_modules/.vite (or vite may have a command for this).

Vite 3 might have fixed this, though - they address cold start issues in their release post. I’d recommending updating to Vite 3, then, if you still have issues, try adding the deps required during testing to your config, like we have.

[mcheung610]

@mjhenkes @lmiller1990 I am running into this bug as well. Was curious what the workaround you provided above?