Javascript: react/jsx-wrap-multilines arrow rule breaking eslint.

[AndrewSouthpaw]

Dependencies:

    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",

I'm getting this error in my eslint:

Error: [snip]/node_modules/eslint-config-airbnb/rules/react.js:
    Configuration for rule "react/jsx-wrap-multilines" is invalid:
    Value "data["0"].arrow" has additional properties.

Referenced from: airbnb
Referenced from: [snip]/.eslintrc.json

Error: [snip]/node_modules/eslint-config-airbnb/rules/react.js:
    Configuration for rule "react/jsx-wrap-multilines" is invalid:
    Value "data["0"].arrow" has additional properties.

Referenced from: airbnb
Referenced from: [snip]/.eslintrc.json

It appears to be caused by this line. If I disable it, the problem goes away.

Is anyone else experiencing this problem?

[ljharb]

• How are you running eslint? Are you sure it's a local install?
• If you run npm ls, does it exit zero? If not, does npm install fix the problem?

[AndrewSouthpaw]

Thanks for getting back to me, @ljharb.

I'm running eslint through local node_modules in my RubyMine IDE.

npm ls returns this report:

npm ERR! invalid: [email protected] /Users/andrew/Projects/TransparentClassroom/node_modules/eslint-config-airbnb
npm ERR! invalid: [email protected] /Users/andrew/Projects/TransparentClassroom/node_modules/eslint-plugin-jsx-a11y
npm ERR! invalid: [email protected] /Users/andrew/Projects/TransparentClassroom/node_modules/eslint-plugin-react

npm install succeeded without messages but did not fix the problem. I've never seen this invalid message before for a package...

[ljharb]

Can you try it on the command line? Editor integrations always tend to have bugs that complicate debugging.

Are you using create-react-app? I don't believe there is yet a version of it that is compatible with eslint-config-airbnb v15.

[ibigpapa]

RubyMine and Webstorm are made by jetbrains.
There is an open issue on webstorms bug tracker. I've added details for it there. @AndrewSouthpaw you'll probably want to submit an issue in RubyMine tracker and reference the webstorm or add additional information to the existing Webstorm bug.
https://youtrack.jetbrains.com/issue/WEB-27045

I'm using Webstorm 2017.2 EAP I use the Arc generator. with the redux project. https://github.com/diegohaz/arc/tree/redux

I generated the code base. Ran tests without issue. Updated using npm-check-updates and npm update after the npm update I'm seeing this error.

I only get the error while using Webstorm.

I was able to run npm run lint, npm run test without issues via cli.

Error: /home/WebstormProjects/test/node_modules/eslint-config-airbnb/rules/react.js:
    Configuration for rule "react/jsx-wrap-multilines" is invalid:
    Value "data["0"].arrow" has additional properties.

Referenced from: airbnb
Referenced from: /home/WebstormProjects/test/.eslintrc

Error: /home/WebstormProjects/test/node_modules/eslint-config-airbnb/rules/react.js:
    Configuration for rule "react/jsx-wrap-multilines" is invalid:
    Value "data["0"].arrow" has additional properties.

Referenced from: airbnb
Referenced from: /home/WebstormProjects/test/.eslintrc
    at validateRuleOptions (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-validator.js:109:15)
    at Object.keys.forEach.id (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-validator.js:156:13)
    at Array.forEach (native)
    at Object.validate (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-validator.js:155:35)
    at load (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:559:19)
    at configExtends.reduceRight (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:424:36)
    at Array.reduceRight (native)
    at applyExtends (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:408:28)
    at load (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:566:22)
    at configExtends.reduceRight (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:424:36)
    at Array.reduceRight (native)
    at applyExtends (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:408:28)
    at Object.load (/home/WebstormProjects/test/node_modules/eslint/lib/config/config-file.js:566:22)
    at loadConfig (/home/WebstormProjects/test/node_modules/eslint/lib/config.js:63:33)
    at getLocalConfig (/home/WebstormProjects/test/node_modules/eslint/lib/config.js:130:29)
    at Config.getConfig (/home/WebstormProjects/test/node_modules/eslint/lib/config.js:260:26)
Process finished with exit code -1

package.json

