typescript-eslint/pre-commit hook (monorepo): Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser

Question

We recently migrated to a monorepo and we are still trying to set everything up. We use typescript and eslint with prettier. The structure is the following:

root
  - common
    - folder_a
      - file_a.ts
  - build_scripts
    - script_a.js
  - project_a
    - components
      - component_a
        - Component.tsx
    - tsconfig.json
    - .eslintrc.json
    - node_modules
    - package.json
  - .prettierignore
  - .prettierrc.yml
  - .eslintignore
  - .eslintrc.base.json
  - tsconfig.base.json
  - node_modules
  - package.json
  - Makefile
  - webpack.config.js
  - .pre-commit-config.yaml

The common folder contains code that is used across multiple projects and isn't considered a project of its own (no tsconfig.json). All sub-projects that contain their own tsconfig.json and .eslintrc.json file, are extending the base ones, as you can see below:

tsconfig.base.json

{
    "compilerOptions": {
        "lib": ["ES2017", "DOM"],
        "target": "ES6",
        "module": "commonjs",
        "baseUrl": ".",
        "sourceMap": true,
        "alwaysStrict": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "noEmitOnError": true,
        "paths": {
            "@common/*": ["./common/*"]
        }
    },
    // include all projects that don't have their own
    // tsconfig.json file AND need to be compiled/linted
    // => very important because typescript-eslint will
    // otherwise load ALL files in memory for type-checking
    // and consequently eslint will crash with an OOM error
    "include": ["common/**/*"]
}

.eslintrc.base.json (rules omitted for brevity)

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "plugin:destructuring/recommended",
        "airbnb-base",
        "prettier",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.base.json",
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "prettier",
        "@typescript-eslint",
        "destructuring"
    ],
    "rules": {}
}

.eslintignore

*/**/build
Makefile
**/*.js
**/*.json

.pre-commit-config.yaml (taken from the example in https://github.com/pre-commit/pre-commit/issues/466#issuecomment-274282684)

- repo: local
  hooks:
    - id: lint_fix
      name: lint_fix_project_a
      entry: node_modules/.bin/eslint --report-unused-disable-directives --fix -c project_a/.eslintrc.json --ext .ts,.tsx
      files: ^project_a/
      types: [file]
      language: node

package.json

{
  "name": "web",
  "version": "1.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "7.2.2",,
    "@typescript-eslint/eslint-plugin": "4.15.1",
    "@typescript-eslint/parser": "4.15.1",
    "eslint": "7.20.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-airbnb-base": "14.2.0",
    "eslint-config-prettier": "6.10.1",
    "eslint-config-standard": "14.1.1",
    "eslint-import-resolver-typescript": "2.0.0",
    "eslint-plugin-destructuring": "2.2.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-prettier": "3.1.3",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-standard": "4.0.1",
    "eslint-webpack-plugin": "2.5.4",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "express": "4.0.0",
    "prettier": "2.1.2",
    "typescript": "3.9.7"
  }
}

project_a/tsconfig.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "lib": ["ES2017", "DOM", "DOM.Iterable"],
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@common/*": ["../common/*"],
      "@components/*": ["./components/*"]
    }
  },
  // overwrite the base "includes"
  "include": ["**/*"],
  "exclude": [
    "**/node_modules/*",
    "**/build/*"
  ]
}

project_a/.eslintrc.json (rules omitted for brevity)

{
    "extends": [
        "plugin:react/recommended",
        "plugin:destructuring/recommended",
        "airbnb",
        "airbnb/hooks",
        "prettier",
        "plugin:prettier/recommended",
        "prettier/react",
        "../.eslintrc.base.json"
    ],
    "env": {
        "browser": true,
        "commonjs": true,
        "node": false
    },
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "prettier",
        "react",
        "@typescript-eslint",
        "destructuring"
    ],
    "rules": {}
}

Bundling project_a with webpack, using ts-loader, eslint-webpack-plugin and project_a/tsconfig.json works perfectly fine. No linting errors reported. Same for VSCode, the vscode-eslint extension doesn't report anything.

Also running the following inside project_a is successful without any linting errors.

../node_modules/.bin/eslint . --ext .ts,.tsx --fix -c .eslintrc.json

However, when changing a file in project_a and trying to stage and commit, the following error is thrown:

/home/web/project_a/components/component_a/Component.tsx

0:0 error Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: project_a/components/component_a/Component.tsx.

The file must be included in at least one of the projects provided

It makes no sense to me, why this error would only be thrown in that specific use-case, when linting via the pre-commit hook. Also, it's very peculiar, since project_a/tsconfig.json includes all files in that folder (except node_modules and build artifacts).

"include": ["**/*"]

It seems to me it might be related to us having added

"include": ["common/**/*"]

in ./tsconfig.json. That was added (as per the comment), because having a file from common open in VSCode and trying to save some changes, would make eslint crash, since according to various sources, the @typescript-eslint/parser would include all files in memory to gather type information for linting.

All related Github issues just mention that the file in question is just not included, as per the error itslef, but I don't see how this is happening in my scenario.

XeniaSis · Accepted Answer · 2021-09-03 21:14:14Z

4

It turns out that @typescript-eslint/parser resolves the provided tsconfig.json relative to the current working directory, which I missed while reading the docs. Thus, since the pre-commit hook is always run from the root directory, it was using tsconfig.base.json instead of the one in project_a.

In order to fix this, the following steps need to be taken (according to https://github.com/typescript-eslint/typescript-eslint/issues/251#issuecomment-567365174):

rename project_a/.eslintrc.json to project_a/.eslintrc.js
add parserOptions.tsconfigRootDir like the following:

module.exports = {
  parserOptions: {
    project: './tsconfig.json'
    tsconfigRootDir: __dirname // important option
  }
}

answered Sep 3, 2021 at 21:14

XeniaSis

2,3745 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anthony sottile · Accepted Answer · 2021-09-03 14:07:52Z

1

your configuration:

- repo: local
  hooks:
    - id: lint_fix
      name: lint_fix_project_a
      entry: node_modules/.bin/eslint --report-unused-disable-directives --fix -c project_a/.eslintrc.json --ext .ts,.tsx
      files: ^project_a/
      types: [file]
      language: node

uses language: node which is a managed envinronment (pre-commit will create its own separate isolated node environment and use that -- and won't have access to your dependencies)

you probably want language: system since you are managing the environment external to pre-commit

disclaimer: I created pre-commit

answered Sep 3, 2021 at 14:07

anthony sottile

72.1k19 gold badges199 silver badges248 bronze badges

7 Comments

XeniaSis Over a year ago

Thanks for the quick reply. Same error still occurs unfortunately

anthony sottile Over a year ago

hooks will also be run from the root of the repository, so the equivalent entry should succeed from there

XeniaSis Over a year ago

I'm not sure I understand what you mean with so the equivalent entry should succeed from there

anthony sottile Over a year ago

cd to the root of the repository and run the entry with at least one filename after it and that's equivalent to what's happening here (independent of pre-commit) -- iterate on that until it succeeds

XeniaSis Over a year ago

I now get the same error, thanks for the explanation. But it still doesn't explain the inconsistencies of the lint result, when ran from the root and from the project folder

|

Collectives™ on Stack Overflow

typescript-eslint/pre-commit hook (monorepo): Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related