Vite v5 gives CJS deprecation warning with Component testing

[MikeMcC399]

• follow on from Support vite v5 for component testing #28347

Current behavior

Cypress Changelog 13.13.0 states "Added support for vite v5 to @cypress/vite-dev-server."

Running Component Testing with Cypress and vite v5 results in the message:

The CJS build of Vite's Node API is deprecated.

Desired behavior

Running Component Testing with Cypress and vite v5 should not show any deprecation message related to Vite's Node API.

Test code to reproduce

See https://github.com/cypress-io/github-action/tree/master/examples/component-tests

To run, use the following:

git clone https://github.com/cypress-io/github-action
cd github-action/examples/component-tests
npm ci
npm test

For debug info, repeat with:

export VITE_CJS_TRACE=true
npm test

See also #29557 (comment) for steps to reproduce without using an additional repository using npm/vite-dev-server directly.

Cypress Version

First reported on version 13.10.0
Still reproducible on version 13.15.0

Node version

v20.13.1 v20.17.0

Operating System

Ubuntu 22.04.4 LTS
Ubuntu 22.04.5 LTS

Debug Logs

$ export VITE_CJS_TRACE=true
npm test

> example-component-tests@2.0.0 test
> cypress run --component


DevTools listening on ws://127.0.0.1:41551/devtools/browser/d676f1ba-6901-4f0c-a113-4d46551aac70
Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at warnCjsUsage (/home/mike/github/temp/github-action/examples/component-tests/node_modules/vite/index.cjs:33:3)
    at Object.<anonymous> (/home/mike/github/temp/github-action/examples/component-tests/node_modules/vite/index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at getVite (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/vite-dev-server/dist/getVite.js:14:16)
    at devServer (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/vite-dev-server/dist/devServer.js:13:40)
    at Object.handler (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:166:24)
    at invoke (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:185:18)
    at /home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Promise.attempt.Promise.try (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
    at Object.wrap (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/dev-server.js:18:8)
    at RunPlugins.execute (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:155:26)
    at EventEmitter.<anonymous> (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:56:12)
    at EventEmitter.emit (node:events:519:28)
    at process.<anonymous> (/home/mike/.cache/Cypress/13.10.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:519:28)

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.10.0                                                                        │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v20.13.1 (/home/mike/n/bin/node)                                               │
  │ Specs:          1 found (Stepper.cy.jsx)                                                       │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  Stepper.cy.jsx                                                                  (1 of 1)


  <Stepper />
    ✓ renders (60ms)
    ✓ stepper should default to 0 (36ms)
    ✓ supports a "count" prop to set the value (26ms)
    ✓ when the increment button is pressed, the counter is incremented (116ms)
    ✓ when the decrement button is pressed, the counter is decremented (111ms)
    ✓ clicking + fires a change event with the incremented value (110ms)


  6 passing (530ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        6                                                                                │
  │ Passing:      6                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     Stepper.cy.jsx                                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  Stepper.cy.jsx                           531ms        6        6        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        531ms        6        6        -        -        -

Other

Installed npm module versions

├── @types/react-dom@18.2.13
├── @types/react@18.2.28
├── @vitejs/plugin-react@4.2.1
├── cypress@13.10.0
├── react-dom@18.2.0
├── react@18.2.0
└── vite@5.2.11

[codyjohnsonfb]

Related to: #28373
Also still seeing this warning when running scripts.

[MikeMcC399]

@codyjohnsonfb

• Thanks for linking in [CT] Fix Vite 5 CJS Deprecation Warning and Prepare for Vite 6 #28373! I had missed that issue (even though I commented on it quite a while ago!) 🤭 I guess it is the same root cause. Anyway my new issue doesn't have any TypeScript dependency in it, so I will leave it open in parallel to your issue.

[MikeMcC399]

Steps to reproduce

git clone https://github.com/cypress-io/cypress
cd cypress
n auto
npm install yarn@latest -g
yarn
cd npm/vite-dev-server
yarn test

Logs

yarn test
yarn run v1.22.22
$ yarn test-unit
$ mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

Full Log

yarn test
yarn run v1.22.22
$ yarn test-unit
$ mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.


  initCypressTests
    support file / spec file loading
      ✔ doesn't load the support file if one is not provided
      ✔ load the support file along with the spec
      empty devServerPublicPathRoute
        ✔ load the support file along with the spec
      windows
        ✔ doesn't load the support file if one is not provided
        ✔ load the support file along with the spec
        empty devServerPublicPathRoute
          ✔ load the support file along with the spec

  resolveConfig
    config resolution: v4
📦 Found package.json for project vite4-inspect.
📦 Creating a new node_modules cache dir at /tmp/cy-system-tests-node-modules/vite4-inspect/node_modules
📦 node_modules symlink created at /tmp/cy-projects/vite4-inspect/node_modules
/tmp/cy-projects/vite4-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884953398" in /tmp/cy-projects/vite4-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning Ignored scripts due to flag.
📦 Copying yarn.lock and fixing relative paths for vite4-inspect
      ✔ with <project-root>/vite.config.js (17001ms)
📦 Found package.json for project vite4-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite4-inspect/node_modules
/tmp/cy-projects/vite4-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884970377" in /tmp/cy-projects/vite4-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite4-inspect
      ✔ with component.devServer.viteConfig provided (300ms)
📦 Found package.json for project vite4-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite4-inspect/node_modules
/tmp/cy-projects/vite4-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884970698" in /tmp/cy-projects/vite4-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite4-inspect
      ✔ calls viteConfig if it is a function (298ms)
    file watching
📦 Found package.json for project vite4-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite4-inspect/node_modules
/tmp/cy-projects/vite4-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884971005" in /tmp/cy-projects/vite4-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite4-inspect
      ✔ should be disabled in run mode
📦 Found package.json for project vite4-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite4-inspect/node_modules
/tmp/cy-projects/vite4-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884971309" in /tmp/cy-projects/vite4-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite4-inspect
      ✔ uses defaults in open mode
    config resolution: v5
📦 Found package.json for project vite5-inspect.
📦 Creating a new node_modules cache dir at /tmp/cy-system-tests-node-modules/vite5-inspect/node_modules
📦 node_modules symlink created at /tmp/cy-projects/vite5-inspect/node_modules
/tmp/cy-projects/vite5-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884971623" in /tmp/cy-projects/vite5-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning Ignored scripts due to flag.
📦 Copying yarn.lock and fixing relative paths for vite5-inspect
      ✔ with <project-root>/vite.config.js (25007ms)
📦 Found package.json for project vite5-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite5-inspect/node_modules
/tmp/cy-projects/vite5-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884996798" in /tmp/cy-projects/vite5-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite5-inspect
      ✔ with component.devServer.viteConfig provided (1079ms)
📦 Found package.json for project vite5-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite5-inspect/node_modules
/tmp/cy-projects/vite5-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884997883" in /tmp/cy-projects/vite5-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite5-inspect
      ✔ calls viteConfig if it is a function (602ms)
    file watching
📦 Found package.json for project vite5-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite5-inspect/node_modules
/tmp/cy-projects/vite5-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884998750" in /tmp/cy-projects/vite5-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite5-inspect
      ✔ should be disabled in run mode
📦 Found package.json for project vite5-inspect.
📦 node_modules symlink created at /tmp/cy-projects/vite5-inspect/node_modules
/tmp/cy-projects/vite5-inspect/yarn.lock
📦 Writing yarn.lock with fixed relative paths to temp dir
📦 Running "yarn install --prefer-offline --ignore-scripts --frozen-lockfile --update-checksums --ignore-engines --cache-folder=/tmp/cy-system-tests-yarn-cache/1718884999183" in /tmp/cy-projects/vite5-inspect
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.
📦 Copying yarn.lock and fixing relative paths for vite5-inspect
      ✔ uses defaults in open mode


  16 passing (46s)

Done in 49.42s.