Mistaken ESM as CJS when using svelte

[andy1li]

Describe the bug

Although npm run dev/build works perfectly, npm run test 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 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

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

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

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;

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

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Duplicate of #1753

[sheremet-va]

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

css-what is not a perfect ES module, by the way. It doesn't have correct exports field or type: "module".

[andy1li]

Thank you, @sheremet-va, for the prompt reply!

My bad. I presumed too much, because run dev works...

Would you kindly give me some suggestions about how to make it work with vitest?

Much obliged.

[sheremet-va]

Would you kindly give me some suggestions about how to make it work with vitest?

Workaround is described in linked issue:

Setting deps.registerNodeLoader to false (to skip the new Node logic) allows the test to run again.

We might disable in in the future by default, seeing that ecosystem still is not ready for ESM.

[andy1li]

Got it. Works now!

Thank you so much, @sheremet-va!

[andy1li]

#1751

Ah, three days ago...

Please do set the default as false. Thanks a lot! 😂

[sheremet-va]

Closed as duplicate