Error: stylex.create should never be called. It should be compiled away.

[Tushant]

I am trying to use stylex in my nextjs(14.0.4) project, however, I am stuck with attached issue.

import * as stylex from '@stylexjs/stylex';
import { useTheme } from "@/context/theme-context/ThemeContext";


const getButtonStyles = (theme, variant, color, state) => {
  const {
    background,
    borderColor,
    color: textColor,
  } = theme.colors.button[variant][color][state];
  return {
    backgroundColor: background,
    color: textColor,
    border: `1px solid ${borderColor}`,
  };
};

const styles = stylex.create({
  button: (theme, variant, color, state = 'normal') => ({
    ...getButtonStyles(theme, variant, color, state)
  }),
});
function Button ({
  children,
  onClick,
  className = "",
  variant = "solid",
  color = "primary",
  state = "normal",
  size = "medium",
  disabled = false,
  rounded = "small",
  fullWidth = false,
  type = "button",
  icon,
  iconPosition,
  context = "default",
  os = {},
  ...rest
}) {
  const theme = useTheme();

  const buttonClasses = `
    border-none
    px-${size === "small" ? 2 : size === "medium" ? 4 : 6}
    py-${size === "small" ? 1 : size === "medium" ? 2 : 3}
    ${size === "small" && "text-xs"}
    ${size === "medium" && "text-base"}
    ${size === "large" && "text-lg"}
    ${rounded === "small" && "rounded-sm"}
    ${rounded === "medium" && "rounded-md"}
    ${rounded === "large" && "rounded-lg"}
    ${rounded === "xlarge" && "rounded-xl"}
    ${rounded === "full" && "rounded-full"}
    ${fullWidth && "w-full"}
    ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
    ${className}
  `;

  // const buttonStyles = {
  //   ...styles.button,
  //   ...os,
  // };

  return (
    <button
      {...stylex.props(styles.button(theme, variant, color, state))}
      as="button"
      disabled={disabled}
      onClick={onClick}
      type={type}
      className={buttonClasses}
    >
      {iconPosition === "left" && icon}
      {children}
      {iconPosition === "right" && icon}
    </button>
  );
};

[nmn]

This specific error is happening because the compiler is not configured correctly. I cannot help further without know the details of how your project is set up. You should be able to use the NextJS example in the repo as a template to get started.

But also, the code you have written won't work anyway. It's using very dynamic patterns that don't work with a compile-time approach.

---

You cannot do this:

const styles = stylex.create({
  button: (theme, variant, color, state = 'normal') => ({
    ...getButtonStyles(theme, variant, color, state)
  }),
});

StyleX is a compiler. stylex.create calls are compiled away. This means the styles within the stylex.create call must be statically analysable. You can use local constants and simple math expressions. You cannot randomly import values from other modules and use them.

Only use functions within stylex.create, for dynamic styles. Styles that have to be generated at runtime because they cannot be known at compile time. Even in those cases only the values can be dynamic. The keys have to be static. Also, the function syntax cannot contain a { } body and must return an object directly () => ({}).

What you're trying to achieve is much easier and more readable if you do it the way StyleX wants you to:

1. Use StyleX Themes. Don't use the useTheme hook which is Javascript based and won't work with server components anyway.
2. Define separate style objects for color and state.

Don't overcomplicate things. Keep things simple. Write styles locally in static objects. Use them.

[nmn]

Ok. I'll try to list all the issues as short as possible:

First some set up issues:

1. Remove styled-components from your config. It might be breaking things
2. Add a .babelrc file to your project. Copy the one from the example nextjs app in the repo. Make the rootDir value match the one you're using in the next.config.js.
3. "@/ imports don't work for importing themes in stylex yet. You'll need to use a relative path import ./my-vars.

Next let's tackle the rest:

Replace your theme file with a my-vars.stylex.ts file. Use the stylex.defineVars API to define variables as flat objects. Simply define variables and give them a default value.

Then in a different file use the stylex.createTheme function to create themes. You'll create separate themes for solidPrimary, solidGrey, outlineGrey, outlinePrimary etc.

Then, in your component, import the variables from my-vars.stylex.ts and you can use the values directly within your stylex.create() call. Don't use functions to define styles. Use simple, flat objects.

Also, import the various themes. Apply the theme you need based on props. Apply the same styles.

---

Again, please look at the NextJS example in the repo. And at this project: https://github.com/nmn/nextjs-app-dir-stylex

[Tushant]

First of all thanks for your time and help. I am taking the repo you provided as a reference. I created vars using stylex.defineVars but in a slight different way. Not sure if this is the good way which I will know as I work more.

const DARK = "@media (prefers-color-scheme: dark)";

// BRAND COLOR
export const brandColors = stylex.defineVars({
  
  primary: { default: "#5a6399", [DARK]: "#5a6399" },
  secondary: { default: "#ea9a7e", [DARK]: "#ea9a7e" },
});

// TEXT COLOR
export const textColors = stylex.defineVars({
  
  primary: { default: "#444", [DARK]: "#ffffff" },
  mono: { default: "#333", [DARK]: "#ccc" },
  hover: { default: "#888", [DARK]: "#bbb" },
  focused: { default: "#66c", [DARK]: "#88f" },
  disabled: { default: "#aaa", [DARK]: "#444" },
  selected: { default: "#4CAF50", [DARK]: "#81C784" },
});

