Vite 5: The CJS build of Vite's Node API is deprecated

[gkiely]

Describe the bug

Vanilla extract appears to be using CJS which vite no longer supports

Reproduction

https://codesandbox.io/p/sandbox/eloquent-bird-9dl86m

System Info

System:
    OS: macOS 12.7
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.35 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.2.0 - ~/.volta/tools/image/node/20.2.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 9.6.6 - ~/.volta/tools/image/node/20.2.0/bin/npm
    bun: 1.0.11 - ~/.bun/bin/bun
    Watchman: 2023.04.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 114.1.52.129
    Chrome: 119.0.6045.159
    Edge: 119.0.2151.58
    Safari: 17.0
  npmPackages:
    @vanilla-extract/vite-plugin: ^3.9.1 => 3.9.1 
    vite: ^5.0.0 => 5.0.0

Used Package Manager

npm

Logs

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 (/Users/grantkiely/code/example/node_modules/vite/index.cjs:32:3)
    at Object.<anonymous> (/Users/grantkiely/code/example/node_modules/vite/index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1255:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at Object.<anonymous> (/Users/grantkiely/code/example/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.dev.js:6:12)
    at Module._compile (node:internal/modules/cjs/loader:1255:14)

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[askoufis]

The CJS API is still supported, it's just deprecated. There's no rush to fix it, but we might as well do it sooner rather than later.

[markdalgleish]

Can we do a dynamic import of Vite in the async config plugin hook and then store the result in a variable? That's how we dealt with this in the Remix Vite plugin.

[jxom]

Alternative could be for the ESM output to have .mjs extension instead of .esm.js, as Vite seems to treat all .js files as CJS if package.json#type is not "module".

[NovaAstra]

For me, who is a console freak, this is unacceptable.😊

[arturmuller]

For me, who is a console freak, this is unacceptable.😊

For anyone who is bothered by the — rather dramatic — warning that Vite prints to the console, you can squash it by setting the VITE_CJS_IGNORE_WARNING env var to true as explained in Vite's troubleshooting docs.

[mrm007]

The issue wasn't just lazy loading vite, which we already do in some places:

vanilla-extract/packages/integration/src/compiler.ts

Line 57 in 3a2429c

const vite = await import('vite');

But Preconstruct converts that to a Promise.resolve().then(() => require('vite') (as seen here).

This should be fixed in #1262.