Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
oscard0m opened this issue Nov 1, 2021 · 3 comments
Closed
Assignees
Labels
bug Something isn't working

Comments

@oscard0m
Copy link

oscard0m commented Nov 1, 2021

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
  1. Go to the repository where you want to use Storybook's
  2. NPM link Storybook's ESLint repo (npm link eslint-plugin-storybook)
linked using [email protected]. 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

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

> [email protected] 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 (<anonymous>)
  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 (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint:js: `eslint . --ext js --ext jsx --cache`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] 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 oscard0m added the bug Something isn't working label Nov 1, 2021
@oscard0m
Copy link
Author

oscard0m commented Nov 1, 2021

@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
Copy link
Member

yannbf commented Nov 1, 2021

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
Copy link
Author

oscard0m commented Nov 2, 2021

Seems the issue has been solved. Created a new issue with a new error: #7

@oscard0m oscard0m closed this as completed Nov 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants