Autofix breaks the code

[nicofrand]

Tell us about your environment

• ESLint Version: 4.19.1
• Node Version: 6.11.1 (but reproducible with 10+ and 8+)
• npm Version: 6.2.0

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

Please show your full configuration:

Configuration

---
    parser: 'babel-eslint'
    env:
        node: true
        browser: true
        es6: true
    plugins:
        - import
        - prettier
        - dependencies
    rules:
        prettier/prettier:
            - 2
            - { printWidth: 100, tabWidth: 4, singleQuote: true, parser: "babylon", jsxBracketSameLine: true }
        # Possible errors
        #######################################################################
        no-cond-assign:
            - 2
            - 'always'
        no-console:
            - 2
        no-constant-condition:
            - 2
        no-control-regex:
            - 2
        no-debugger:
            - 2
        no-dupe-args:
            - 2
        no-dupe-keys:
            - 2
        no-duplicate-case:
            - 2
        no-empty-character-class:
            - 2
        no-empty:
            - 2
        no-ex-assign:
            - 2
        no-extra-boolean-cast:
            - 2
        no-extra-parens:
            - 0
        no-extra-semi:
            - 2
        no-func-assign:
            - 2
        no-inner-declarations:
            - 2
            - "both"
        no-invalid-regexp:
            - 2
        no-irregular-whitespace:
            - 2
        no-obj-calls:
            - 2
        no-prototype-builtins:
            - 0 # we don't use Object.create(null) in Kresus.
        no-regex-spaces:
            - 2
        no-sparse-arrays:
            - 2
        no-template-curly-in-string:
            - 2
        no-unexpected-multiline:
            - 2
        no-unreachable:
            - 2
        no-unsafe-finally:
            - 2
        no-unsafe-negation:
            - 2
        use-isnan:
            - 2
        valid-typeof:
            - 2

        # Best practices
        #######################################################################
        accessor-pairs:
            - 2
        array-callback-return:
            - 2
        block-scoped-var:
            - 2
        class-methods-use-this:
            - 0
        complexity:
            - 0
        consistent-return:
            - 0
        curly:
            - 2
            - 'all'
        default-case:
            - 2
        dot-location:
            - 0
        dot-notation:
            - 2
        eqeqeq:
            - 2
        guard-for-in:
            - 2
        no-alert:
            - 0 # TODO
        no-caller:
            - 2
        no-case-declarations:
            - 2
        no-div-regex:
            - 2
        no-else-return:
            - 2
        no-empty-function:
            - 2
        no-empty-pattern:
            - 2
        no-eq-null:
            - 2
        no-eval:
            - 2
        no-extend-native:
            - 2
        no-extra-bind:
            - 2
        no-extra-label:
            - 2
        no-fallthrough:
            - 2
        no-floating-decimal:
            - 2
        no-global-assign:
            - 2
        no-implicit-coercion:
            - 0
        no-implied-eval:
            - 2
        no-invalid-this:
            - 0
        no-iterator:
            - 2
        no-labels:
            - 0
        no-lone-blocks:
            - 2
        no-loop-func:
            - 2
        no-magic-numbers:
            - 0
        no-multi-spaces:
            - 2
        no-multi-str:
            - 2
        no-native-reassign:
            - 2
        no-new-func:
            - 2
        no-new-wrappers:
            - 2
        no-new:
            - 2
        no-octal-escape:
            - 2
        no-octal:
            - 2
        no-param-reassign:
            - 2
        no-proto:
            - 2
        no-redeclare:
            - 2
        no-restricted-properties:
            - 0
        no-return-assign:
            - 2
        no-script-url:
            - 2
        no-self-assign:
            - 2
        no-self-compare:
            - 2
        no-sequences:
            - 2
        no-throw-literal:
            - 0 # TODO
        no-unmodified-loop-condition:
            - 2
        no-unused-expressions:
            - 2
        no-unused-labels:
            - 2
        no-useless-call:
            - 2
        no-useless-concat:
            - 2
        no-useless-escape:
            - 2
        no-useless-return:
            - 2
        no-void:
            - 2
        no-warning-comments:
            - 0
        no-with:
            - 2
        radix:
            - 2
            - "always"
        vars-on-top:
            - 2
        wrap-iife:
            - 2
            - "inside"
        yoda:
            - 2

        # Strict Mode
        #######################################################################
        strict:
            - 2
            - "never"

        # Variables
        init-declarations:
            - 0
        no-catch-shadow:
            - 0
        no-delete-var:
            - 2
        no-label-var:
            - 2
        no-restricted-globals:
            - 2
            - 'event'
        no-shadow-restricted-names:
            - 2
        no-shadow:
            - 2
        no-undef-init:
            - 2
        no-undef:
            - 2
        no-undefined:
            - 2
        no-unused-vars:
            - 2
        no-use-before-define:
            - 2

        # Node.js and CommonJS
        #######################################################################
        callback-return:
            - 2
        global-require:
            - 0
        handle-callback-err:
            - 2
        no-mixed-requires:
            - 2
        no-new-require:
            - 2
        no-path-concat:
            - 2
        no-process-env:
            - 0
        no-process-exit:
            - 2
        no-restricted-modules:
            - 2
        no-sync:
            - 0

        # Stylistic issues
        #######################################################################
        array-bracket-spacing:
            - 2
            - "never"
        block-spacing:
            - 2
            - "always"
        brace-style:
            - 2
            - "1tbs"
        camelcase:
            - 2
        comma-dangle:
            - 1 # TODO 2
        comma-spacing:
            - 2
            - {before: false, after: true }
        comma-style:
            - 2
            - "last"
        computed-property-spacing:
            - 2
            - "never"
        consistent-this:
            - 2
            - "self"
        eol-last:
            - 2
        func-call-spacing:
            - 2
            - "never"
        func-name-matching:
            - 2
        func-names:
            - 0
        func-style:
            - 0
        id-blacklist:
            - 0
        id-length:
            - 0
        id-match:
            - 0
        indent:
            - 2
            - 4
            - {SwitchCase: 1}
        jsx-quotes:
            - 0
        key-spacing:
            - 2
            - {beforeColon: false, afterColon: true, mode: "strict"}
        keyword-spacing:
            - 2
            - { before: true, after: true }
        line-comment-position:
            - 0
        linebreak-style:
            - 2
            - "unix"
        lines-around-comment:
            - 0
        lines-around-directive:
            - 0
            - { before: "never", after: "always" }
        max-depth:
            - 0
        max-len:
            - 2
            - { code: 100, tabWidth: 4, ignoreTemplateLiterals: true }
        max-lines:
            - 0 # LOLNO
        max-nested-callbacks:
            - 2
            - 2
        max-params:
            - 0
        max-statements-per-line:
            - 2
        max-statements:
            - 0
        multiline-ternary:
            - 0
        new-cap:
            - 2
        new-parens:
            - 0
        newline-after-var:
            - 0
        newline-before-return:
            - 0
        newline-per-chained-call:
            - 0
        no-array-constructor:
            - 2
        no-bitwise:
            - 0
        no-continue:
            - 0
        no-inline-comments:
            - 0
        no-lonely-if:
            - 2
        no-mixed-operators:
            - 0
        no-mixed-spaces-and-tabs:
            - 2
            - "smart-tabs"
        no-multiple-empty-lines:
            - 2
            - {max: 1, maxEOF: 0, maxBOF: 0}
        no-negated-condition:
            - 0
        no-nested-ternary:
            - 2
        no-new-object:
            - 2
        no-plusplus:
            - 0
        no-restricted-syntax:
            - 0
        no-tabs:
            - 2
        no-ternary:
            - 0
        no-trailing-spaces:
            - 2
        no-underscore-dangle:
            - 0
        no-unneeded-ternary:
            - 2
        no-whitespace-before-property:
            - 2
        object-curly-newline:
            - 0
        object-curly-spacing:
            - 2
            - "always"
        object-property-newline:
            - 2
            - { allowMultiplePropertiesPerLine: true }
        one-var-declaration-per-line:
            - 0
        one-var:
            - 0
        operator-assignment:
            - 2
            - "always"
        operator-linebreak:
            - 0
        padded-blocks:
            - 0
        quote-props:
            - 0
        quotes:
            - 2
            - "single"
            - "avoid-escape"
        require-jsdoc:
            - 0 # LOLNO
        semi-spacing:
            - 2
            - {before: false, after: true}
        semi:
            - 2
            - "always"
        sort-keys:
            - 0
        sort-vars:
            - 0
        space-before-blocks:
            - 2
            - "always"
        space-before-function-paren:
            - 2
            - "never"
        space-in-parens:
            - 2
            - "never"
        space-infix-ops:
            - 2
        space-unary-ops:
            - 2
            - {words: true, nonwords: false}
        spaced-comment:
            - 2
            - "always"
        unicode-bom:
            - 0
        wrap-regex:
            - 0

        # ECMAScript 6
        arrow-body-style:
            - 0
        arrow-parens:
            - 2
            - "as-needed"
        arrow-spacing:
            - 2
            - {before: true, after: true}
        constructor-super:
            - 2
        generator-star-spacing:
            - 2
            - {before: false, after: true}
        no-class-assign:
            - 2
        no-confusing-arrow:
            - 2
        no-const-assign:
            - 2
        no-dupe-class-members:
            - 2
        no-duplicate-imports:
            - 2
        no-new-symbol:
            - 2
        no-restricted-imports:
            - 0
        no-this-before-super:
            - 2
        no-useless-computed-key:
            - 2
        no-useless-constructor:
            - 2
        no-useless-rename:
            - 2
        no-var:
            - 2
        object-shorthand:
            - 2
        prefer-arrow-callback:
            - 2
        prefer-const:
            - 0 # should be 1 or 2, but too many instances...
        prefer-numeric-literals:
            - 2
        prefer-reflect:
            - 0
        prefer-rest-params:
            - 2
        prefer-spread:
            - 2
        prefer-template:
            - 2
        require-yield:
            - 2
        rest-spread-spacing:
            - 2
            - "never"
        sort-imports:
            - 0
        symbol-description:
            - 2
        template-curly-spacing:
            - 2
            - "never"
        yield-star-spacing:
            - 2
            - "after"

        # Import plugin rules.
        import/no-unresolved:
            - 0 # doesn't properly handle paths
            - { "ignore": ['^bundle-loader\?'] }
        import/named:
            - 2
        import/default:
            - 0
        import/namespace:
            - 0 # doesn't properly handle module.exports
        import/no-restricted-paths:
            - 0
        import/no-absolute-path:
            - 2
        import/no-dynamic-require:
            - 2
        import/no-internal-modules:
            - 0
        import/no-webpack-loader-syntax:
            - 0 # we don't use webpack

        import/export:
            - 2
        import/no-named-as-default:
            - 2
        import/no-named-as-default-member:
            - 2
        import/no-deprecated:
            - 2
        import/no-extraneous-dependencies:
            - 0
        import/no-mutable-exports:
            - 2

        import/unambiguous:
            - 2
        import/no-commonjs:
            - 0
        import/no-amd:
            - 0
        import/no-nodejs-modules:
            - 0

        import/first:
            - 0
        import/no-duplicates:
            - 2
        import/no-namespace:
            - 0
        import/extensions:
            - 0
        import/order:
            - 0
        import/newline-after-import:
            - 2
        import/prefer-default-export:
            - 0
        import/max-dependencies:
            - 0
        import/no-unassigned-import:
            - 2
            - {"allow": ["**/*.css"]}
        import/no-named-default:
            - 2

        # Ensure the dependency use the appropriate case.
        dependencies/case-sensitive:
            - 2
        # Ensure there are no cyclic imports.
        dependencies/no-cycles:
            - 2
        # This check is already provided by import/no-unresolved.
        dependencies/no-unresolved:
            - 0
        # Ensure JSON imports do have an extension in the import statement.
        dependencies/require-json-ext:
            - 2

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

