Eslint: http://eslint.org/docs/rules/new-cap fails for JSX

[justin808]

Tell us about your environment

• ESLint Version: 3.9
• Node Version: 6.7
• npm Version:

What parser (default, Babel-ESLint, etc.) are you using?

Please show your full configuration:
https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx#L73

    // require a capital letter for constructors
    'new-cap': ['error', {
      newIsCap: true,
      newIsCapExceptions: [],
      capIsNew: false,
      capIsNewExceptions: ['Immutable.Map', 'Immutable.Set', 'Immutable.List'],
    }],

What did you do? Please include the actual source code causing the issue.

// https://github.com/eslint/eslint/issues/6876
// eslint-disable new-cap

import classNames from 'classnames';
import React, { PropTypes } from 'react';

import CommentsCount from './CommentsCount';
import * as paths from '../../constants/paths';

const NavigationBar = (props) => {
  const { commentsCount, pathname } = props;

  /* eslint-disable new-cap */
  return (
    <nav className="navbar navbar-default" role="navigation">
      <div className="container">
        <div className="navbar-header">
          <button
            type="button"
            className="navbar-toggle"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
          >
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar" />
            <span className="icon-bar" />
            <span className="icon-bar" />
          </button>
          <a className="navbar-brand" href="http://www.shakacode.com">ShakaCode</a>
        </div>
        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul className="nav navbar-nav">
            <li className={classNames({ active: (pathname === paths.ROUTER_PATH) })}>
              <a href={paths.ROUTER_PATH}>React Router Demo</a>
            </li>
            <li className={classNames({ active: (pathname === paths.NO_ROUTER_PATH) })}>
              <a href={paths.NO_ROUTER_PATH}>React Demo</a>
            </li>
            <li className={classNames({ active: (pathname === paths.SIMPLE_REACT_PATH) })}>
              <a href={paths.SIMPLE_REACT_PATH}>Simple React</a>
            </li>
            <li className={classNames({ active: (pathname === paths.RAILS_PATH) })}>
              <a href={paths.RAILS_PATH}>Classic Rails</a>
            </li>
            <li>
              <a
                href={
                  'https://github.com/' +
                  'shakacode/react-webpack-rails-tutorial'
               }
              >
                Source on Github
              </a>
            </li>
            <li>
              <a
                href={
                  'http://www.railsonmaui.com/' +
                  'blog/2014/10/03/integrating' +
                  '-webpack-and-the-es6-transpiler' +
                  '-into-an-existing-rails-project/'
               }
              >Tutorials</a>
            </li>
            <li>
              <a
                href={
                  'http://forum.shakacode.com/' +
                  't/fast-rich-client-rails-development' +
                  '-with-webpack-and-the-es6-transpiler/82/22'
               }
              >Forum</a>
            </li>
            {commentsCount && CommentsCount({ commentsCount })}
          </ul>
        </div>
      </div>
    </nav>
  );
};

NavigationBar.propTypes = {
  commentsCount: PropTypes.number,
  pathname: PropTypes.string.isRequired,
};

export default NavigationBar;

What did you expect to happen?
No error for line {commentsCount && CommentsCount({ commentsCount })}

What actually happened? Please include the actual, raw output from ESLint.

➜ ~/shakacode/react-on-rails/react-webpack-rails-tutorial/client (update-dependencies) ✗ npm run lint ✖ ✹ ✭ [21:50:27]

[email protected] lint /Users/justin/shakacode/react-on-rails/react-webpack-rails-tutorial/client
eslint --ext .js,.jsx .

/Users/justin/shakacode/react-on-rails/react-webpack-rails-tutorial/client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx
73:31 error A function with a name starting with an uppercase letter should only be used as a constructor new-cap

✖ 1 problem (1 error, 0 warnings)

[vitorbal]

Thanks for the report. IMO, the rule is behaving as expected. In fact, this looks like an exact duplicate of a previous issue: https://github.com/eslint/eslint/issues/6876#issuecomment-238898033

Has anything changed since then that would justify taking another look at this?

[not-an-aardvark]

I'm closing this issue since the rule appears to be working as intended. However, feel free to reopen if anyone thinks it would be worth changing the behavior.

[jackhsu978]

@justin808 you can just write <CommentsCount commentsCount={commentsCount} /> instead, right?