v7.8.0+ breaks in eslint v3: Bug with spacing before curly brace in jsx

[anton-pavlov-deel]

1. Attempt check with lint following code:
   <Component onChange={(e) => set('string', e.target.value)}/>
   Causes the error:
   89:94 error A space is required before closing bracket react/jsx-tag-spacing

2. When trying to check the code with lint:
   <Component onChange={(e) => set('string', e.target.value) }/>
   Lint return:
   TypeError: sourceCode.getCommentsBefore is not a function at Object.fix (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint-plugin-react/lib/rules/jsx-curly-spacing.js:256:46)
at RuleContext.report (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint/lib/rule-context.js:127:34)
at reportNoEndingSpace (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint-plugin-react/lib/rules/jsx-curly-spacing.js:250:15)
at EventEmitter.validateBraceSpacing (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint-plugin-react/lib/rules/jsx-curly-spacing.js:368:11)
at emitOne (events.js:121:20)
at EventEmitter.emit (events.js:211:7)
at NodeEventGenerator.applySelector (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint/lib/util/node-event-generator.js:265:26)
at NodeEventGenerator.applySelectors (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint/lib/util/node-event-generator.js:294:22)
at NodeEventGenerator.enterNode (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint/lib/util/node-event-generator.js:308:14)
at CodePathAnalyzer.enterNode (/home/anton.pavlov/projects/trendmd-admin-dashboard/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:602:23)

3. But lint works properly with the following code:
   <Component
onChange={(e) => set('string', e.target.value)}
/>

Expected:
Lint works properly with both of variant of codes above

[ljharb]

I think you're missing that a "closing bracket" is referring to /> - } is a curly brace, not a bracket :-)

Try <Component onChange={(e) => set('string', e.target.value)} />

[anton-pavlov-deel]

Ok, sorry :-)
But, lint shouldn't return the error like in the point two above. I guess it should return the warning like this:
89:94 error A space is required before closing bracket react/jsx-tag-spacing

[ljharb]

Yes, the crashing part is a clear bug if you're on the latest eslint. What version do you have installed, and does npm ls exit zero?

[anton-pavlov-deel]

I have eslint-plugin-react@7.7.0

npm ls returns
├── UNMET DEPENDENCY doctrine@^2.0.2
├── UNMET DEPENDENCY has@^1.0.1
├─┬ jsx-ast-utils@2.0.1
│ └── UNMET DEPENDENCY array-includes@^3.0.3
└── UNMET DEPENDENCY prop-types@^15.6.0

npm ERR! missing: doctrine@^2.0.2, required by eslint-plugin-react@7.7.0
npm ERR! missing: has@^1.0.1, required by eslint-plugin-react@7.7.0
npm ERR! missing: prop-types@^15.6.0, required by eslint-plugin-react@7.7.0
npm ERR! missing: array-includes@^3.0.3, required by jsx-ast-utils@2.0.1

[ljharb]

ok, so it looks like your node_modules is invalid. Try rm -rf node_modules && npm install

[reergymerej]

e4de360#diff-773de86741d8d58f3b917343e985eaf0R256 introduced getCommentsBefore which was dropped in eslint@4.0.0.

Downgrading to eslint-plugin-react@7.6.0 bypasses the issue. You could also upgrade to eslint@4.0.0.

It looks like this commit should have also modified the peerDependency. It now needs 4.0.0.

[ljharb]

@reergymerej thanks, that’s very helpful. We’ll have to figure out how to restore eslint v3 support, since changing the peer dep is semver-major.

[yannickcr]

Thanks for the report @pavlovanton, and for the help to identify the issue @reergymerej.

After fixing this issue I found a couple of other small issues with ESLint 3 (69b1317, 31e4f33, 677e1bd) and they should all be fixed in next release.

I also updated our Travis configuration to run our tests on different ESLint versions (3.x.x, 4.x.x and next) to be sure we do not introduce some regressions in the future.