Please take a look at https://framagit.org/nicofrand/break-eslint/blob/master/main.js.
I do not provide the code here since I think there might be something with the spaces or tabs in this file.
Please clone the project to reproduce: https://framagit.org/nicofrand/break-eslint/tree/master.

./node_modules/.bin/eslint main.js --fix

What did you expect to happen? The file to be fixed

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

Here is eslint output:

/tmp/break-eslint/main.js
  15:17  error  Parsing error: Expected corresponding JSX closing tag for <main>

  13 |                         />
  14 |                     </main>
> 15 |                 </ErrorReporter>
     |                 ^
  16 |             </React.Fragment>
  17 |         );
  18 |     }

✖ 1 problem (1 error, 0 warnings)

Here is the output of the file, as you can see it is "broken" (several <main>, missing <Route, etc.):

class BaseApp extends React.Component {
    render() {
        return (
            <React.Fragment>
                <ErrorReporter>
                    <header />

                    <main>

                    <main>
                            path="/:section/:subsection?/:currentAccountId"
                            render={this.makeMenu}
                        />
                    </main>
                </ErrorReporter>
            </React.Fragment>
        );
    }
}

[platinumazure]

Would it be possible to provide the output of running ESLint without autofix, on the original version of the file? That way, we can see what rules were reporting lint errors (and therefore, what could potentially be trying to fix code and creating a parse error).

