TypeError: _app_site_components_home_megaMenu_styled__WEBPACK_IMPORTED_MODULE_8__.styles.bar is not a function

[mehrdadKianiAnbohi]

i have problem in stylex, when i use stylex.props for call function, get this error: TypeError: app_site_components_home_megaMenu_styled__WEBPACK_IMPORTED_MODULE_8_.styles.bar is not a function

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

export const styles = stylex.create({
  container: {
    ...theme.row,
    boxShadow:'0 5px 15px rgba(0, 0, 0, 0.06)',
    padding:'16px 16px',
    borderRadius:16,
    marginBottom:32,
  },
  bar: (height) => ({
    height,
    // The function body must be an object literal
    // -- { return {} } is not allowed
  }),
});

<div {...stylex.props(styles.container)}>
  <div {...stylex.props(styles.bar(20))} >new products</div>
</div>

[nedjulius]

hey, it would be helpful if you provided more information about your configuration and environment.

[nmn]

The first problem I immediately see is: ...theme.row,

This is not allowed. stylex.create is like a macro. The values passed into it must be statically defined in the same file.

---

Also, looking carefully at the err, I see

`styles.bar` is not a function

...theme.row, is probably breaking in the file where the styles are defined, causing the styles.bar function to not exist.

---

padding:'16px 16px', is redundant, you can use padding: 16 or padding: '16px'.

[mehrdadKianiAnbohi]

i remove ...theme.row, but i have styles.bar is not a function yet

this is my next.config.js
/** @type {import('next').NextConfig} */
const stylexPlugin = require("@stylexjs/nextjs-plugin");
const withMDX = require("@next/mdx")();

const nextConfig = {
  // Configure `pageExtensions` to include MDX files
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  // Optionally, add any other Next.js config below
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

module.exports = stylexPlugin({
  rootDir: __dirname,
})(withMDX(nextConfig));

[nmn]

Do you also have the .babelrc file in your project?

What are the locations of the two files?