vite@3.1.3 breaks cypress-vite

[DrJume]

After updating from vite@3.1.1 to 3.1.3 I get the following error when running a cypress test:

Error: ENOENT: no such file or directory, stat '/Users/drjume/Library/Application Support/Cypress/cy/production/projects/maler-juergens-1b7c2c9d2b2d995e3f4a8a216021051e/bundles/cypress/e2e/1-request-vacation.cy.ts'

[mammadataei]

@DrJume I've updated the vite in the example to 3.1.3, and it works fine.

cypress-vite/example/package.json

Line 31 in 0738fbe

"vite": "^3.1.3"

I'm not sure what's causing this issue, but I've added debugging at v1.2.0; maybe it helps to identify the problem. I can try to fix it if you provide me more information or reproduction if possible.

[DrJume]

I forgot to mention that it happened on a clean install.

When using vite@3.1.1 and upgrading to 3.1.3 the cache (in my case ~/Library/Application Support/Cypress/cy/production) persists and it works.
But when you delete the projects/ folder in the cache dir and use vite@3.1.3, the error occurs.

[DrJume]

Thanks for providing a debug output so quickly! I have reproduced the issue and logged it:

cypress-vite-debug.log

[mammadataei]

I've cleared the projects/ directory and tested with the example again, which still works fine.
I've also checked the log file, and I think it should be related to the rollup configuration.

Error: Invalid value for option "output.inlineDynamicImports" - multiple inputs are not supported when "output.inlineDynamicImports" is true.

In vite@3, the output.inlineDynamicImports is false by default and cypress-vite is not changing it either.

If you didn't change it in your vite.config.ts, maybe one of vite plugins is changing the configuration. May you check if setting build.rollupOptions.output.inlineDynamicImports to false can fix the problem?

[websitevirtuoso]

@mammadataei Holy Moly.
Thanks for this repo. Finally I can use vite instructions, vite aliases, and everything from vite.
Thanks for everything.

[Ragura]

I'm having the exact same issue, using Vite 3.1.7. I worked with Cypress using the regular Webpack builder first, which created some bundle artifacts that still ran correctly after switching to this package as the builder. But when I manually removed the contents of the projects folder (inside library/cypress/...) they also stopped working. There are no .ts files inside the bundles output folder, only the favicon and staticwebapp.config.json.
I have tried setting the build.rollupOptions.output.inlineDynamicImports to false without success.

[mammadataei]

The only thing I could figure out was that the rollup is unable to transpile modules for some unknown reasons. I need a reproduction to work on this. Can anyone help with that?

@Ragura, it may help if you can send me the debugging output.

[shwarcu]

Hi @mammadataei , I am not sure about reproduction yet but in my case, I can't run some tests if I use path aliases in imports
so when I switched from this

import { HUMAN_LIKE_SCROLL_DURATION, Page } from '../../support/test-configuration';

to something like this

import { HUMAN_LIKE_SCROLL_DURATION, Page } from '@support/test-configuration';

I get the error. When I changed all imports back to the previous form, so that no import uses path alias, test worked again.
Then I was changing each import one by one to use path alias, but this time it worked when I made all imports use path alias. Very weird.

I also don't get any additional output when I use export DEBUG=cypress-vite when running Cypress.
I use Cypress 10.10 and my config is very basic

import { defineConfig } from 'cypress';
import vitePreprocessor from 'cypress-vite';

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor());
    },
    baseUrl: 'https://127.0.0.1:8080/webserver/',
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
    defaultCommandTimeout: 5000,
    supportFile: 'cypress/support/e2e.ts',
  },
});

Edit: I think my problem is not related to newest vite version. Downgrading didn't solve the problem. I think in my case some tests work because they were previously processed by webpack preprocessor and after switching to vite they are not processed at all, hence the error about missing file

[mammadataei]

@shwarcu Hi, I think, in your case, it can be due to configurations. Did you define path aliases in the vite config?! If not, try to do so and pass the vite config path to vitePreprocessor(). If you are using typescript this might help:

// vite.config.ts

import { compilerOptions } from './tsconfig.json'

function resolveAliasesFromTypescriptConfig() {
  return Object.entries(compilerOptions.paths).reduce((acc, [key, [value]]) => {
    const aliasKey = key.substring(0, key.length - 2)
    const path = value.substring(0, value.length - 2)
    return { ...acc, [aliasKey]: resolve(__dirname, path) }
  }, {})
}

export default defineConfig({
  resolve: {
    alias: resolveAliasesFromTypescriptConfig(),
  },
  ...
})

For debugging, I think there is no need for export; DEBUG=cypress-vite would do.

[DrJume]

I very much suspect that the error is caused by:

• fix(lib): respect rollupOptions.input in lib mode vitejs/vite#10116

[DrJume]

I found the cause of the bug:

vitejs/vite#10116 only surfaced the bug. The issue was that other vite plugins (https://github.com/laravel/vite-plugin) interfered with cypress-vite, causing something like multiple rollup inputs and messing up the build output cache.

Because of this, I am asking myself the question, if it is even suitable to use the plugins from the development build for spec files?

After I noticed this, I made an empty vite config only for cypress-vite and provided is as a parameter to the viteProcessor(), but it still used the plugins from the default vite.config.ts.

I found out that vite's build function has a configFile parameter, which when not provided, defaults to the root vite config. (See https://vitejs.dev/guide/api-javascript.html#inlineconfig)

cypress-vite/src/index.ts

Line 73 in cc0b5fd

const watcher = await build(buildConfig)

So it uses the buildConfig, but merges it again with the root vite config.

Workaround

A workaround is specifying configFile: false in the vite config given to viteProcessor(), because it ends up in build(buildConfig).

Conclusion

To fix this issue, I switched the config handling to using vite's integrated configFile option in my PR #11.

[DrJume]

The behaviour of configFile is found here:

Handling option configFile:
https://github.com/vitejs/vite/blob/1a2e7a8d360c6ac25754466143c5a3eb5291dcaa/packages/vite/src/node/config.ts#L392

Resolving the configFile:
https://github.com/vitejs/vite/blob/1a2e7a8d360c6ac25754466143c5a3eb5291dcaa/packages/vite/src/node/config.ts#L874

[mammadataei]

@DrJume Thanks for debugging, detailed explanation, and PR. I merged your PR. I need to do some checks and release it within an hour.

[mammadataei]

Should be solved in v1.2.1