defineVars gives error "A stylex namespace must be an object"

[kesha-antonov]

Describe the issue

Hi

I have app with esbuild.
I followed guide on this page https://stylexjs.com/docs/learn/theming/using-variables/
On build example code gives error

✘ [ERROR] /Users/kesha/projects/nano_gym_tma/src/app/styles.tsx: A stylex namespace must be an object. [plugin esbuild-plugin-stylex]

    node_modules/@stylexjs/babel-plugin/lib/index.js:2947:10:
      2947 │     throw new Error(messages.ILLEGAL_NAMESPACE_VALUE);
           ╵           ^

How to fix it?

Expected behavior

No error

Steps to reproduce

Use build.mjs

import * as esbuild from 'esbuild'
import copyStaticFiles from 'esbuild-copy-static-files'
import stylexPlugin from '@stylexjs/esbuild-plugin'
import { clean } from 'esbuild-plugin-clean'
import path from 'path'
import { fileURLToPath } from 'url'
import imagemin from 'imagemin'
import imageminMozjpeg from 'imagemin-mozjpeg'
import imageminPngquant from 'imagemin-pngquant'
import fs from 'fs'
import { networkInterfaces } from 'os'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
import stylePlugin from 'esbuild-style-plugin'
import konstaConfig from 'konsta/config'
import svgr from 'esbuild-plugin-svgr'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

const STYLEX_BUNDLE_PATH = path.resolve(
  __dirname,
  '..',
  'public/stylex.css'
)

const IS_PRODUCTION = process.env.NODE_ENV === 'production'

const IS_ANALYZE_ENABLED = false

const getLocalIpAddress = () => {
  const nets = networkInterfaces()
  const results = Object.create(null) // Or just '{}', an empty object

  for (const name of Object.keys(nets))
    for (const net of nets[name]) {
      // Skip over non-IPv4 and internal (i.e. 127.0.0.1) addresses
      // 'IPv4' is in Node <= 17, from 18 it's a number 4 or 6
      const familyV4Value = typeof net.family === 'string' ? 'IPv4' : 4
      if (net.family === familyV4Value && !net.internal) {
        if (!results[name])
          results[name] = []
        results[name].push(net.address)
      }
    }

  return results
}

const imageMinifyPlugin = {
  name: 'image-minify',
  setup(build) {
    build.onLoad({ filter: /\.(png|jpg|jpeg)$/ }, async args => {
      const buffer = await fs.promises.readFile(args.path)
      const optimizedBuffer = await imagemin.buffer(buffer, {
        plugins: [
          imageminMozjpeg(),
          imageminPngquant(),
        ],
      })
      return { contents: optimizedBuffer, loader: 'file' }
    })
  },
}

const config = {
  entryPoints: ['src/app/index.tsx'],
  outfile: 'public/index.js',
  bundle: true,
  minify: IS_PRODUCTION,
  sourcemap: !IS_PRODUCTION,
  metafile: IS_ANALYZE_ENABLED,
  define: {
    'process.env.NODE_ENV': IS_PRODUCTION ? '"production"' : '"development"',
  },
  plugins: [
    clean({
      patterns: ['./public/*'],
    }),
    stylexPlugin({
      useCSSLayers: false,
      generatedCSSFileName: STYLEX_BUNDLE_PATH,
      stylexImports: ['@stylexjs/stylex'],
      unstable_moduleResolution: {
        type: 'experimental_crossFileParsing',
        rootDir: path.resolve(__dirname, '..'),
      },
    }),
    stylePlugin({
      postcss: {
        plugins: [
          tailwindcss(
            konstaConfig({
              content: ['./src/**/*.{js,jsx,ts,tsx}'],
              theme: {
                extend: {},
              },
              plugins: [],
            })
          ),
          autoprefixer,
        ],
      },
    }),
    svgr(),
    copyStaticFiles({
      src: 'src/static',
      dest: 'public',
    }),
    imageMinifyPlugin,
  ],
  loader: {
    '.png': 'file',
    '.svg': 'text',
  },
  target: ['chrome58', 'firefox57', 'safari11', 'edge18'],
  tsconfig: 'tsconfig.json',
  alias: {
    react: 'preact/compat',
    'react-dom/test-utils': 'preact/test-utils',
    'react-dom': 'preact/compat',
    'react/jsx-runtime': 'preact/jsx-runtime',
  },
}

if (IS_PRODUCTION) {
  const result = await esbuild.build(config)
  if (IS_ANALYZE_ENABLED)
    console.log(await esbuild.analyzeMetafile(result.metafile, {
      verbose: true,
    }))
} else {
  const ctx = await esbuild.context(config)

  await ctx.watch()
  console.log('watching...')

  const { host, port } = await ctx.serve({
    servedir: 'public',
  })
  console.log('serving...', `http://${host}:${port}`)
  console.log('local ip address: ', getLocalIpAddress())
}

And code from this page https://stylexjs.com/docs/learn/theming/using-variables/

It will give compilation error

Test case

No response

Additional comments

No response

[nmn]

Please share the file /Users/kesha/projects/nano_gym_tma/src/app/styles.tsx. You're likely using some invalid way to define styles, but I cannot say for sure without looking at your code. Thanks.