// BACKGROUND COLOR
export const backgroundColors = stylex.defineVars({
  
  primary: { default: '#ffffff', [DARK]: '#000000'},
  secondary: { default: '#f1f1f14d', [DARK]: '#000000'},
})

// MENU COLOR
export const menuColors = stylex.defineVars({
  
  primaryNormalBackground: { default: '#ffffff', [DARK]: '#000000' },
  primaryNormalColor: { default: '#222222', [DARK]: '#ffffff' },
  primaryNormalBorderColor: { default: 'transparent', [DARK]: 'transparent' },

  primaryHoverBackground: { default: '#F0EEE8', [DARK]: '#000000' },
  primaryHoverColor: { default: '#222222', [DARK]: '#ffffff' },
  primaryHoverBorderColor: { default: 'transparent', [DARK]: 'transparent' },

  primarySelectedBackground: { default: '#222222', [DARK]: '#000000' },
  primarySelectedColor: { default: '#ffffff', [DARK]: '#ffffff' },
  primarySelectedBorderColor: { default: 'transparent', [DARK]: 'transparent' },
})

// similar for the buttons with solidGrayNormalBackground, solidGrayNormalColor, solidGrayNormalBorderColor, solidGrayHoverBackground and so on as buttonColors

however, I am facing multiple issue after adding babelrc;

1. turbo is not working (it's not a big deal)
2. next/font issue is a problem for me. ("next/font" requires SWC although Babel is being used due to a custom babel config being present.)

once I fix the issue I will put my approach here so I can take your valuable feedback :) Thanks again for your time and help!

[nmn]

Your new code example looks good!

1. turbo issues are probably unrelated. It's probably a configuration error on your end.
2. next/font - This is a limitation and I don't think we have a solution for this.

[stellaryrock]

I had the same issue and it was because I named the file as "babelrc.js". I forgot to add a dot(.) in the front of the filename. It should be ".babelrc.js".
you can check your .babelrc.js file name. @Tushant

[nexoracontrol-ops]

This specific error is happening because the compiler is not configured correctly. I cannot help further without know the details of how your project is set up. You should be able to use the NextJS example in the repo as a template to get started.

But also, the code you have written won't work anyway. It's using very dynamic patterns that don't work with a compile-time approach.

---

You cannot do this:

const styles = stylex.create({

  button: (theme, variant, color, state = 'normal') => ({

    ...getButtonStyles(theme, variant, color, state)

  }),

});

StyleX is a compiler. stylex.create calls are compiled away. This means the styles within the stylex.create call must be statically analysable. You can use local constants and simple math expressions. You cannot randomly import values from other modules and use them.

Only use functions within stylex.create, for dynamic styles. Styles that have to be generated at runtime because they cannot be known at compile time. Even in those cases only the values can be dynamic. The keys have to be static. Also, the function syntax cannot contain a { } body and must return an object directly () => ({}).

What you're trying to achieve is much easier and more readable if you do it the way StyleX wants you to:

1. Use StyleX Themes. Don't use the useTheme hook which is Javascript based and won't work with server components anyway.

2. Define separate style objects for color and state.

Don't overcomplicate things. Keep things simple. Write styles locally in static objects. Use them.

[yug-delemont]

'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

I face the same error in my react app I don't understand, why is not working in my app can you help me find a solution to this?

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

const styles = stylex.create({
base: {
fontSize: 16,
lineHeight: 1.5,
color: 'rgb(60,60,60)',
},
highlighted: {
color: 'rebeccapurple',
},
});

HELLO WORLD

`

[yug-delemont]

Thanks for replying, I hope the below information helps you to understand which error I am facing.

This is my App.tsx

This is my package.json

Error

As per https://stylexjs.com i follow defining and using stylex.js but it's not working in my app also I watched many YouTube videos but it's still not working.

[nmn]

Where is your bundler set up? I see the Babel plugin but none of the bundler plugins.

[yug-delemont]

Can i need to set-up Webpack in my app.

npm install --save-dev @stylexjs/webpack-plugin

webpack.config.js

const StylexPlugin = require('@stylexjs/webpack-plugin');
const path = require('path');

const config = (env, argv) => ({
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, '.build'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // Ensure that the stylex plugin is used before Babel
    new StylexPlugin({
      filename: 'styles.[contenthash].css',
      // get webpack mode and set value for dev
      dev: argv.mode === 'development',
      // Use statically generated CSS files and not runtime injected CSS.
      // Even in development.
      runtimeInjection: false,
      // optional. default: 'x'
      classNamePrefix: 'x',
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root directory of your project
        rootDir: __dirname,
      },
    }),
  ],
  cache: true,
});

module.exports = config;

if i use this code as per https://stylexjs.com/docs/learn/installation/ after it work and also can you guide me more how can i use this webpack after setup?

[nmn]

This webpack config is for a vanilla project where you're setting up bundling manually. If you're using a custom setup like create-react-app, you'd need a different process. We haven't tackled that yet.

I'm working on a cli for StyleX which will help integrate Stylex into arbitrary setups without a custom bundler integration every time. This will become an easy escape hatch.

[yug-delemont]

Okay, I move create-react-app to Vite app.