Fails to run using Vite 3 with Cypress 10

[wopian]

Something has changed with the release of Vite 3 that appears to have caused cypress-terminal-report to fail execution of Cypress component tests for Vite-based apps. cypress-terminal-report runs as expected with Vite ^2.9.9

When cypress-terminal-report is removed (or just the installLogsCollector disabled) Cypress 10.3.0 sucessfully runs our specs with Cypress' logging output.

Re-enabling installLogsCollector causes Cypress to abort before tests are run with the following error:

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

  > Module "http" has been externalized for browser compatibility. Cannot access "http.METHODS" in client code.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
      at Object.get (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress-terminal-report_src_installLogsCollector.js?v=478577c3:4120:17)
      at getCurrentNodeMethods (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress-terminal-report_src_installLogsCollector.js?v=478577c3:4134:19)
      at node_modules/methods/index.js (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress-terminal-report_src_installLogsCollector.js?v=478577c3:4132:22)
      at __require (http://localhost:3000/__cypress/src/node_modules/.vite/deps/chunk-FAW2VN4A.js?v=478577c3:4:50)
      at node_modules/cypress-terminal-report/src/collector/LogCollectCypressRequest.js (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress-terminal-report_src_installLogsCollector.js?v=478577c3:4177:19)
      at __require (http://localhost:3000/__cypress/src/node_modules/.vite/deps/chunk-FAW2VN4A.js?v=478577c3:4:50)
      at node_modules/cypress-terminal-report/src/installLogsCollector.js (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress-terminal-report_src_installLogsCollector.js?v=478577c3:5115:36)
      at __require (http://localhost:3000/__cypress/src/node_modules/.vite/deps/chunk-FAW2VN4A.js?v=478577c3:4:50)
      at http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress-terminal-report_src_installLogsCollector.js?v=478577c3:5181:64

I'm not sure if this is an issue residing in cypress-terminal-report or elsewhere (i.e cypress or vite) as there doesn't appear to be any usage of http in the code here, but the stack trace only refers to the installLogsCollector file.

Minimal setup

cypress/support/component.ts

import installLogsCollector from 'cypress-terminal-report/src/installLogsCollector'

installLogsCollector()

cypress.config.ts

import { defineConfig } from 'cypress'
import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter'

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite'
    },
    specPattern: 'src/**/*.spec.ts',
    setupNodeEvents(on) {
      installLogsPrinter(on)
    }
  }
})

vite.config.ts

import createVuePlugin from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    fs: { strict: true },
    port: 3000,
    host: '127.0.0.1'
  },
  plugins: [
    createVuePlugin(),
  ]
})

[archfz]

cypress-terminal-report plugin uses methods npm package, which requires http node module. Now you either add a polyfill for http module for your vite configuration. Or pull requests are welcome to remove this dependency on cypress-terminal-report. It's only used in two places, and we could hardcode on our side the actual possible http methods.

[archfz]

Released in 4.1.1

[wopian]

Thank you ❤️