Also: It might be that the rules in question are from a plugin; if that's the case, then it will be up to the rule authors in that plugin to fix their autofix logic.

[nicofrand]

Here you go:

/tmp/break-eslint/main.js
   1:7   error  'BaseApp' is defined but never used                                                                                                                                                                                            no-unused-vars
   1:23  error  'React' is not defined                                                                                                                                                                                                         no-undef
   6:28  error  Replace `>` with `·/>⏎`                                                                                                                                                                                                        prettier/prettier
   7:22  error  Replace `/header` with `main`                                                                                                                                                                                                  prettier/prettier
   8:1   error  Trailing spaces not allowed                                                                                                                                                                                                    no-trailing-spaces
   8:5   error  Replace `⏎····················<main>` with `····················<Route`                                                                                                                                                        prettier/prettier
  10:1   error  Line 10 exceeds the maximum line length of 100                                                                                                                                                                                 max-len
  10:25  error  Replace `<Route·path="/:section/:subsection?/:currentAccountId"·render={this.makeMenu}` with `····path="/:section/:subsection?/:currentAccountId"⏎····························render={this.makeMenu}⏎·······················`  prettier/prettier
  15:6   error  Delete `;`                                                                                                                                                                                                                     prettier/prettier
  15:6   error  Unnecessary semicolon                                                                                                                                                                                                          no-extra-semi

✖ 10 problems (10 errors, 0 warnings)
  7 errors, 0 warnings potentially fixable with the `--fix` option.

For the plugin I really don't know, so I thought if someone could help debug it, and found that it comes from a plugin, I would move the ticket to the plugin repo.
I tried reducing as much as I could…

[platinumazure]

Thanks, I appreciate your effort to make the test case as small as possible.

In order to find out which rules are causing the problem, try disabling all but one rule (among the rules listed in the email report) and running ESLint with autofix. Hopefully only some of those will actually autofix to broken code. Depending on what you find, we can investigate any bugs with core rules or else help you create an issue in the right plugin repositories.

Happy hunting! 😄

[aladdin-add]

I was able to repro it.
some findings:

• when disabled all rules from the plugins, the error didn't occur --means it's not eslint's issue.
• enable prettier/prettier, the error did occur -- seems it's an prettier's issue.
  
• the weird thing is, if I enable all eslint rules, run eslint --fix, and then enable prettier/prettier, the error didn't occur. it might be helpful to repro the bug.

[not-an-aardvark]

Might be the same issue as prettier/eslint-plugin-prettier#65.

[nzakas]

It looks like this is an issue with the Prettier plugin. As this is a question rather than an action item, I'm closing the issue. If you still need help, please send a message to our mailing list or chatroom. Thanks!