Vitest v3.0.0 is not happy with @emotion/styled

[bnussman]

Current behavior:

I'm trying to run a Vitest unit test suite on a repo that uses "@emotion/react": "^11.14.0" and "@emotion/styled": "^11.14.0"

Vitest is complaining and will not run the tests because of the following reason

SyntaxError: Cannot use import statement outside a module
 ❯ Object.<anonymous> node_modules/@mui/styled-engine/node/index.js:47:38

Module /Users/bnussman/Development/emotion-vitest/node_modules/@emotion/styled/dist/emotion-styled.development.esm.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@emotion/styled" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "@emotion/styled"
        ]
      }
    }
  }
}

To reproduce:

1. Go to https://github.com/bnussman/emotion-vitest/tree/main
2. Clone the repo
3. cd into the repo
4. Install dependencies with bun install
5. Run bun run test
6. Observe the issue

Expected behavior:

• emotion to play nicely with Vitest out of the box

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.14.0

[JoaoCnh]

My tests are running with emotion if I choose to not include @emotion/react and @emotion/styled in the deps -> web -> optimizer.
I do lose a few seconds of performance from what I can see. Ideally they would be included for some performance gains on CI but I'm affected by the same problem you shared.

[bnussman]

I tried Vitest 3.0.3 and I'm no longer having this issue. 🎉

Not sure what changed... Maybe vitest-dev/vitest#7271?

Closing this because the issue is resolved