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

[pavlovanton]

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)} />

[pavlovanton]

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?

[pavlovanton]

I have [email protected]

npm ls returns
├── UNMET DEPENDENCY doctrine@^2.0.2
├── UNMET DEPENDENCY has@^1.0.1
├─┬ [email protected]
│ └── UNMET DEPENDENCY array-includes@^3.0.3
└── UNMET DEPENDENCY prop-types@^15.6.0

npm ERR! missing: doctrine@^2.0.2, required by [email protected]
npm ERR! missing: has@^1.0.1, required by [email protected]
npm ERR! missing: prop-types@^15.6.0, required by [email protected]
npm ERR! missing: array-includes@^3.0.3, required by [email protected]

[ljharb]

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

[reergymerej]

https://github.com/yannickcr/eslint-plugin-react/commit/e4de3600c281c87bcb18d62c10ce279374ddcde4#diff-773de86741d8d58f3b917343e985eaf0R256 introduced getCommentsBefore which was [dropped in [email protected]].

Downgrading to [email protected] bypasses the issue. You could also upgrade to [email protected].

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 (https://github.com/yannickcr/eslint-plugin-react/commit/69b1317532600eec0618352f30231da29f9435c7, https://github.com/yannickcr/eslint-plugin-react/commit/31e4f333ef9f46493dad510483fef38cd8c62f74, https://github.com/yannickcr/eslint-plugin-react/commit/677e1bd41e1711d034dddbf2cbb28698e73a72ec) 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.