Unable to use a function from an external package in stylex.create
- 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
Assessment
This issue has not been assessed yet.