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

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

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.