Configuration for rule "dot-notation" is invalid

[rexkenley]

Hi

I am encountering this lint issue

I was able to trace the cause to this

eslint-config-airbnb-typescript loads eslint-config-airbnb-base to get its configurations for core rules and use them as configurations for typescript-eslint plugin rules. But it doesn't deep-clone the configurations, so the same objects end up in configurations for multiple rules. During the validation for @typescript-eslint/dot-notation rule, ESLint sets defaults on the same object that is used as configuration for the core dot-notation rule, which then doesn't pass the validation due to unknown properties.

https://github.com/eslint/eslint/issues/15988

I originally opened this ticket and he said that this is in your area. https://github.com/airbnb/javascript/issues/2766

Any help is much appreciated.

[novascreen]

you are probably missing the parserOptions.project setting. the rule set assumes that we want linting with type information, however i think it would be nice if that was opt-in.

[rexkenley]

I added that to the local eslintrc but it still gave me the same error. Something is adding those extra options

I ran --print-config and did find this. Those 3 options shouldn't be there and what's causing the issue.

[rexkenley]

@iamturns , any idea as to why this is happening?

Even though I was able to manually configure to remove the extra settings, I am still getting the error

[rexkenley]

@novascreen Is there any resolution? Something is adding the extra config that is causing the issue.

eslint --print-config

Libraries "@typescript-eslint/eslint-plugin": "5.59.9", "@typescript-eslint/parser": "5.59.9", "eslint": "^8.42.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-next": "^13.4.4", "eslint-config-prettier": "^8.8.0", "eslint-plugin-cypress": "^2.13.3", "eslint-plugin-import": "2.27.5", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jest-dom": "^5.0.1", "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-storybook": "^0.6.12", "eslint-plugin-testing-library": "^5.11.0",

The current workaround is to go to this file and turn off dot-notaion.

[novascreen]

I didn't dive into disabling the rules that require linting with type information and instead made sure that it works by adding the right parserOptions. What does your full config look like?

[rexkenley]

My project is a Nx monorepo.

Root .eslintrc.json

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        "airbnb",
        "airbnb-typescript",
        "plugin:@nx/react",
        "plugin:@nx/typescript",
        "prettier"
      ],
      "parserOptions": {
        "project": "./tsconfig.base.json"
      },
      "rules": {
        "@typescript-eslint/ban-ts-comment": "warn",
        "dot-notation": "off",
        "@typescript-eslint/dot-notation": "error",
        "@typescript-eslint/naming-convention": "warn",
        "no-shadow": "off",
        "@typescript-eslint/no-shadow": "warn",
        "@typescript-eslint/no-unused-expressions": [
          "error",
          {
            "allowShortCircuit": true,
            "allowTernary": true
          }
        ],
        "import/extensions": "off",
        "import/no-extraneous-dependencies": "off",
        "import/no-unresolved": "off",
        "import/prefer-default-export": "off",
        "no-nested-ternary": "warn",
        "no-underscore-dangle": "off",
        "one-var": ["warn", "always"],
        "react/function-component-definition": "off",
        "react/jsx-filename-extension": [
          1,
          {
            "extensions": [".jsx", ".tsx"]
          }
        ],
        "react/jsx-props-no-spreading": "off",
        "react/no-unstable-nested-components": [
          "error",
          {
            "allowAsProps": true
          }
        ],
        "react/react-in-jsx-scope": "off",
        "react/require-default-props": "off",
        "react-hooks/rules-of-hooks": "off",
        "react/jsx-no-useless-fragment": [
          "error",
          {
            "allowExpressions": true
          }
        ]
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": [
        "airbnb",
        "plugin:@nx/react",
        "plugin:@nx/javascript",
        "prettier"
      ],
      "rules": {}
    },
    {
      "files": ["**/?(*.)+(spec|test).[jt]s?(x)"],
      "env": {
        "jest": true
      },
      "extends": [
        "plugin:jest/recommended",
        "plugin:jest/style",
        "plugin:jest-dom/recommended",
        "plugin:testing-library/react"
      ],
      "rules": {
        "jest-dom/prefer-empty": "off",
        "testing-library/no-node-access": [
          "warn",
          {
            "allowContainerFirstChild": true
          }
        ],
        "testing-library/prefer-screen-queries": "off"
      }
    }
  ],
  "extends": ["plugin:storybook/recommended"]
}

Child .eslintrc.json

{
  "extends": ["../../../../.eslintrc.json"],
  "env": {
    "browser": true,
    "es2021": true
  },
  "ignorePatterns": ["!**/*", "**/*.config.js", "**/*.d.ts"],
  "globals": {
    "ComponentFramework": true,
    "React": true
  },
  "rules": {
    "@typescript-eslint/lines-between-class-members": "off",
    "@typescript-eslint/no-useless-constructor": "off",
    "@typescript-eslint/no-empty-function": "off",
    "class-methods-use-this": "off",
    "import/order": "off",
    "no-alert": "error",
    "vars-on-top": "off"
  }
}

[rexkenley]

@novascreen, any ideas on how to address this?

[novascreen]

hm, i wonder if something goes wrong with the path to the tsconfig in parserOptions.project, because it might not apply or be the wrong in your child eslint config. You could try to add parserOptions.project in the child config as well. You could also try to just set it to true if you have a tsconfig.json next to each of your eslint configs.

[rexkenley]

The funny thing is the problem seems to have resolved itself. I have no idea how that happened.