Eslint-plugin-react: Definition for rule 'react/wrap-multilines' was not found

[goodbomb]

I'm getting this error using eslint-plugin-react v7.3.0. I understand this is supposed to be a deprecated rule, so why am I getting this error?

Errors:
  1  https://google.com/#q=react%2Fwrap-multilines
 @ ./src/common/index.js 16:14-33
 @ ./src/app/App.jsx
 @ ./src/main.jsx
 @ multi webpack-hot-middleware/client?reload=true?path=http://localhost:5000/__webpack_hmr react-hot-loader/patch babel-polyfill ./src/main.jsx

ERROR in ./src/main.jsx

  ✘  https://google.com/#q=react%2Fwrap-multilines  Definition for rule 'react/wrap-multilines' was not found
  src/main.jsx:1:1
  import React from 'react';
   ^


✘ 1 problem (1 error, 0 warnings)

[jseminck]

Can you give your eslint config please? My guess is you may be extending some eslint configuration that has this rule still enabled.

[goodbomb]

// .eslintrc

/**
 * These rules are for React and JSX syntax using a modified version of the AirBnB config files.
 * https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js
 */
{
    "extends": [
        ".es6-eslintrc"
    ],
    "env": {
        "browser": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react",
        "promise"
    ],
    "rules": {
        "jsx-quotes": [2, "prefer-double"],
        "react/display-name": [0, { "ignoreTranspilerName": false }],
        "react/forbid-prop-types": [0, { "forbid": ["any", "array", "object"] }],
        "react/jsx-boolean-value": [1, "always"],
        "react/jsx-closing-bracket-location": [2, "line-aligned"],
        "react/jsx-curly-spacing": [2, "never", { "allowMultiline": true }],
        "react/jsx-handler-names": [0, {
            "eventHandlerPrefix": "handle",
            "eventHandlerPropPrefix": "on",
        }],
        "react/jsx-indent-props": [2, 4],
        "react/jsx-key": 0,
        "react/jsx-max-props-per-line": [0, { "maximum": 1 }],
        "react/jsx-no-bind": [2, {
            "ignoreRefs": true,
            "allowArrowFunctions": true,
            "allowBind": false,
        }],
        "react/jsx-no-duplicate-props": [0, { "ignoreCase": false }],
        "react/jsx-no-literals": 0,
        "react/jsx-no-undef": 2,
        "react/jsx-pascal-case": 2,
        "react/sort-prop-types": [0, {
            "ignoreCase": false,
            "callbacksLast": false,
        }],
        "react/jsx-sort-prop-types": 0,
        "react/jsx-sort-props": [0, {
            "ignoreCase": false,
            "callbacksLast": false,
        }],
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "react/no-danger": 0,
        "react/no-deprecated": "error",
        "react/no-did-mount-set-state": [2],
        "react/no-did-update-set-state": [2],
        "react/no-direct-mutation-state": 0,
        "react/no-is-mounted": 2,
        "react/no-multi-comp": [2, { "ignoreStateless": true }],
        "react/no-set-state": 0,
        "react/no-string-refs": 0,
        "react/no-unknown-property": 2,
        "react/prefer-es6-class": [2, "always"],
        "react/prefer-stateless-function": 2,
        "react/prop-types": [2, { "ignore": [], "customValidators": [] }],
        "react/react-in-jsx-scope": 2,
        "react/require-extension": [0, { "extensions": [".jsx"] }],
        "react/require-render-return": 2,
        "react/self-closing-comp": 2,
        "react/jsx-space-before-closing": [2, "always"],
        "react/jsx-wrap-multilines": ["error", {
            "declaration": true,
            "assignment": true,
            "return": true,
            "arrow": true
        }],
        "react/sort-comp": [2, {
            "order": [
                "constructor",
                "static-methods",
                "lifecycle",
                "/^on.+$/",
                "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
                "everything-else",
                "/^render.+$/",
                "render"
            ],
        }],
        "react/jsx-first-prop-new-line": [2, "multiline"],
        "react/jsx-equals-spacing": [2, "never"],
        "react/jsx-indent": [2, 4],
        "complexity": [0, 0],
        "dot-notation": [2, {
            "allowKeywords": true,
            "allowPattern": "^[a-z]+(_[a-z]+)+$" // Allow snake case.
        }],
        "max-len": [2, 160, {"ignorePattern": "\\s*<"}],
        "new-cap": [2, {
            "newIsCap": true,
            "capIsNew": false
        }],
        "no-console": [2, {allow: ["info", warn", "error"]}],
        "spaced-comment": [2, "always", { "exceptions": ["*"] }]
    }
}

// .es6-eslintrc

/**
 * These rules are for vanilla ECMAScript 6, and make no assumptions
 * about environments (e.g., Node, Browser). 
 *
 * Rules for ECMAScript 6 and specific environments are present in other files.
 */
{
    "extends": ".es5-eslintrc", 
    "rules": {
        "constructor-super": 2,
        // Allows for the most consistency between named, anonymous, and shorthand generator functions.
        "generator-star-spacing": [2, { 
            "before": true,
            "after": false
        }],
        "no-inner-declarations": 0, 
        "no-lone-blocks": 0,
        "no-this-before-super": 2,
        "no-var": 2,
        "object-shorthand": 2,
        "prefer-const": 2
    }
}

// .es5-eslintrc

/**
 * These rules are for vanilla ECMAScript 5, and make no assumptions
 * about environments (e.g., Node, Browser).
 *
 * Rules for ECMAScript 6 and specific environments are present in other files.
 */
{
    "rules": {
        "accessor-pairs": 2,
        "array-bracket-spacing": [2, "never", {
            "objectsInArrays": false
        }],
        "block-scoped-var": 2,
        "brace-style": [2, "1tbs", {
            "allowSingleLine": false
        }],
        "camelcase": [2, {
            "properties": "always"
        }],
        "comma-dangle": [2, "never"],
        "comma-spacing": [2, {
            "before": false,
            "after": true
        }],
        "comma-style": [2, "last"],
        "complexity": [2, 5], // Evaluate this in real-world development.
        "computed-property-spacing": [2, "never"],
        "consistent-return": 2,
        "consistent-this": [2, "that"],
        "curly": [2, "all"],
        "default-case": 2,
        "dot-location": 0,
        "dot-notation": [2, {
            "allowKeywords": false,
            "allowPattern": "^[a-z]+(_[a-z]+)+$" // Allow snake case.
        }],
        "eol-last": 2,
        "eqeqeq": 2,
        "func-names": 0,
        "func-style": [2, "expression"],
        "global-strict": 0, // This is deprecated, but breaks unless we turn it off.
        "guard-for-in": 2,
        "indent": [2, 4],
        "key-spacing": [2, {
            "beforeColon": false,
            "afterColon": true
        }],
        "keyword-spacing": 2,
        "linebreak-style": [2, "unix"],
        "lines-around-comment": [2, {
            "allowBlockStart": true,
            "beforeBlockComment": true,
            "beforeLineComment": true
        }],
        "max-depth": [2, 3],
        "max-len": [2, 80], // Evaluate in real-world development.
        "max-params": 0, // Often, constructors may require many dependencies.
        "max-nested-callbacks": [2, 3],
        "max-statements": 0,
        "new-cap": [2, {
            "newIsCap": true,
            "capIsNew": true
        }],
        "newline-after-var": [2, "always"],
        "new-parens": 2,
        "no-alert": 2,
        "no-array-constructor": 2,
        "no-bitwise": 2,
        "no-plusplus": 0,
        "no-caller": 2,
        "no-catch-shadow": 0, // only for IE8 and earlier
        "no-cond-assign": [2, "except-parens"],
        "no-console": 2,
        "no-constant-condition": 2,
        "no-continue": 0,
        "no-control-regex": 2,
        "no-debugger": 2,
        "no-delete-var": 2,
        "no-div-regex": 2,
        "no-dupe-args": 2,
        "no-dupe-keys": 2,
        "no-duplicate-case": 2,
        "no-else-return": 2,
        "no-empty": 2,
        "no-empty-character-class": 2,
        "no-eq-null": 2,
        "no-eval": 2,
        "no-ex-assign": 2,
        "no-extend-native": 2,
        "no-extra-bind": 2,
        "no-extra-boolean-cast": 2,
        "no-extra-parens": 0, // Can aid readability.
        "no-extra-semi": 2,
        "no-fallthrough": 2,
        "no-floating-decimal": 2,
        "no-func-assign": 2,
        "no-implied-eval": 2,
        "no-inline-comments": 0,
        "no-inner-declarations": [2, "functions"], // Only appropriate for ES5 code.
        "no-invalid-regexp": 2,
        "no-irregular-whitespace": 2,
        "no-iterator": 2,
        "no-label-var": 2,
        "no-labels": 2,
        "no-lone-blocks": 2, // Only appropriate for ES5 code.
        "no-lonely-if": 2,
        "no-loop-func": 2,
        "no-mixed-spaces-and-tabs": 2,
        "no-multi-spaces": 2,
        "no-multi-str": 2,
        "no-multiple-empty-lines": 2,
        "no-native-reassign": 2,
        "no-negated-in-lhs": 2,
        "no-nested-ternary": 2,
        "no-new": 0, // Can be useful, e.g. when passing a new instance as a parameter.
        "no-new-func": 2,
        "no-new-object": 2,
        "no-new-wrappers": 2,
        "no-obj-calls": 2,
        "no-octal": 2,
        "no-octal-escape": 2,
        "no-param-reassign": 2,
        "no-proto": 2,
        "no-redeclare": 2,
        "no-regex-spaces": 2,
        "no-return-assign": 2,
        "no-script-url": 2,
        "no-self-compare": 2,
        "no-sequences": 2,
        "no-shadow": 2,
        "no-shadow-restricted-names": 2,
        "no-spaced-func": 2,
        "no-sparse-arrays": 2,
        "no-ternary": 0,
        "no-throw-literal": 2,
        "no-trailing-spaces": 2,
        "no-undef": 2,
        "no-undef-init": 2,
        "no-undefined": 2,
        "no-underscore-dangle": 0,
        "no-unexpected-multiline": 2,
        "no-unreachable": 2,
        "no-unused-expressions": 2,
        "no-unused-vars": [2, {
            "vars": "all",
            "args": "after-used"
        }],
        "no-use-before-define": 0,
        "no-warning-comments": [2, {
            "terms": ["todo"],
            "location": "start"
        }],
        "no-with": 2,
        "object-curly-spacing": [2, "always"], // Can prevent crowding, e.g., passing options object as a parameter.
        "one-var": 0, // Case-by-case
        "operator-assignment": [2, "never"],
        "operator-linebreak": [2, "before"],
        "padded-blocks": [2, "never"],
        "quote-props": [2, "as-needed"],
        "quotes": [2, "single", "avoid-escape"],
        "radix": 2,
        "semi": [2, "always"],
        "semi-spacing": [2, {
            "before": false,
            "after": true
        }],
        "sort-vars": 0,
        "spaced-comment": [2, "always"],
        "space-before-blocks": [2, "always"],
        "space-before-function-paren": [2, "never"],
        "space-in-parens": [2, "never"],
        "space-infix-ops": [2, {
            "int32Hint": false
        }],
        "space-unary-ops": [2, {
            "words": true,
            "nonwords": false
        }],
        "strict": [2, "global"],
        "use-isnan": 2,
        "valid-jsdoc": [2, {
            "prefer": {
                "returns": "return",
                "class": "constructor",
                "default": "defaultvalue"
            },
            "requireReturn": true,
            "requireParamDescription": true,
            "requireReturnDescription": false
        }],
        "valid-typeof": 2,
        "vars-on-top": 0, // Case by case.
        "no-void": 2,
        "wrap-iife": [2, "inside"],
        "wrap-regex": 2,
        "yoda": [2, "never"]
    }
}

[ljharb]

The rule is jsx-wrap-multilines, not wrap-multilines. Your eslintrc has an error.

[goodbomb]

Uh, no it doesn't. My .eslintrc file is already using jsx-wrap-multilines as you can see above. I'm aware that wrap-multilines is deprecated, and yet I'm still receiving the error that the definition can't be found. But, of course it's missing. I've removed it from my eslintrc file.

[ljharb]

Hmm, sorry, I guess I misread.

Is this happening on the command line? It's weird that there's a google URL in the error message.

[goodbomb]

Yeah. If it helps, I'm using:

• node v8.4.0
• npm v5.3.0
• webpack v3.5.6

Basically all of my dependencies are at the latest version.

[ljharb]

Is webpack running eslint for some reason? If so, what happens if you run eslint directly?

[goodbomb]

I'm basically creating my own personal React boilerplate for my own projects. You can download and run it locally if you want: https://github.com/goodbomb/react-redux-webpack-starter

You can see all of my eslint files and package.json there

[ljharb]

OK, so what happens if you run npx eslint .?

(Generally it doesn't make any sense for your build server to run your linter; that's usually done as part of CI instead)

[goodbomb]

I use it during hot module reloading so I can immediately detect style issues. Regardless, I'm seeing the same error in Visual Studio Code.

[ljharb]

It's quite frequent that "running eslint on anything but directly on the command line" causes issues, so it's always important to ensure that you can reproduce the issue there.

For example, often, editors (and probably webpack) need to be restarted after any node_modules changes in order to pick them up; but the command line command does not have this problem.

[goodbomb]

I'll try deleting node_modules and reinstalling tomorrow. I need to head to bed for now. I'll let you know what happens. Thanks for the quick responses.

[goodbomb]

Looks like it was a different rule entirely that was causing this issue. Weird.

I needed "react/jsx-tag-spacing": [2, { "beforeSelfClosing": "always" }], instead of "react/jsx-space-before-closing": [2, "always"],

Your suggestion of running eslint directly seems to have done the trick. Thanks for the tip.

[ljharb]

Very weird. Glad you figured it out!