eslint adds extra parentheses in certain scenarios, that creates a syntax error when auto fix/fix on save

[jcursoli]

Tell us about your environment

• ESLint Version: 5.14.0 - 5.15.1
• Node Version: v10.14.1 but also reproducable on eslint demo (will provide link)
• npm Version: 6.5.0

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

Please show your full configuration:

Configuration

{
    "parser": "babel-eslint",
    "extends": ["airbnb", "plugin:jsx-a11y/recommended"],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [
                    ".js",
                    ".jsx",
                    ".json",
                    ".less"
                  ],
                "paths": [
                    "./src/web",
                    "./src/common",
                    "node_modules",
                    "./src/web/toolkit/util/helperUtils.js",
                    "./test/common"
                ]
            }
        }
    },
    "env": {
        "node": true,
        "es6": true,
        "mocha": true,
        "browser": true,
        "jquery": true,
        "jest": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "plugins": ["react", "import", "jsx-a11y"],
    "rules": {
        "eqeqeq": "off",
        "linebreak-style": "off",
        "no-plusplus": "off",
        "class-methods-use-this": "off",
        "no-return-assign": "off",
        "no-underscore-dangle": "off",
        "import/no-named-as-default": "off",
        "import/prefer-default-export": "off",
        "react/destructuring-assignment": "off",
        "no-void": "off",
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1
            }
        ],
        "react/jsx-indent": ["error", 4],
        "react/prop-types": [
            2,
            {
                "ignore": [
                    "location",
                    "router",
                    "push",
                    "pop",
                    "children",
                    "params",
                    "routes"
                ]
            }
        ],
        "react/jsx-indent-props": [2, 4],
        "react/jsx-curly-spacing": [
            2,
            {
                "when": "never",
                "children": true
            }
        ],
        "no-param-reassign": [
            "error",
            {
                "props": false
            }
        ],
        "react/jsx-uses-vars": 2,
        "comma-dangle": ["error", "always-multiline"],
        "id-length": [
            2,
            {
                "exceptions": ["e", "i", "t"]
            }
        ],
        "max-len": [1, 80],
        "import/no-duplicates": 2,
        "no-duplicate-imports": 0,
        "react/no-unknown-property": 2,
        "react/jsx-filename-extension": [
            2,
            {
                "extensions": [".js", ".jsx"]
            }
        ],
        "react/sort-comp": [
            2,
            {
                "order": [
                    "static-methods",
                    "props",
                    "context",
                    "lifecycle",
                    "everything-else",
                    "render"
                ]
            }
        ],
        "arrow-parens": 0,
        "import/no-extraneous-dependencies": 0
    },
    "globals": {
        "__DEV__": false,
        "__SERVER__": false,
        "__TEST__": false,
        "__LOCAL_ORIGIN__": false,
        "getText": false,
        "NOOP": false,
        "promise": false
    }
}

What did you do?
This snippet of code below breaks when eslint does an auto fix, causing it to add extra parentheses resulting in a syntax error. Below that will be the "fixed version". this is reproducible on the eslint demo site.

import React from 'react';

class HeaderComponent extends React.Component {
    anActionThatDoesSomehting() {
         // a comment
        return surePrepActor.generateSurePrepToken()
            .then((result) => this.logout(result.url + result.token), (error) =>
            // a comment to tell me something
                this.someMethod()
            );
    }

    render() {
        return <header />;
    }
}

const SOME_METHOD_THAT_BREAKS_ESLINT = (state) => ({
    user: state.actors.user,
});

export default HeaderComponent;

Broken "fixed" code below (notice the extra parentheses created by eslint)

import React from "react";

class HeaderComponent extends React.Component {
    anActionThatDoesSomehting () {

        // A comment
        return surePrepActor.generateSurePrepToken().
            then((result) => this.logout(result.url + result.token), (error) => (
            // a comment to tell me something
                this.someMethod()
                                        )
                                                                       )
            );
    }
    render() {
        return <header />;
    }
}

const SOME_METHOD_THAT_BREAKS_ESLINT = (state) => ( ({
    "user": state.actors.user
});

export default HeaderComponent;

What did you expect to happen?
no extra parentheses to be generated creating a parsing error.
here is a link to the demo site, im not sure what rule breaks the code.
demo. Also when I remove the comments it does not cause the error. But when i ran "fix" across the whole code base a few files broke that looked similar to this code.
What actually happened? Please include the actual, raw output from ESLint.

Are you willing to submit a pull request to fix this bug?

[platinumazure]

It's not clear what rule is causing this, but I'm wondering if this is potentially fixed by PR #11407.

@jcursoli Do you have a way of testing using the branch associated with the PR I linked above?

[not-an-aardvark]

Closing on the assumption that this has been fixed by #11407, since it looks like the same issue. Feel free to comment if it hasn't been fixed in the latest version of ESLint.

[jcursoli]

I appreciate it, I verified it has been resolved. 👍