Extra space after function in an onClick={} breaks the linter

[ShaynaCummings]

node version: 6.11.2
babel-eslint version: 8.2.2
yarn version: 0.27.5

.eslintrc:

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "standard",
    "standard-react",
    "airbnb"
  ],
  "env": {
    "es6": true,
    "mocha": true,
    "node": true,
    "browser": true
  },
  "globals": {
    "expect": false,
    "assert": false,
    "sinon": false,
    "__WEBPACK__": false,
    "__DEVTOOLS__": false,
  },
  "plugins": [
    "standard",
    "babel",
    "react"
  ],
  "rules": {
    "curly": ["error", "multi-line"],
    "object-curly-spacing": ["error", "always"],
    "operator-linebreak": 0,
    "semi": ["error", "never"],
    "keyword-spacing": ["error", {
      "before": true,
      "after": true
    }],
    "space-before-function-paren": ["error", "never"],
    "arrow-parens": 0,
    "babel/arrow-parens": [2, "always"],
    "react/prop-types": [2, { "ignore": ["css"] }],
    "jsx-quotes": [2, "prefer-double"],
    "react/jsx-filename-extension": 0,
    "import/no-named-as-default": 0,
    "no-use-before-define": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "react/forbid-prop-types": 0,
    "no-unused-expressions": 0,
    "import/prefer-default-export": 0,
    "react/no-danger": 0,
  }
}

I discovered an issue in JSX where having an extra space after a function in an onClick breaks the linter, and it's not clear to the user why:

return (
    <Row
        title={<div> <a href={titleUrl} onClick={() => { track(data)} } >{title}</a></div>}
    />
)

This is the error I get:

sourceCode.getCommentsBefore is not a function
TypeError: sourceCode.getCommentsBefore is not a function
    at Object.fix (.../node_modules/eslint-plugin-react/lib/rules/jsx-curly-spacing.js:258:46)
    at RuleContext.report (.../node_modules/eslint/lib/rule-context.js:127:34)
    at reportNoEndingSpace (.../node_modules/eslint-plugin-react/lib/rules/jsx-curly-spacing.js:252:15)
    at EventEmitter.validateBraceSpacing (.../node_modules/eslint-plugin-react/lib/rules/jsx-curly-spacing.js:370:11)
    at emitOne (events.js:101:20)
    at EventEmitter.emit (events.js:188:7)
    at NodeEventGenerator.applySelector (.../node_modules/eslint/lib/util/node-event-generator.js:265:26)
    at NodeEventGenerator.applySelectors (.../node_modules/eslint/lib/util/node-event-generator.js:294:22)
    at NodeEventGenerator.enterNode (.../node_modules/eslint/lib/util/node-event-generator.js:308:14)
    at CodePathAnalyzer.enterNode (.../node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:602:23)
    at CommentEventGenerator.enterNode (.../node_modules/eslint/lib/util/comment-event-generator.js:98:23)
    at Traverser.enter (.../node_modules/eslint/lib/eslint.js:929:36)

After much trial and error I found that the error goes away if you remove the space after the function:

return (
    <Row
        title={<div> <a href={titleUrl} onClick={() => { track(data) }} >{title}</a></div>}
    />
)

[reergymerej]

It's not just handlers.

const factory = (props = {}) => (
  <RegistrationConfiguration.WrappedComponent {...defaultProps } {...props} />
)

The extra space after defaultProps above got me too.

[fpauer]

+1

[reergymerej]

This is an eslint-plugin-react issue. jsx-eslint/eslint-plugin-react#1779 (comment)

[kaicataldo]

Thank you for the issue. Now that @babel/eslint-parser has been released, we are making this repository read-only. If this is a change you would still like to advocate for, please reopen this in the babel/babel monorepo.