ESLint error: '@storybook/react' should be listed in the project's dependencies, not devDependencies

Question

After installing Storybook into a React.js app with ESLint, the VSCode linter wasn't picking up the @storybook/react imports in the examples .stories.js files.

It is giving me the following error:

'@storybook/react' should be listed in the project's dependencies, not devDependencies.eslintimport/no-extraneous-dependencies

Holystone

Answer 1

I was able to get the linter warnings to go away by adding an ignore rule my .eslintrc file:

"rules": {
  "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.stories.*",
          "**/.storybook/**/*.*"
        ],
        "peerDependencies": true
      }
    ]
}

There is a good example here: https://github.com/storybookjs/linter-config/blob/master/eslint.config.js

Holystone

Thanks for this. I was running into this problem with vite.config.ts, which I just had to put in the devDependencies array as you showed. – Lie

Answer 2

I recently had the same issue. I solved it by restarting the ESLint server. To do this, open the command palette by typing Ctrl+Shift+P, then search for the command ESLint: Restart ESLint Server and hit enter.

Jesicajeske

If you are using WebStorm on another JetBrains IDE, this plugins.jetbrains.com/plugin/… plugin may be helpful. Also, according to their roadmap blog.jetbrains.com/webstorm/2024/01/2024-1-roadmap, this functionality may implemented in a new language service widget. – Epoch