TypeError: _app_site_components_home_megaMenu_styled__WEBPACK_IMPORTED_MODULE_8__.styles.bar is not a function

[kianianbohi]

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'.

[kianianbohi]

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?

[kianianbohi]

yes i have it
and both of them in main root

[kianianbohi]

yes i have it
and both of them in main root

[nmn]

@kianianbohi You're not providing enough information for us to help you. You haven't even explained what kind of framework you're using.

[kianianbohi]

when i paste my next.cnfig, then i use next.js
but no problem, i put my package.json here,
and all of my files and directory like your project next-app-dir-test

{
  "name": "next-app-dir-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "predev": "rimraf .next",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@next/mdx": "^14.0.3",
    "@stylexjs/open-props": "^0.4.1",
    "@stylexjs/stylex": "^0.4.1",
    "@types/mdx": "^2.0.10",
    "bright": "^0.8.4",
    "next": "14.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swiper": "^11.0.5",
    "uuid": "^9.0.0",
    "zustand": "^4.4.0",
    "immer": "^10.0.2",
    "react-hook-form": "^7.41.5",
    "react-toastify": "^9.1.3",
    "@tanstack/react-query": "^4.35.7",
    "@tanstack/react-query-devtools": "^4.35.7"
  },
  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "@babel/core": "^7.23.2",
    "@babel/plugin-syntax-flow": "^7.22.5",
    "@babel/plugin-syntax-jsx": "^7.22.5",
    "@babel/plugin-syntax-typescript": "^7.22.5",
    "@stylexjs/babel-plugin": "^0.4.1",
    "@stylexjs/eslint-plugin": "^0.4.1",
    "@stylexjs/nextjs-plugin": "^0.4.1",
    "@types/node": "20.8.10",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "eslint": "8.52.0",
    "eslint-config-next": "14.0.1",
    "rimraf": "^5.0.5",
    "typescript": "5.2.2",
    "prettier": "2.7.1"
  }
}

[nmn]

This is not helpful enough. Please share a small reproduction of the issue. Specially since you're using next-app-dir-test as a starting point, you should be able to add 1 or two component files and share it as an example.