Cypress component test produces "@vitejs/plugin-react can't detect preamble. Something is wrong"

[froko]

Describe the bug

I maintain an app skeleton with Vite, React, and optional Cypress support. Since the upgrade to Vite3, I get the "@vitejs/plugin-react can't detect preamble. Something is wrong" failure message when running the Cypress component tests. It used to work fine with Vite2.

• Working solution with Vite2: https://github.com/froko/vite-ts-react/tree/cypress
• Failing solution with Vite3: https://github.com/froko/vite-ts-react/tree/cypress-vite-3

Reproduction

https://github.com/froko/vite-ts-react/tree/cypress-vite-3

System Info

System:
    OS: macOS 12.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 281.67 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 103.1.41.96
    Chrome: 78.0.3904.108
    Edge: 103.0.1264.71
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-react: ^2.0.0 => 2.0.0 
    cypress: ^10.3.1 => 10.3.1 
    vite: ^3.0.2 => 3.0.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Cypress does not support Vite 3 yet: cypress-io/cypress#22784

Closing for the reason above but feel free to create a new issue if it turns out that this is a bug in Vite.

[lmiller1990]

I found the problem, we will support soon (maybe next release, that's usually biweekly).

FYI PR: cypress-io/cypress#22915

FYI this was the problem, Vite 3.x had some breaking changes around transformIndexHtml I think. Here's how I fixed it, at least in our Vite dev server integration:

https://github.com/cypress-io/cypress/pull/22915/files#diff-5b3ea0fa70e7e1e8a968123451e3b68ad11cde664c56ef07e4ccdd02769887e5R56-R94

For now, you might need to stay on Vite 2. This should be released very soon in Cypress 👍

[sapphi-red]

Oh, that's great.

Yes. This one, I think.
https://vitejs.dev/guide/migration.html#advanced:~:text=%5B%236901%5D%20fix%3A%20sequential,works%20as%20expected.

[bzbetty]

Found another work around:

• in cypress.config.ts
• override the devServer/viteConfig/plugins/react() config to disable faster refresh

essentially:

export default defineConfig({
    component: {
        devServer: {          
            viteConfig: {
                plugins: [
                    react({
                        include: '**/*.disabled'
                    }),

[lmiller1990]

Just wait for the next Cypress patch release - cypress-io/cypress#22915 is merged, which fixes the issue.