facebook / facebook/stylex

[unplugin] Vitest not compiling external package styles with babel-plugin

Open
#1,399 0 comments 2 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
10.3k
Forks
481
Avg merge
3d 8h
Merged PRs (30d)
13

Description

## Describe the issue

When running vitest with the vite unplugin and being dependent on external packages using stylex, it errors with

```
Error: Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.
````

It runs perfectly fine when not using any external packages.

## Versions

"@stylexjs/unplugin": "0.17.3",
"react": "19.2.0",
"react-dom": "19.2.0",
"vite": "7.2.6",
"vite-tsconfig-paths": "5.1.4",
"vitest": "4.0.14"

## Setup

### Vite Config
```js
import stylex from "@stylexjs/unplugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

export default defineConfig({
plugins: [
stylex.vite({
test: true,
useCSSLayers: true,
// @ts-expect-error seems like this is missing from the stylex types
externalPackages: ["@stark-bp/stylex", "@stark-bp/react", "@stark-bp/react-icons"],
}),
react(),
],
test: {
include: ["./src/*.spec.tsx"],
watch: false,
globals: true,
environment: "happy-dom",
},
});
```

### Cases
```js
import stylex from "@stylexjs/stylex";
import "../styles.css";

const styles = stylex.create({
root: {
backgroundColor: "blue",
},
});

export const Test = () =>

stylex
;
```
```js
import { Box } from "@stark-bp/react/box";
import "../styles.css";

export const TestExternal = () => stylex;
```

### Test
```js
import { render } from "@testing-library/react";
import { Test } from "./Test";
import { TestExternal } from "./TestExternal";

it("renders without crashing", async () => {
render(); // Works
});

it("renders without crashing", async () => {
render(); // Fails
});
```

### Error
```
Error: Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.
❯ errorForFn node_modules/@stylexjs/stylex/lib/es/stylex.mjs:133:28
❯ Module.stylexDefineVars node_modules/@stylexjs/stylex/lib/es/stylex.mjs:145:9
❯ node_modules/@stark-bp/stylex/dist/tokens.stylex.js:2:34
❯ src/stylex/TestExternal.tsx:1:1
1| import { Box } from "@stark-bp/react/box";
| ^
2| import "../styles.css";
3|
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.