TypeError: Cannot read properties of undefined (reading 'message')

[drphelps]

synckit throws sporadic errors where the message port returns undefined. I thought this issue was related to Yarn PnP but the same error occurs with traditional node_modules. I've run into the error in both Node v18.20.2 and v20.12.2.

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /Users/redacted/components/dialog.tsx:393
Rule: "@pandacss/no-unsafe-token-fn-usage"
    at syncFn (/Users/redacted/node_modules/synckit/lib/index.cjs:352:59)
    at /Users/redacted/node_modules/@pandacss/eslint-plugin/dist/index.js:8068:34
    at Array.filter (<anonymous>)
    at getImports (/Users/redacted/node_modules/@pandacss/eslint-plugin/dist/index.js:8068:18)
    at isPandaIsh (/Users/redacted/node_modules/@pandacss/eslint-plugin/dist/index.js:8076:19)
    at isInPandaFunction (/Users/redacted/node_modules/@pandacss/eslint-plugin/dist/index.js:8149:8)
    at isPandaAttribute (/Users/redacted/node_modules/@pandacss/eslint-plugin/dist/index.js:8167:20)
    at Property (/Users/redacted/node_modules/@pandacss/eslint-plugin/dist/index.js:9170:14)
    at ruleErrorHandler (/Users/redacted/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/redacted/node_modules/eslint/lib/linter/safe-emitter.js:45:58

[anubra266]

@drphelps Could you make a small repro sandbox/repo for this. I'm finding it hard to reproduce it on my end

[sanjaytwisk]

Running into the same issue on Github Actions. The error pops up sporadically and at random. Never happens within my local development environment.

[anubra266]

@sanjaytwisk do you have a minimal repro. @drphelps 's repro is quite complicated. I can't even get the project to run

[Darmody]

Have the same problem here too.

[anubra266]

A minimal repro please @Darmody I need something to test and debug with

[sanjaytwisk]

@anubra266 Unfortunately I cannot share the repository that I'm working on. I tried to create a basic repo with NextJS and PandaCSS but so far I'm not able to reproduce the bug. Hope I'll find a way soon, keep you updated

[sanjaytwisk]

@anubra266 I ran into a similar problem when using back ticks instead of quotes:

styled('div', {
  height: `var(--max-height)`,
})

@drphelps could this be the same for you?

[anubra266]

@sanjaytwisk I've pushed a fix for the backtick issue

[drphelps]

@drphelps could this be the same for you?

I ran into the backtick issue as well but that throws a different error than above. Thanks for addressing that one, @anubra266.

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'replace')
Occurred while linting /Users/redacted/layout.tsx:36
Rule: "@pandacss/no-unsafe-token-fn-usage"
...

I'm still working on coming up with a simple reproduction of the original error but it's difficult to trace where it's coming from.

[dszmaj7]

error [❌] TypeError: Cannot read properties of undefined (reading 'message') Occurred while linting C:\Repos\FamullaNewAdmin\src\components\common\task-list\components\subtask-row.tsx:101 Rule: "@pandacss/no-unsafe-token-fn-usage" at syncFn (C:\Repos\FamullaNewAdmin\node_modules\.pnpm\[email protected]\node_modules\synckit\lib\index.cjs:352:59) at C:\Repos\FamullaNewAdmin\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@pandacss\eslint-plugin\dist\index.js:8060:34 at Array.filter (<anonymous>) at getImports (C:\Repos\FamullaNewAdmin\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@pandacss\eslint-plugin\dist\index.js:8060:18) at isPandaIsh (C:\Repos\FamullaNewAdmin\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@pandacss\eslint-plugin\dist\index.js:8068:19) at isPandaProp (C:\Repos\FamullaNewAdmin\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@pandacss\eslint-plugin\dist\index.js:8113:8) at JSXAttribute (C:\Repos\FamullaNewAdmin\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@pandacss\eslint-plugin\dist\index.js:9161:14) at ruleErrorHandler (C:\Repos\FamullaNewAdmin\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\linter.js:1076:28) at C:\Repos\FamullaNewAdmin\node_modules\.pnpm\[email protected]\node_modules\eslint\lib\linter\safe-emitter.js:45:58 at Array.forEach (<anonymous>)

