vite.config missing after CT onboarding - unexpected error

[MikeMcC399]

Current behavior

The Cypress desktop app shows the message "Unexpected error" if a default onboarding setup is followed after selecting Front-end framework React.js and bundler Vite.

No vite.config.* is found.

Desired behavior

The Cypress desktop app should not throw any error after completing a default onboarding setup using Front-end framework React.js and bundler Vite. A minimal vite.config.* should be created by the onboarding process.

Test code to reproduce

Execute in a terminal window:

mkdir cy-vite-ct
cd cy-vite-ct
git init
npm init -y
npm install cypress@latest -D -E
npx cypress open

In the Cypress desktop app:

Click on "Component Testing"
Select Front-end framework React.js and Bundler Vite
Click "Next step"
Copy and paste the command as instructed:
npm install -D vite react react-dom
You've successfully installed all required dependencies.
Click "Continue", click "Continue"
Note "Unexpected Error" looking for vite.config.*

Cypress Version

First reported on Cypress 12.13.0
Continues to be reproducible on Cypress 13.15.0

Node version

18.17.1 & v20.17.0

Operating System

Ubuntu 22.04 (and Windows 11)

Debug Logs

No response

Other

Workaround

Add a barebones vite.config.js file according to https://vitejs.dev/config/ and restart npx cypress open

// vite.config.js
export default {
  // config options
}

[MikeMcC399]

I am going by the documentation Integrating with Cypress Component Testing which says:

Cypress Component Testing includes official support for many popular libraries and frameworks such as React, Angular, and Vue. All officially supported libraries feature a first class onboarding experience, where we detect and scaffold the correct files, and a framework-specific mount adapter to render your components. We call this collection of features a Framework Definition since it defines the requirements for a library or framework to work in Cypress.

It mentions "first class onboarding" and "scaffold the correct files" so I would expect it not to error out when started.

Some other frameworks such as Angular, Create React App, and Vue.js have similar issues that prevent them from running due to missing config files that onboarding does not provide.

[MikeMcC399]

@warrensplayer

I'm unsure what category this issue is in!

• If onboarding is supposed to produce a working basic installation, then it would be a bug.

• If it's not supposed to work this way, then probably it's a documentation issue and the description surrounding "first class onboarding" and "scaffold the correct files" should be clarified.

• In addition I would have a feature request for onboarding to set up a basic working configuration. I'm not sure how that would work though because if I look at https://docs.cypress.io/guides/component-testing/angular/quickstart for Angular, rather than vite, Angular setup uses @angular/cli to set up a working environment. It is not just a case of installing dependencies. The way it is currently implemented seems to be an incomplete solution if onboarding does not prepare a runnable environment.

[warrensplayer]

@MikeMcC399 I think that the app should definitely be helping out a bit more in this scenario. It should either tell you to run a vite project setup command or perhaps do it for you. Going to route for consideration for a fix.