storybookjs / eslint-plugin-storybook

🎗Official ESLint plugin for Storybook
MIT License
245 stars 52 forks source link

ESLint error: `TypeError: Cannot read property 'properties' of undefined` #5

Closed oscard0m closed 2 years ago

oscard0m commented 2 years ago

Describe the bug

Tried lint a project I'm working on with eslint-plugin-storybook and getting the following error:

TypeError: Cannot read property 'properties' of undefined

To Reproduce

Steps to reproduce the behavior:

  1. Clone this repository
  2. NPM linked (npm link)
    
    added 1 package, and audited 3 packages in 815ms

found 0 vulnerabilities

3. Go to the repository where you want to use Storybook's 
4. NPM link Storybook's ESLint repo (`npm link eslint-plugin-storybook`)
```bash
linked using node@16.13.0. These might not interact correctly.
/Users/xxx/yyy/node_modules/eslint-plugin-storybook -> 
/Users/xxx/...../eslint-plugin-storybook/lib/node_modules/eslint-plugin-storybook -> 
/Users/xxx/dev/open_source/storybookjs/eslint-plugin-storybook
  1. Update .eslintrc with Storybook's ESLint plugin
  2. Run lint in the project (npm run lint)
    
    ...
    Oops! Something went wrong! :(

ESLint: 7.32.0

TypeError: Cannot read property 'properties' of undefined ...


### Versions

|   | version |
|---|---|
| node  | 16.13.0  |
| eslint | 7.3.2 |
| storybook | 6.3.8 |

### Files

**.eslintrc.js**
```js
module.exports = {
  extends: ["react-app", "react-app/jest", "plugin:prettier/recommended"],
  plugins: ["prettier", "storybook"],
  rules: {
    "prettier/prettier": "error",
  },
  overrides: [
    {
      // 3) Now we enable eslint-plugin-storybook rules or preset only for matching files!
      // you can use the one defined in your main.js
      files: ["src/**/*.stories.@(js|jsx|ts|tsx)"],
      extends: ["plugin:storybook/recommended"],

      // 4) Optional: you can override specific rules here if you want. Else delete this
      // rules: {
      //   "storybook/no-redundant-story-name": "error",
      // },
    },
  ],
};

Checkbox.stories.js

import Checkbox from "../components/Checkbox";

const CheckboxComponent = {
  title: "Checkbox",
  component: Checkbox
};

export default CheckboxComponent;

Terminal output

Click to expand! ``` npm run lint:js 20:48:42 > cv2profile@0.1.0 lint:js /Users/xxx/dev/zzz > eslint . --ext js --ext jsx --cache Oops! Something went wrong! :( ESLint: 7.32.0 TypeError: Cannot read property 'properties' of undefined Occurred while linting /Users/xxx/dev/zzz/src/stories/Checkbox.stories.js:8 at ExportDefaultDeclaration (/Users/xxx/dev/open_source/storybookjs/eslint-plugin-storybook/lib/rules/hierarchy-separator.js:34:91) at /Users/xxx/dev/zzz/node_modules/eslint/lib/linter/safe-emitter.js:45:58 at Array.forEach () at Object.emit (/Users/xxx/dev/zzz/node_modules/eslint/lib/linter/safe-emitter.js:45:38) at NodeEventGenerator.applySelector (/Users/xxx/dev/zzz/node_modules/eslint/lib/linter/node-event-generator.js:293:26) at NodeEventGenerator.applySelectors (/Users/xxx/dev/zzz/node_modules/eslint/lib/linter/node-event-generator.js:322:22) at NodeEventGenerator.enterNode (/Users/xxx/dev/zzz/node_modules/eslint/lib/linter/node-event-generator.js:336:14) at CodePathAnalyzer.enterNode (/Users/xxx/dev/zzz/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23) at /Users/xxx/dev/zzz/node_modules/eslint/lib/linter/linter.js:960:32 at Array.forEach () npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! cv2profile@0.1.0 lint:js: `eslint . --ext js --ext jsx --cache` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the cv2profile@0.1.0 lint:js script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/xxx/.npm/_logs/2021-11-01T19_49_02_318Z-debug.log ```

Expected behaviour

Not sure if I'm not writing a correct story but still I assume ESLint should complain but not throw an exception.

oscard0m commented 2 years ago

@yannbf let me know if you need any other detail or you need me to create an example repository to reproduce the error.

What I would like to assure first is if the content of Checkbox.stories.js and .eslintrc.js are correct. From there, I can try to debug and get familiar with the code if you want :)

yannbf commented 2 years ago

Wow what a detailed explanation @oscard0m thank you so much for that!! I wish everyone was like you when reporting issues! Your files are correct. The error is legit and it's been fixed in #6, you can try again now!

oscard0m commented 2 years ago

Seems the issue has been solved. Created a new issue with a new error: https://github.com/storybookjs/eslint-plugin-storybook/issues/7