Cypress implicitly expects react-dom to be installed during component testing setup

[rluisnpt1]

Current behavior

Cypress 10.1.0 - Components setup using web interface does not work when select React and vite.

[15940:0617/071413.082:ERROR:gpu_init.cc(446)] Passthrough is not supported, GL is disabled, ANGLE is                                                                               d, ANGLE is 
X [ERROR] Could not resolve "react-dom"

    node_modules/cypress/react/dist/cypress-react.esm-bundler.js:9:26:
      9 Γöé import * as ReactDOM from 'react-dom';
        Γò╡                           ~~~~~~~~~~~
  You can mark the path "react-dom" as external to exclude it from the bundle, which will 
remove this error.

7:26:45 AM [vite] error while updating dependencies:
TypeError: Cannot read properties of undefined (reading 'outputs')
    at runOptimizeDeps (C:\Users\nlrdn\GravitySource\rluisn-devtest\Cypress-TestFramework\node_modules\vite\dist\node\chunks\dep-8f5c9290.js:39993:49)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOptimizer (C:\Users\nlrdn\GravitySource\rluisn-devtest\Cypress-TestFramework\node_modules\vite\dist\node\chunks\dep-8f5c9290.js:50498:38)

Desired behavior

Cypress does not crashes when using React and vite Into DevServer

Test code to reproduce

yarn add cypress --dev
npx cypress open

3- Then in the first page select components *beta
4- When the combo box appear, select React and Vite as bundle combination.
5- Then execute the command in the terminal yarn add -D vite react
6- And create the vite.config.ts

//vite.config.ts
import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/

module.exports = defineConfig(({ command, mode }) => {

    // Load env file based on `mode` in the current working directory.
    // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
    const env = loadEnv(mode, process.cwd(), '')

    if (command === 'serve') {
        return {
            // dev specific config
            define: {
                __APP_ENV__: env.APP_ENV
            }
        }
    } else {
        // command === 'build'
        return {
            // build specific config
            define: {
                __APP_ENV__: env.APP_ENV
            },
            build: {
                lib: {
                    entry: 'src/index.ts',
                    formats: ['es']
                },
                rollupOptions: {
                    // make sure to externalize deps that shouldn't be bundled
                    // into your library
                    external: /^lit/,
                    output: {
                        // Provide global variables to use in the UMD build
                        // for externalized deps
                        globals: {
                            lit: 'lit'
                        }
                    }
                }
            }
        }
    }
})

Cypress Version

10.1.0

Other

No response

[lmiller1990]

Hi! I think I see the problem - we should be adding react-dom as a dependency, not just react - you need them both. You could try adding react-dom.

As an aside, I'm working on React 18 support (with the new createRoot mounting API here), which will be done soon. In the meantime, I'd recommend doing npm install react@17 react-dom@17

Also - in your vite.config.ts, you might want export default instead of module.exports. See here for a configured, working example (check vite.config.ts - you need the @vitejs/react plugin).

Can you try npm install react@17 react-dom@17?

[lmiller1990]

I talked to @astone123 and have assigned this one to him. We will fix it. In the meantime, installing react and react-dom in your project should let you progress (most react projects should have these already).

[cypress-bot]

The code for this is done in cypress-io/cypress#22572, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 10.3.1.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.3.1, please open a new issue.