Javascript: Release 18 breaks running eslint-plugin-react

[AustinNChristensen]

After updating to v18, the linter fails with the following warnings for every file in both javascript and typescript
<filename> 1:1 error Definition for rule 'react/jsx-curly-newline' was not found react/jsx-curly-newline 1:1 error Definition for rule 'react/state-in-constructor' was not found react/state-in-constructor 1:1 error Definition for rule 'react/static-property-placement' was not found react/static-property-placement 1:1 error Definition for rule 'react/jsx-props-no-spreading' was not found react/jsx-props-no-spreading

[ljharb]

Did you also update to eslint v6, or do you get these errors on eslint 5? Is this a local or a global install? What’s your eslint config look like?

[AustinNChristensen]

@ljharb We're running Create-React-App V2, with ESLint v5.16.
It's installed via CRA as far as I understand..?
eslint config:

"eslintConfig": {
    "extends": [
      "airbnb",
      "plugin:@typescript-eslint/recommended"
    ],
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [
            ".js",
            ".jsx",
            ".ts",
            ".tsx",
            ".json",
            ".svg",
            ".png"
          ]
        }
      }
    },
    "env": {
      "jest": true,
      "browser": true
    },
    "globals": {
      "cy": true,
      "Cypress": true
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint/eslint-plugin",
      "react-hooks",
      "eslint-plugin-jsx-a11y"
    ],
    "rules": {
      "@typescript-eslint/interface-name-prefix": [
        "error",
        "always"
      ],
      "jsx-a11y/label-has-for": [
        "off"
      ],
      "quotes": [
        "error",
        "single"
      ],
      "indent": [
        "error",
        4,
        {
          "SwitchCase": 1
        }
      ],
      "import/no-default-export": "error",
      "import/prefer-default-export": [
        "off"
      ],
      "max-len": [
        "error",
        {
          "code": 140,
          "ignoreUrls": true,
          "ignoreComments": true
        }
      ],
      "arrow-parens": [
        "error",
        "always"
      ],
      "comma-dangle": [
        "error",
        "never"
      ],
      "eol-last": [
        "error",
        "never"
      ],
      "jsx-quotes": [
        "error",
        "prefer-single"
      ],
      "one-var-declaration-per-line": [
        "error",
        "initializations"
      ],
      "one-var": [
        "off"
      ],
      "operator-linebreak": [
        "error",
        "after"
      ],
      "no-use-before-define": [
        "off"
      ],
      "no-underscore-dangle": [
        "error",
        {
          "allow": [
            "_links"
          ]
        }
      ],
      "arrow-body-style": [
        "off"
      ],
      "object-curly-newline": [
        "error",
        {
          "ObjectExpression": {
            "minProperties": 2,
            "multiline": true,
            "consistent": true
          },
          "ObjectPattern": {
            "consistent": true
          },
          "ImportDeclaration": {
            "consistent": true
          },
          "ExportDeclaration": {
            "consistent": true
          }
        }
      ],
      "object-property-newline": [
        "error",
        {
          "allowMultiplePropertiesPerLine": false
        }
      ],
      "import/no-extraneous-dependencies": [
        "error",
        {
          "devDependencies": [
            "**/*.test.js",
            "**/setupTests.js"
          ],
          "optionalDependencies": false
        }
      ],
      "react/jsx-filename-extension": [
        "error",
        {
          "extensions": [
            ".js",
            ".jsx",
            ".tsx",
            ".ts"
          ]
        }
      ],
      "react/jsx-indent": [
        "error",
        4
      ],
      "react/jsx-indent-props": [
        "error",
        4
      ],
      "react/require-default-props": [
        "off"
      ],
      "react/jsx-curly-spacing": [
        "off"
      ],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  },

Did v18 remove definitions for jsx-curly-newline, state-in-constructor, etc?
If so, then it would make sense that they would need to be defined within a particular eslint config as opposed to being extended on.
I couldn't find release notes for v18 to confirm this though.

[ljharb]

I'm not aware that CRA is compatible with the airbnb config without ejecting; no, v18 did not remove those definitions. Are you sure npm ls exits successfully?

[kaitlynbrown]

CRA is definitely compatible with airbnb config without ejecting, I have been using it that way for over a year now with no problems

[AustinNChristensen]

