Mistaken ESM as CJS when using vitest

[andy1li]

Describe the bug

Although npm run dev/build works perfectly, npm run test (vitest) throws out an error:

SyntaxError: Named export 'parse' not found. The requested module 'css-what' is a CommonJS module, which may not support all module.exports as named exports.

After some investigation, the offending code (deep in my dependency chain) turns out to be:

import { parse } from "css-what"

It seems that somehow vitest incorrectly considers a perfect es module (css-what) as cjs, thus refusing to import it.

---

However, commenting out vite-plugin-svelte in vite.config can make the error go away in vitest (and obviously breaks my code):

export default defineConfig({
  // plugins: [svelte()],
  test: { globals: true, environment: 'happy-dom' },
})

---

Dependency chain:

My code:

import { generateJSON } from '@tiptap/html'

@tiptap/html:

import { createHTMLDocument, parseHTML } from 'zeed-dom';

zeed-dom:

import { parse } from "css-what"

Reproduction

https://stackblitz.com/github/andy1li/vitest-bug-report

1. npm run dev to see that vite and svelte work fine:

The root page should display some json, indicating that the miminal code works.

2. npm run test to reproduce the error msg:

SyntaxError: Named export 'parse' not found. The requested module 'css-what' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'css-what';
const { parse } = pkg;

3. commenting out vite-plugin-svelte in vite.config, then npm run tset won't raise any error:

export default defineConfig({
  // plugins: [svelte()],
  test: { globals: true, environment: 'happy-dom' },
})

Logs

vite:resolve 2.43ms css-what -> /Users/andy/Desktop/vitest-bug-report/node_modules/.pnpm/css-what@6.1.0/node_modules/css-what/lib/es/index.js +55ms
 ❯ src/tiptap.test.ts (0)

System Info

Stackblitz:
  System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    vite: latest => 3.0.4 
    vitest: latest => 0.20.3 

Mac:
  System:
    OS: macOS 11.6.7
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Memory: 18.48 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    vite: latest => 3.0.4
    vitest: latest => 0.20.3

Severity

blocking an upgrade

[andy1li]

Sorry, not vite-plugin-svelte's problem.

It's vitest who recently added a deps.registerNodeLoader option (vitest-dev/vitest#1751) that's breaking my tests...