facebook / facebook/stylex

Unable to use a function from an external package in stylex.create

Open
#1,436 3 comments 1 reaction 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

I'm running into the following error when trying to use a function exported by another package inside of a `stylex.create` call. I wasn't sure if I might be missing a config option in the Vite config or if this is something that may not be expected to work at the moment.

```ts
const styles = stylex.create({
title: {
fontSize: rem(100),
}
});
```

```sh
[vite] Internal server error: /path/to/example/src/Welcome/Welcome.tsx: Could not resolve the path to the imported file.
Please ensure that the theme file has a .stylex.js or .stylex.ts extension and follows the
rules for defining variables:

https://stylexjs.com/docs/learn/theming/defining-variables/#rules-when-defining-variables

> 1 | import { Title, Text, Anchor, rem } from "@mantine/core";
| ^^^
2 | import * as stylex from "@stylexjs/stylex";
3 |
4 | import { colors } from "../vars.stylex";
Plugin: @stylexjs/unplugin
File: /path/to/example/src/Welcome/Welcome.tsx
at File.buildCodeFrameError (/path/to/node_modules/.pnpm/@babel+core@7.28.5/node_modules/@babel/core/lib/transformation/file/file.js:193:12)
at NodePath.buildCodeFrameError (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/index.js:117:21)
at transformStyleXCreate (/path/to/node_modules/.pnpm/@stylexjs+babel-plugin@0.17.4/node_modules/@stylexjs/babel-plugin/lib/index.js:6579:29)
at PluginPass.CallExpression (/path/to/node_modules/.pnpm/@stylexjs+babel-plugin@0.17.4/node_modules/@stylexjs/babel-plugin/lib/index.js:8064:9)
at newFn (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/visitors.js:170:14)
at NodePath._call (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/context.js:49:20)
at NodePath.call (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/context.js:39:18)
at NodePath.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/context.js:88:31)
at TraversalContext.visitQueue (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:91:16)
at TraversalContext.visitSingle (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:66:19)
at TraversalContext.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:115:19)
at traverseNode (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/traverse-node.js:131:17)
at NodePath.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/context.js:94:52)
at TraversalContext.visitQueue (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:91:16)
at TraversalContext.visitMultiple (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:62:17)
at TraversalContext.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:113:19)
at traverseNode (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/traverse-node.js:131:17)
at NodePath.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/context.js:94:52)
at TraversalContext.visitQueue (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:91:16)
at TraversalContext.visitMultiple (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:62:17)
at TraversalContext.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:113:19)
at traverseNode (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/traverse-node.js:131:17)
at NodePath.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/path/context.js:94:52)
at TraversalContext.visitQueue (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:91:16)
at TraversalContext.visitSingle (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:66:19)
at TraversalContext.visit (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/context.js:115:19)
at traverseNode (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/traverse-node.js:131:17)
at traverse (/path/to/node_modules/.pnpm/@babel+traverse@7.28.5/node_modules/@babel/traverse/lib/index.js:53:34)
at transformFile (/path/to/node_modules/.pnpm/@babel+core@7.28.5/node_modules/@babel/core/lib/transformation/index.js:80:31)
at transformFile.next ()
at run (/path/to/node_modules/.pnpm/@babel+core@7.28.5/node_modules/@babel/core/lib/transformation/index.js:25:12)
at run.next ()
at transform (/path/to/node_modules/.pnpm/@babel+core@7.28.5/node_modules/@babel/core/lib/transform.js:22:33)
at transform.next ()
at step (/path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:261:32)
at /path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:223:11)
at /path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:189:28
at /path/to/node_modules/.pnpm/@babel+core@7.28.5/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
at /path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:113:33
at step (/path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:287:14)
at /path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/path/to/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:223:11)
```

### Expected behavior

External functions should return values as expected and not throw an error when used inside `stylex.create`.

### Steps to reproduce

Import and use a function from an external package to return a value used by a style inside `stylex.create`. The `fontSize` line can be uncommented in the following reproducer to see the issue.

https://stackblitz.com/edit/vitejs-vite-2bxmsy6c?file=src%2Findex.tsx

### Test case

_No response_

### Additional comments

_No response_

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.