How to debug Cannot read properties of undefined (reading 'css')?

[adaboese]

Description

I am getting this error:

🐼 error [file:extract] TypeError: Cannot read properties of undefined (reading 'css')
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/core/dist/index.js:1241:42
    at Array.forEach (<anonymous>)
    at _StyleEncoder.processAtomicRecipe (/Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/core/dist/index.js:1240:22)
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/parser/dist/index.js:132:45
    at Array.forEach (<anonymous>)
    at ParserResult.set (/Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/parser/dist/index.js:132:19)
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/parser/dist/index.js:453:30
    at Array.forEach (<anonymous>)
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/parser/dist/index.js:441:28
    at t.when (/Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/[email protected]/node_modules/ts-pattern/dist/index.cjs:1:9791)

I added console.log to _StyleEncoder.processAtomicRecipe and it shows:

{ compoundVariants: [] }
{ compoundVariants: [] }
{ compoundVariants: [ undefined, undefined ] }
🐼 error [file:extract] TypeError: Cannot read properties of undefined (reading 'css') ...
{ compoundVariants: [] }
{ compoundVariants: [] }

Where does it get those undefined values from?

Link to Reproduction

N/A

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

No response

Panda CSS Version

0.25.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[adaboese]

I can fix this by simply patching panda CSS to check if value is set, e.g.

compoundVariants.forEach((compoundVariant) => {
  if (compoundVariant) {
    this.processAtomic(compoundVariant.css);
  }
});

However, feels like an issue upstream.

[astahmer]

I'm guessing this is coming from an extracted value that contains some stuff not resolved, e.g not static enough for the extractor to understand

using the panda debug command could help you find the file causing this
can you provide a minimal repro so that I can look into it ?