{
  "name": "arc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "npm run dev",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "test": "jest",
    "coverage": "npm test -- --coverage",
    "postcoverage": "opn coverage/lcov-report/index.html",
    "lint": "eslint src src-clean test .storybook webpack.config.js",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "dev": "npm run env:dev -- webpack-dev-server --progress",
    "build:clean": "rimraf \"dist/!(.git*|Procfile)**\"",
    "build:copy": "copyfiles -u 1 public/* public/**/* dist",
    "prebuild": "npm run build:clean && npm run build:copy",
    "build": "npm run env:prod -- webpack --progress"
  },
  "jest": {
    "modulePathIgnorePatterns": [
      "<rootDir>/src-clean"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/fileMock.js",
      "^(components|containers)$": "<rootDir>/test/componentsMock.js",
      "^(store|\\.\\.)\\/selectors$": "<rootDir>/test/selectorsMock.js",
      "^(store|\\.\\.)\\/actions$": "<rootDir>/test/actionsMock.js"
    }
  },
  "devDependencies": {
    "@kadira/storybook": "^2.35.2",
    "@webpack-blocks/dev-server2": "^0.4.0",
    "@webpack-blocks/webpack2": "^0.4.0",
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.5",
    "babel-preset-env": "^1.2.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-1": "^6.16.0",
    "copyfiles": "^1.0.0",
    "cross-env": "^5.0.0",
    "enzyme": "^2.7.0",
    "eslint": "^3.14.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-no-unused-vars-rest": "^1.0.4",
    "eslint-plugin-react": "^7.0.1",
    "file-loader": "^0.11.0",
    "happypack": "^4.0.0-beta.1",
    "html-webpack-plugin": "^2.26.0",
    "jest-cli": "^20.0.4",
    "opn-cli": "^3.1.0",
    "raw-loader": "^0.5.1",
    "react-addons-test-utils": "^15.4.1",
    "redux-mock-store": "^1.2.1",
    "rimraf": "^2.6.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-blocks-happypack": "^0.1.0",
    "webpack-blocks-split-vendor": "^0.2.1",
    "webpack-dev-server": "^2.3.0",
    "webpack-md5-hash": "^0.0.5"
  },
  "dependencies": {
    "babel-polyfill": "^6.20.0",
    "bootstrap": "^3.3.7",
    "history": "4.6.1",
    "lodash": "^4.17.4",
    "normalizr": "^3.0.1",
    "query-string": "^4.3.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "3.0.0-beta.6",
    "react-modal": "^1.6.5",
    "react-redux": "^5.0.1",
    "react-router": "^4.1.1",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-form": "^6.4.3",
    "redux-saga": "^0.15.3",
    "styled-components": "^2.0.0",
    "styled-theme": "^0.3.0",
    "styled-tools": "^0.1.2",
    "validator": "^7.0.0",
    "whatwg-fetch": "^2.0.2"
  }
}

[ljharb]

@ibigpapa your package.json requires eslint ^3.14, but the airbnb config requires ^3.19. Can you try rerunning the install command in the eslint-config-airbnb readme (verbatim) so that your peer dep versions are correct?

[ljharb]

(Let's keep debugging here, but if it works on the command line and not in your IDE, it's definitely an IDE bug)

[ibigpapa]

Reinstall airbnb using the peer deps worked :D thanks

[advance512]

Please explain what you mean by that, @ibigpapa ?

Can you give the explicit command?

Something like

PKG=eslint-config-airbnb npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG"

?

[ljharb]

@advance512 yes, it's in the readme of the linter config package.

[ibigpapa]

( export PKG=eslint-config-airbnb; npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest" )

[Geczy]

Same error

[ljharb]

Make sure you don't have any eslint stuff installed globally; only locally.

[AndrewSouthpaw]

It does appear to be an IDE issue in my case, the command line worked fine. Thanks for help with debugging, @ljharb, I'll wait on IntelliJ to get its act together. ;)

[FrancescoBorzi]

I got the same problem

[ljharb]

@ShinDarth please file a new issue, after ensuring that npm ls exits successfully and thus your peer deps are properly installed, and ensuring that the problem is reproducible on the command line.

[carloseduardosx]

I had the same issue, but in my case the problem was the [email protected] dependency witch have the [email protected] dependency. I was able to fix this by updating the react-scripts to ^1.0.10 version.

[taxigy]

I can't really confirm that react-scripts of version below 1 cause this problem. I have [email protected], and it works just fine. Worked until recently.

As @ljharb recommended,

npm ls

actually is a one stop solution. It immediately shows all the missing peer dependencies and makes it quite clear what exact versions are expected to be installed. In my case,

"eslint": "^3.15.0",
"eslint-config-airbnb": "latest",
"eslint-plugin-import": "^2.2.0",
-"eslint-plugin-jsx-a11y": "^4.0.0",
-"eslint-plugin-react": "^6.9.0",
+"eslint-plugin-jsx-a11y": "^5.1.1",
+"eslint-plugin-react": "^7.1.0",
"react-scripts": "0.8.5"

did the trick.

[framerate]

I've been getting this in atom, FYI for the last day after upgrading some packages (using the shell script in the README to get correct versions. I don't see any eslint related problems in npm ls either. :/

[ljharb]

@framerate after any node_modules changes, Atom tends to need a full restart.

[framerate]

Yeah I had restarted a few times, ended up rolling back to previous dependencies of yours from another project and atom got friendly again.

I'll try upgrading again, if I'm the only one reporting it it must have been user error :)

[dnkodi]

npm install fixed the problem in vscode. thanks @ljharb