storybookjs / eslint-plugin-storybook

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

ESLint error: `TypeError: Cannot read property 'name' of undefined` #7

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 'name' of undefined

To Reproduce

Steps to reproduce the behaviour:

  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 'name' 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",
      // },
    },
  ],
};

Completed.stories.js

import React from "react";
import UploadComplete from "../../components/Upload/Complete";

import maximilian from "../assets/images/maximilian.png";
import mrsExample from "../assets/images/mrs-example.webp";

const Images = {
  maximilian: maximilian,
  mrsExample: mrsExample,
};

const Meta = {
  title: "UploadComplete",
  component: UploadComplete,
  argTypes: {
    image: {
      options: ["maximilian", "mrsExample"],
      control: { type: "radio" },
    },
  },
};

export default Meta;

const Template = ({ name, image }) => {
  image = Images[image];
  return <UploadComplete name={name} image={image} />;
};

export const Primary = Template.bind({});
Primary.args = {
  name: "Maximilian",
  image: "maximilian",
};

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 'name' of undefined Occurred while linting /Users/xxx/yyy/src/stories/Upload/Complete.stories.js:26 at isPlayFunction (/Users/xxx/zzz/eslint-plugin-storybook/lib/rules/use-storybook-expect.js:40:23) at AssignmentExpression (/Users/xxx/zzz/eslint-plugin-storybook/lib/rules/use-storybook-expect.js:72:13) at /Users/xxx/yyy/node_modules/eslint/lib/linter/safe-emitter.js:45:58 at Array.forEach () at Object.emit (/Users/xxx/yyy/node_modules/eslint/lib/linter/safe-emitter.js:45:38) at NodeEventGenerator.applySelector (/Users/xxx/yyy/cv2profile/node_modules/eslint/lib/linter/node-event-generator.js:293:26) at NodeEventGenerator.applySelectors (/Users/xxx/yyy/node_modules/eslint/lib/linter/node-event-generator.js:322:22) at NodeEventGenerator.enterNode (/Users/xxx/yyy/node_modules/eslint/lib/linter/node-event-generator.js:336:14) at CodePathAnalyzer.enterNode (/Users/xxx/yyy/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23) at /Users/xxx/yyy/node_modules/eslint/lib/linter/linter.js:960:32 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-02T08_18_15_415Z-debug.log ```

Expected behaviour

yannbf commented 2 years ago

@oscard0m you have no idea how much I appreciate you testing the plugin. Thank you so much! Should be fixed by #8

yannbf commented 2 years ago

Closing it as the issue has been fixed!