It happens randomly in different parts of the code when running the local server. Each time this error occurs, the file and line are different (sometimes the error file does not use panda).

Today it reports an error in onChange, but next time it will be a different file and line, or even a different panda eslint rule.

[markkorput]

I'm running into this issue both locally and on github CI (using versions 0.1.4 and 0.1.5)

> eslint . --no-cache

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /___CENSORED___/src/components/Dropdown/Dropdown.tsx:363
Rule: "@pandacss/no-invalid-token-paths"
    at syncFn (/__CENSORED__/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.cjs:352:59)
    at /___CENSORED___/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8060:34
    at Array.filter (<anonymous>)
    at getImports (/___CENSORED___/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8060:18)
    at isPandaIsh (/___CENSORED___/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8068:19)
    at isInPandaFunction (/___CENSORED___/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8143:8)
    at isPandaAttribute (/___CENSORED___/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8161:20)
    at Property (/___CENSORED___/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8829:14)
    at ruleErrorHandler (/___CENSORED___/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /___CENSORED___/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
 ELIFECYCLE  Command failed with exit code 2.

and (running on the same code, without any changes)

> eslint . --no-cache


Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /__CENSORED__/apps/client/src/components/ExternalLink/ExternalLink.tsx:14
Rule: "@pandacss/file-not-included"
    at syncFn (/__CENSORED__/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.cjs:352:59)
    at /__CENSORED__/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8060:34
    at Array.filter (<anonymous>)
    at getImports (/__CENSORED__/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8060:18)
    at isPandaImport (/__CENSORED__/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8102:19)
    at ImportDeclaration (/__CENSORED__/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8242:14)
    at ruleErrorHandler (/__CENSORED__/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /__CENSORED__/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/__CENSORED__/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
 ELIFECYCLE  Command failed with exit code 2.

[azu]

I met same problem in production code.

This eslint plugin is crashed when receiveMessageOnPort(mainPort) is undefined. (I've checked by adding log into node_modules) https://github.com/un-ts/synckit/blob/22387b45c64245e750e894197cce70714fc36e12/src/index.ts#L534

This problem occurs randomly. However, I'm having trouble creating a minimal code base to reproduce it. Since it does not reproduce in a small code base, it may be required code of a certain size to reproduce it.

[azu]

@anubra266 I've created reproduce repository using chakra-ui/panda repo.

• Reproduce: https://github.com/azu/eslint-plugin-panda-issues-64

How to reproduce

1. Clone this repository

git clone https://github.com/azu/eslint-plugin-panda-issues-64
cd eslint-plugin-panda-issues-64

2. Install dependencies

pnpm install

3. Run lint until it crashes.

for i in {1..1000}
  do
    pnpm run lint:website > /dev/null
    if [ $? -eq 2 ]; then
      break
    fi
done

Crash @pandacss/eslint-plugin randomly.

> eslint website/src --ext .tsx


Oops! Something went wrong! :(

ESLint: 8.56.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /Users/azu/ghq/github.com/chakra-ui/panda/website/src/nextra/framework-card.tsx:99
Rule: "@pandacss/no-invalid-token-paths"
    at syncFn (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.cjs:352:59)
    at /Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8060:34
    at Array.filter (<anonymous>)
    at getImports (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8060:18)
    at isPandaIsh (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8068:19)
    at isInPandaFunction (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8143:8)
    at isPandaAttribute (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8161:20)
    at Property (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8829:14)
    at ruleErrorHandler (/Users/azu/ghq/github.com/chakra-ui/panda/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/azu/ghq/github.com/chakra-ui/panda/node_modules

[anubra266]

@azu just released a new version. Could you confirm if your scenario persists? Thanks

[azu]

@anubra266 Thanks for quick response. I have updated to "@pandacss/eslint-plugin":"^0.1.6" and tried it, but still get the same error. In the reproduction repository, I believe the frequency of this error is decreasing. However, errors still occur stochastically and randomly.

env:

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M2
  Memory: 96.91 MB / 24.00 GB
Binaries:
  Node: 20.12.0
ESLint: 8.56.0
@pandacss/eslint-plugin: 0.1.6

https://github.com/azu/eslint-plugin-panda-issues-64/commit/fbb456b6341823adb010d0fd503a693ec21e7b1c

for i in {1..1000}
  do
    echo "Iteration $i"
    pnpm run lint:website > /dev/null
    if [ $? -eq 2 ]; then
      break
    fi
done
Iteration 1
 fiIteration 2
 fiIteration 3
 fiIteration 4
 fiIteration 5
 fiIteration 6
 fiIteration 7
 fiIteration 8
 fiIteration 9
 fiIteration 10
 fiIteration 11
 fiIteration 12
 fiIteration 13
 fiIteration 14
 fiIteration 15
 fi
Oops! Something went wrong! :(

ESLint: 8.56.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/website/src/index.tsx:84
Rule: "@pandacss/no-unsafe-token-fn-usage"
    at syncFn (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.cjs:352:59)
    at isValidProperty (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8103:10)
    at isStyledNode (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8126:34)
    at isStyledProperty (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8139:57)
    at isPandaAttribute (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8175:12)
    at Property (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:9184:14)
    at ruleErrorHandler (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/website/src/nextra/sidebar/sidebar-backdrop.tsx:1
Rule: "@pandacss/file-not-included"
    at syncFn (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.cjs:352:59)
    at isValidFile (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8100:10)
    at ImportDeclaration (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.js:8255:13)
    at ruleErrorHandler (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/Users/azu/ghq/github.com/azu/eslint-plugin-panda-issues-64/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:340:14)

---

Another large production code has similar errors occurring randomly.

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting page.tsx:128
Rule: "@pandacss/no-unsafe-token-fn-usage"
    at syncFn (file:///app/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.js:310:13)
    at isPandaIsh (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8051:14)
    at isPandaProp (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8093:12)
    at JSXAttribute (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:9270:18)
    at ruleErrorHandler (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:326:22)

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting /layout.tsx:17
Rule: "@pandacss/no-invalid-token-paths"
    at syncFn (file:///app/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.js:310:13)
    at isPandaIsh (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8051:14)
    at isInPandaFunction (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8130:12)
    at isPandaAttribute (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8148:24)
    at Property (file:///app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8897:18)
    at ruleErrorHandler (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:297:26)

TypeError: Cannot read properties of undefined (reading 'message')
Occurred while linting image.tsx:97
Rule: "@pandacss/prefer-unified-property-style"
    at syncFn (file://app/node_modules/.pnpm/[email protected]/node_modules/synckit/lib/index.js:310:13)
    at resolveLonghand (file://app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:8156:14)
    at getLonghand (file://app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:9720:40)
    at resolveCompositeProperty (file://app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:9724:28)
    at Property (file://app/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@pandacss/eslint-plugin/dist/index.mjs:9763:25)
    at ruleErrorHandler (app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/linter.js:1076:28)
    at app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (app/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/linter/node-event-generator.js:297:26)

syncFn error call functios are isPandaIsh, isValidProperty, isValidFile, resolveLonghand, etc...

[anubra266]

@azu The unreliable behaviour is coming from within synckit, so i've just wrapped synckit to prevent the unrelated errors from propagating to our linting. Should be fine now.

[azu]

@anubra266 Thanks!

• https://github.com/chakra-ui/eslint-plugin-panda/releases/tag/%40pandacss%2Feslint-plugin%400.1.7

I've tested it and it does not crash anymore! (Tested 100 times on repro repo and production code)

Thanks for the hard work!