Linter fails after adding storybook config files

Current Behavior

Linting a library which has storybook configurations causes lint errors.

Expected Behavior

Linter should success without errors.

Steps to Reproduce

1. Create a workspace

npx create-nx-workspace workspace

? What to create in the new workspace react
? Application name                    web
? Default stylesheet format           emotion
? Use Nx Cloud? (It's free and doesn't require registration.) No
Creating a sandbox with Nx...

1. Add a library

npm run nx g lib components

1. Add Storybook configurations

npm i -D @nrwl/storybook
npm run nx g storybook-configuration components

? Configure a cypress e2e app to run against the storybook instance? Yes
? Automatically generate story files for components declared in this library? Yes
? Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure schematic? Yes

1. Run lint

npm run lint components

Failure Logs

> nx workspace-lint && nx lint "components"


> nx run components:lint 

Linting "components"...

/Users/puku0x/Desktop/workspace/libs/components/.storybook/main.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: libs/components/.storybook/main.js.
The file must be included in at least one of the projects provided

/Users/puku0x/Desktop/workspace/libs/components/.storybook/preview.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: libs/components/.storybook/preview.js.
The file must be included in at least one of the projects provided

/Users/puku0x/Desktop/workspace/libs/components/.storybook/webpack.config.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: libs/components/.storybook/webpack.config.js.
The file must be included in at least one of the projects provided

✖ 3 problems (3 errors, 0 warnings)

Lint errors found in the listed files.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! workspace@0.0.0 lint: `nx workspace-lint && nx lint "components"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the workspace@0.0.0 lint script.

Environment

>  NX  Report complete - copy this into the issue template

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 10.3.0
  @nrwl/cypress : 10.3.0
  @nrwl/eslint-plugin-nx : 10.3.0
  @nrwl/express : Not Found
  @nrwl/jest : 10.3.0
  @nrwl/linter : 10.3.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 10.3.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.3.0
  @nrwl/web : 10.3.0
  @nrwl/workspace : 10.3.0
  typescript : 4.0.3

[puku0x]

It can be solved by modifying ignorePatterns in .eslintrc.json.

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*", ".storybook/*"], 

[jvandemo]

When dealing with an Angular library that has Storybook files, the issue may also pop up:

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: libs/<your-scope-name>/<your-library-name>/src/lib/.../some.stories.ts.
The file must be included in at least one of the projects provided

To fix the issue, simply add your Storybook’s tsconfig.json to parserOptions.project in your library’s .eslintrc.json file.

Before:

"parserOptions": {
  "project": [
    "libs/<your-scope-name>/<your-library-name>/tsconfig.*?.json"
  ]
}

After:

"parserOptions": {
  "project": [
    "libs/<your-scope-name>/<your-library-name>/tsconfig.*?.json",
    "libs/<your-scope-name>/<your-library-name>/.storybook/tsconfig.json"
  ]
}

Happy linting!