chakra-ui / eslint-plugin-panda

Official ESLint Plugin for Panda CSS
71 stars 5 forks source link

TypeError: Cannot read properties of undefined (reading 'forEach') #52

Closed theMasix closed 5 months ago

theMasix commented 6 months ago

Error:

TypeError: Cannot read properties of undefined (reading 'forEach')
Occurred while linting /path/to/project/src/components/Accordion/Accordion.stories.tsx:59
Rule: "@pandacss/no-invalid-token-paths"
    at Referencer.visitFunction (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:7326:28)
    at Referencer.ArrowFunctionExpression (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:7359:14)
    at Referencer.visit (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:6420:19)
    at Referencer.visitProperty (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:7343:14)
    at Referencer.Property (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:7532:14)
    at Referencer.visit (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:6420:19)
    at Referencer.visitChildren (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:6403:22)
    at Referencer.visit (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:6425:14)
    at Referencer.VariableDeclaration (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:7623:16)
    at Referencer.visit (/path/to/project/node_modules/.pnpm/@pandacss+eslint-plugin@0.1.1_eslint@8.57.0_typescript@5.1.6/node_modules/@pandacss/eslint-plugin/dist/index.js:6420:19)
 ELIFECYCLE  Command failed with exit code 2.

Code of Accordion/Accordion.stories.tsx:

/**
 * Curve accordion type and first accordion is opened.
 */
export const MultipleWithDefaultValue: Story = {
  render: (args, { globals: { locale } }) => (
    <Accordion {...args}>
      <AccordionItem value='accordion1'>
        <AccordionItemHeader>{child[locale]}</AccordionItemHeader>
        <AccordionItemContent>{contentChild[locale]}</AccordionItemContent>
      </AccordionItem>
      <AccordionItem value='accordion2'>
        <AccordionItemHeader>{child[locale]}</AccordionItemHeader>
        <AccordionItemContent>{contentChild[locale]}</AccordionItemContent>
      </AccordionItem>
    </Accordion>
  ),
  args: {
    defaultValue: ['accordion1'],
    multiple: true,
    variant: 'curve',
  },
};
Screenshot 2024-03-26 at 19 58 43

Environments

    "@pandacss/eslint-plugin": "^0.1.1",
    "@pandacss/dev": "^0.36.1",
    "typescript": "^5.1.6",
    "eslint": "^8.57.0",
anubra266 commented 6 months ago

@theMasix I can't reproduce this. And I don't seem to see any panda usage in this file. Any more information you think could be helpful?

drphelps commented 5 months ago

@anubra266 I managed to reproduce this here.

drphelps commented 5 months ago

@anubra266 here's a simpler reproduction. It seems that the inclusion of @babel/eslint-parser causes the issue.

anubra266 commented 5 months ago

You're right @drphelps @theMasix

since @typescript-eslint uses TypeScript under the hood, its rules can be made type-aware, which is something Babel doesn't have the ability to do.

https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#typescript

If your project is a pure TS project, just use @typescript-eslint as the parser

But If your project has both TS and JS, you can use @babel/eslint-parser as well through overrides

{
  parser: "@babel/eslint-parser",
  overrides: [
    {
      "files": ["*.{ts,tsx}"],
      "parser": "@typescript-eslint/parser",
    }
  ],
}