[NextJS] Only static values are allowed inside of a stylex.create() call

[ebitogu]

Problem Description:

I am encountering an issue with Next.js 14.0.4 when using Stylex. The error message I'm receiving is:

Error ...src/app/common/components/ui/Card/index.js: Only static values are allowed inside of a stylex.create() call.

Folder Structure:

As you can see above I have my globalToken.stylex.js file directly under the app folder. Its contents mirror those of the globalToken.stylex.ts file in the next-js-example folder.

Code Snippets:

Here is the content of my CardTokens.stylex.js file:

import * as stylex from '@stylexjs/stylex';

export const tokens = stylex.defineVars({
    arrowTransform: 'translateX(0)',
});

And the relevant section in the Card/index.js file:

import React from 'react';
import stylex from '@stylexjs/stylex';
import { globalTokens as $, spacing, text } from 'app/globalTokens.stylex';
import { colors } from '@stylexjs/open-props/lib/colors.stylex';
import { tokens } from './CardTokens.stylex';

const MOBILE = '@media (max-width: 700px)';
const REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)';

const bgDefault = `rgba(${$.cardR}, ${$.cardG}, ${$.cardB}, 0)`;

const styles = stylex.create({
    link: {
        display: {
            default: 'flex',
            [MOBILE]: 'block',
        },
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'column',
        borderRadius: spacing.xs,
        backgroundColor: {
            // default: bgDefault,
            // ':hover': `rgba(${$.cardR}, ${$.cardG}, ${$.cardB}, 0.1)`,
        },

Issue:

The error disappears when I comment out the line:

 import { globalTokens as $, spacing, text } from 'app/globalTokens.stylex';

Is the issue related to globalToken not being a relative import? This seems unlikely as all values used are static, and nothing is dynamic.

I would greatly appreciate any insights or assistance in resolving this issue. Thank you for your time and help.

[nedjulius]

Hey, I think this is a duplicate of issue #40

It is related to the module path aliases

[nmn]

import { globalTokens as $, spacing, text } from 'app/globalTokens.stylex';

This is not a relative import and so it won't work at the moment. Use ../, i.e. a relative path to make it work. If that fixes the issue, it's a duplicate of #40 as mentioned by @nedjulius.

BTW, will be fixing this issue soon.

[ebitogu]

Wow! @nmn You were right, the following was what worked for me:

import { globalTokens as $, spacing, text } from '../../../../globalTokens.stylex';

Good to know this and thanks for the assurance that it will be fixed soon. Thank you for your time

[nmn]

Closing this as it's a duplicate of #40