Search code examples
javascriptreactjstypescripteslintstorybook

Definition for rule '@typescript-eslint/no-implicit-any' was not found with Storybook js

I am getting this error when I make changes to the generated code from running Storybook.js. These are the instructions I am following

https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

But because I am adding StorybookJS to an existing project, the only commands I've ran are:

$ npx -p @storybook/cli@next sb init --story-format=csf-ts
$ yarn add @storybook/addon-docs@next --dev

Running yarn storybook produces this error. 

ERROR in ./src/stories/0-Welcome.stories.tsx
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

  Line 5:1:   Definition for rule '@typescript-eslint/no-implicit-any' was not found  @typescript-eslint/no-implicit-any
  Line 24:1:  Definition for rule '@typescript-eslint/no-implicit-any' was not found  @typescript-eslint/no-implicit-any

The storybook server runs fine but as soon as I make changes to some text and Storybook tries to reload the changes, I get the error seen above.

There is a lot of magic that happens behind the scenes of create-react-app so I am unaware of how to pinpoint and fix this error. My guess is that a eslint typescript rule is missing so upon Storybook reloading any type of change, the missing rule error occurs

enter image description here

Solution

  • It sounds like you're missing the .eslintrc.json file which describes the rules. You can read more about the file format and options here: https://eslint.org/docs/user-guide/configuring

    Example:

    {
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}

    If the error still occurs, try configuring the no-implicit-any rule.