vitest entrypoint fails: jest-styled-components/vitest uses require('vitest') which is ESM-only

[esetnik]

Bug Report

Version

jest-styled-components@7.3.1, vitest@4.1.0

Description

The new /vitest entrypoint added in 7.3.x cannot be imported in a Vitest project because it uses require('vitest'), but Vitest is ESM-only and throws an error when loaded via CJS require().

vitest/index.js:

const { expect, beforeEach } = require('vitest');  // ← causes the crash

Because the package has "type": "commonjs", Node resolves this to vitest/index.cjs, which is Vitest's own CJS shim that intentionally throws:

Error: Vitest cannot be imported in a CommonJS module using require(). Please use "import" instead.

Steps to Reproduce

1. Install jest-styled-components@7.3.1 in a Vitest project
2. Add import 'jest-styled-components/vitest' to your setup file
3. Run vitest

Error

Error: Vitest cannot be imported in a CommonJS module using require(). Please use "import" instead.

  ❯ Object.<anonymous> node_modules/vitest/index.cjs:1:7
  ❯ node_modules/jest-styled-components/vitest/index.js:1:32

Workaround

Import the main package entry instead of /vitest. The src/index.js main entry uses typeof beforeEach / typeof expect guards on globals rather than require('vitest'), so it works correctly when Vitest's globals: true is set:

// Instead of: import 'jest-styled-components/vitest'
import 'jest-styled-components'

Suggested Fix

The /vitest entrypoint should use ESM import syntax rather than CJS require. Options:

1. Add an exports field with an "import" condition pointing to an .mjs version of the entrypoint
2. Convert vitest/index.js to ESM (.mjs extension or scoped "type": "module")

// vitest/index.mjs
import { expect, beforeEach } from 'vitest';
import toHaveStyleRule from '../src/toHaveStyleRule.js';
import styleSheetSerializer from '../src/styleSheetSerializer.js';
import { resetStyleSheet } from '../src/utils.js';

beforeEach(resetStyleSheet);
expect.addSnapshotSerializer(styleSheetSerializer);
expect.extend({ toHaveStyleRule });

export { styleSheetSerializer, resetStyleSheet };

[quantizor]

Thank you for reporting!

[jdeniau]

I was going to report the same thing. I'm using vitest 4 too.

[quantizor]

Hi @esetnik and @jdeniau! A fix for this has been published as a prerelease — please try it out:

npm install jest-styled-components@7.3.2-prerelease.0

The /vitest entrypoint is now ESM (via a scoped package.json), so import 'jest-styled-components/vitest' should work correctly with Vitest 4.

Fix PR: #460

Let us know if it resolves the issue for you!

[jdeniau]

Hi @quantizor .

It does work fine with styled-component 6.3.12.
With 6.3.8 the className are not handled properly.

[esetnik]

Tested 7.3.2-prerelease.0 with Vitest and styled-components — the /vitest entrypoint works correctly. All 133 tests in our suite pass. The scoped package.json with "type": "module" resolves the ESM import issue. Thanks @quantizor!

[quantizor]

Hi @quantizor .

It does work fine with styled-component 6.3.12. With 6.3.8 the className are not handled properly.

Thanks for reporting @jdeniau, I'll look into this before releasing.

[quantizor]

@jdeniau I think this is because that version added exports to package.json which we later removed. Just update s-c, 6.3.9 or later will fix it.

[jdeniau]

@quantizor yes that's what I did.
Not a problem for me, I just wanted to report to let you know and write it in the changelog or something.