nx: Linter fails after adding storybook config files

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

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

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!

Hi Folks,

• The lint errors around globals like module and __dirname not being available has been fixed in 11.3.0 which was released yesterday

• The lint errors around @typescript-eslint/no-var-requires has been fixed in 11.3.0 which was released yesterday

• For Webstorm users, we spent some time researching this and it turns out it behaves differently to the command line and VSCode in this regard. We also found that Webstorm’s choice of behaviour here has caused issues with all monorepo tools (like lerna, Nx etc) grouped under here: https://youtrack.jetbrains.com/issue/WEB-47135#focus=Comments-27-4419848.0-0 and so they have implemented a configuration option to address this:

Rather than updating their eslint configs from what Nx generates, Webstorm users should:

• Be using at least version 2020.3
• Go to the following ESLint settings and set the Working directories option to be ./ - leave all the other options unchanged. For example on my machine:

Now everything should work as it does in VSCode and on the command line.

I believe with those two points (latest Nx release and Webstorm instructions) all the issues outlined on this thread have been covered so closing for now.

Thanks!

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

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

Ah, thank you. It’s so annoying that globs don’t work for dot-prefixed files and folders. And I always forget that.

Ok. I found something that fixed this issue for me… but might cause other issues (maybe).

In your library, there is that root tsconfig.json that has references something like this:

  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./.storybook/tsconfig.json"
    }
  ]

When comparing the ./tsconfig.lib.json, ./tsconfig.spec.json, and ./.storybook/tsconfig.json the major difference was that the storybook config didn’t have compilerOptions in there. I made a copy of the tsconfig.lib.json file and named it tsconfig.stories.json and then just changed it to be:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "types": [
      "node"
    ]
  },
  "exclude": [
    "**/*.spec.ts",
    "**/*.spec.tsx",
  ],
  "include": [
    "**/*.stories.ts",
    "**/*.stories.js",
    "**/*.stories.jsx",
    "**/*.stories.tsx"
  ]
}

Not sure why this worked, but it did. Maybe some lame pathing bug with eslint? Or maybe an eslint pathing issue with just Webstorm? I don’t think I get this error in VSCode. Or maybe VSCode just doesn’t share it so blatently.

Thanks for that comment, @JamesHenry! We’d been seeing this error since switching to v11, and that change to settings fixed it.

I didn’t see other people reporting an error with the ‘You have used a rule which requires parserService to be generated. You must therefore provide a value for the “parserOptions.project” property for @typescript-eslint/parser"’ message, but fortunately your suggestion fixed it.

Perhaps someone else will see this comment and find out that your suggestion saves aggravation 😃

Hi @puku0x @iamandrewluca all the issues (parserOptions.project and "@typescript-eslint/no-var-requires" should be fixed in the latest release 11.3.0. Could you give it a try and get back to me? I just tried it and it works!! 😃 😃

@johngrimsey @Brian-McBride see the comment above by @JamesHenry !! A similar issue came up here as well.

Thank you all very much for taking the time to find the issues and find fixes for these, too! You’re the best!!

The parserOptions.project error has been fixed in Nx v11.

However, we need to override @typescript-eslint/no-var-requires .

// libs/components/.eslintrc.json
{
  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["**/.storybook/*.js"],
      "rules": {
        "@typescript-eslint/no-var-requires": "off"
      }
    }
  ]
}

Another solution is to disable ESLint for the lines using require statement.

// eslint-disable-next-line @typescript-eslint/no-var-requires
const rootMain = require('../../../.storybook/main');

After reading #5146 , I can finally manage Nx + Storybook + ESLint! Thank you @juristr !!

// libs/components/.storybook/.babelrc
{
  "extends": "../.babelrc"
}

// libs/components/.storybook/tsconfig.json
{
  "extends": "../tsconfig.json",
  "include": ["./*.js"]
}

// libs/components/.storybook/main.js
const path = require('path');

module.exports = {
  stories: [
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(ts|tsx|js|jsx)',
  ],
  addons: ['@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        // alias for Emotion v11 + Storybook v6
        alias: {
          ...config.resolve.alias,
          '@emotion/core': path.resolve(
            __dirname,
            '../../../node_modules/@emotion/react'
          ),
          '@emotion/styled': path.resolve(
            __dirname,
            '../../../node_modules/@emotion/styled'
          ),
          'emotion-theming': path.resolve(
            __dirname,
            '../../../node_modules/@emotion/react'
          ),
        },
      },
    };
  },
};

// libs/components/.eslintrc.json
{
  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "parserOptions": {
        "project": [
          "libs/components/tsconfig.*?.json",
          "libs/components/.storybook/tsconfig.json"  // This is what I missed
        ]
      },
      "rules": {}
    },
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
  ]
}

I had es-linting issues in IntelliJ after adding the Storybook plugin and adding it to a lib.

I fixed the offending scaffolded lib’s .eslintrc.json by removing what appears to be a repeated path to tsconfig files. Because the offending estlintrc.json file is also in the lib, no path is needed (it doesn’t exist):

before:

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

after:

"parserOptions": {
  "project": [
    "tsconfig.*?.json",
    ".storybook/tsconfig.json"
  ]
},

I’m not sure if I’ve caused any wider issues here. Running nx lint on the module seemed to be working ok. I’ve only just put the fix in so will update if something’s wrong.

@puku0x I think is not fixed yet. See last comment https://github.com/nrwl/nx/pull/3923 I still get parserOptions.project error with 11.1.1