@ljharb Running an npm ls through grep eslint results in this:
```├─┬ @typescript-eslint/[email protected]
│ ├─┬ @typescript-eslint/[email protected]
│ │ ├─┬ @typescript-eslint/[email protected]
│ │ └─┬ [email protected]
│ ├── [email protected]
├─┬ @typescript-eslint/[email protected]
│ ├── @types/[email protected]
│ ├── @typescript-eslint/[email protected] deduped
│ ├─┬ @typescript-eslint/[email protected]
│ └── [email protected]
npm ERR! peer dep missing: [email protected], required by [email protected]
npm ERR! peer dep missing: eslint-plugin-import@^2.18.0, required by [email protected]
npm ERR! peer dep missing: eslint-plugin-react@^7.14.2, required by [email protected]
npm ERR! peer dep missing: react-redux@^4.0.0 || ^5.0.0 || ^6.0.0, required by [email protected]
npm ERR! peer dep missing: eslint-plugin-react@^7.14.2, required by [email protected]
npm ERR! peer dep missing: [email protected], required by [email protected]
│ │ ├── [email protected] deduped
│ │ ├── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
├─┬ [email protected]
├─┬ UNMET PEER DEPENDENCY [email protected]
├─┬ UNMET PEER DEPENDENCY [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
├─┬ [email protected]
├─┬ UNMET PEER DEPENDENCY [email protected]
├── [email protected]
│ ├─┬ @typescript-eslint/[email protected]
│ │ ├── @typescript-eslint/[email protected] deduped
│ │ ├─┬ @typescript-eslint/[email protected]
│ ├─┬ @typescript-eslint/[email protected]
│ │ ├── @typescript-eslint/[email protected] deduped
│ │ ├── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ ├── [email protected] deduped
│ │ ├── [email protected] deduped
│ │ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ ├─┬ [email protected]
│ ├─┬ UNMET PEER DEPENDENCY [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ ├── [email protected] deduped
│ ├─┬ [email protected]
│ ├── UNMET PEER DEPENDENCY [email protected] deduped
│ ├── [email protected] deduped

The output claims that theres an unmet peer dependency for a few items, including eslint-plugin-react, but in my package-lock, we have this snippet:

"eslint-plugin-react": {
  "version": "7.12.4",
  "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz",
  "integrity": "sha512-1puHJkXJY+oS1t467MjbqjvX53uQ05HXwjqDgdbGBqf5j9eeydI54G3KwiJmWciQ0HTBacIKw2jgwSBSH3yfgQ==",
  "requires": {
    "array-includes": "^3.0.3",
    "doctrine": "^2.1.0",
    "has": "^1.0.3",
    "jsx-ast-utils": "^2.0.1",
    "object.fromentries": "^2.0.0",
    "prop-types": "^15.6.2",
    "resolve": "^1.9.0"
  },

```
So, in short, I'm not sure how accurate that unmet dependency truly is.

[ljharb]

npm ls is always accurate; if it exits nonzero, your dep graph is invalid. The npm err lines are what's most concerning.

[axten]

had same issue...
I solved that by updating eslint to v6

[ljharb]

I'm not sure what's going on here, but if it's an issue with CRA, then I think it needs to be filed there; if with eslint 6, it should be filed there.

This config is in use with both eslint 5 and 6 in many projects and apps, so I'm pretty convinced there's nothing this project can do to fix the issue.

[Rodrirokr]

Create-React-App V3.1.1 now have ESLint 6 support, updating it worked for me.

[daniloas80]

Hi guys,
I get around this problem too! I added these line on rules of eslintrc.js
'react / state-in-constructor': 'off',
'react / static-property-placement': 'off',
'react / jsx-props-no-spreading': 'off',

Now, I don't have these errors boding me anymore

[lukeupup]

I had exactly the same problem, and solved it by add "plugin:react/recommended" in extends.

package.json:

{
  //...
  "eslintConfig": {
    "extends": [
      "plugin:react/recommended",
      "airbnb"
    ]
  },
  //...
}

[ljharb]

That definitely shouldn't be necessary; the issue is likely that npm ls fails.

[tmkasun]

Yes i'm, too getting the

error  Definition for rule 'react/jsx-curly-newline' was not found  react/jsx-curly-newline

error after updating the plugin ,

here is my .eslintrc.js config

module.exports = {
  parser: "babel-eslint",
  parserOptions: {
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true,
      modules: true
    }
  },
  env: {
    browser: true,
    es6: true,
    "jest/globals": true,
    jest: true,
    node: true
  },
  extends: ["airbnb", "plugin:jsx-a11y/recommended"],
  rules: {
    "max-len": ["error", { code: 120, tabWidth: 4 }],
    "require-jsdoc": [
      "warn",
      {
        require: {
          FunctionDeclaration: true,
          MethodDefinition: true,
          ClassDeclaration: true
        }
      }
    ],
    "valid-jsdoc": [
      "warn",
      {
        requireReturn: false
      }
    ],
    indent: ["error", 4, { SwitchCase: 1 }],
    "import/no-extraneous-dependencies": [
      "off",
      {
        devDependencies: false,
        optionalDependencies: false,
        peerDependencies: false
      }
    ],
    "import/no-unresolved": ["off"],
    "import/extensions": ["off"],
    "import/no-named-as-default": ["off"],
    "import/no-named-as-default-member": ["off"],
    "no-underscore-dangle": [
      "error",
      {
        allowAfterThis: true
      }
    ],
    "no-restricted-syntax": ["off"],
    "no-plusplus": ["off"],
    "class-methods-use-this": ["off"],
    "arrow-body-style": "off",
    "prefer-template": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "jsx-a11y/no-noninteractive-element-interactions": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "react/jsx-indent": ["error", 4],
    "react/jsx-indent-props": ["error", 4],
    "no-mixed-operators": ["error"],
    "jsx-quotes": ["error", "prefer-single"],
    "no-else-return": "off",
    "no-unused-vars": ["error"]
  },
  plugins: ["react", "jest", "prettier"]
};

[ljharb]

@tmkasun and does npm ls pass successfully?

[tmkasun]

@ljharb , No there are some errors, but I was able to resolve that issue by updating the eslint-plugin-react package.

now i'm not getting this error

 1:1  error  Definition for rule 'react/jsx-curly-newline' was not found          react/jsx-curly-newline

[ljharb]

@tmkasun and what version of eslint-plugin-react are you using?

[tmkasun]

Now having eslint-plugin-react version 7.16.0 previously had 7.13.0

[ljharb]

@tmkasun please file an issue on eslint-plugin-react and we can go into this in more detail.

[tmkasun]

@ljharb , The issue is resolved After updating the eslint-plugin-react package to `7.16.0 . So do I need to create an issue?

[ljharb]

Nope, not if everythings working.