`react/no-arrow-function-lifecycle` creating invalid code

[devinrhode2]

Please see this comment: prettier/eslint-plugin-prettier#65 (comment)

[devinrhode2]

input:

export default class Root extends Component {
  getInitialState = () => ({
    errorImporting: null,
    errorParsing: null,
    errorUploading: null,
    file: null,
    fromExtension: false,
    importSuccess: false,
    isImporting: false,
    isParsing: false,
    isUploading: false,
    parsedResults: null,
    showLongRunningMessage: false,
  });
}

invalid output:

export default class Root extends Component {
  getInitialState() { return {
    errorImporting: null,
    errorParsing: null,
    errorUploading: null,
    file: null,
    fromExtension: false,
    importSuccess: false,
    isImporting: false,
    isParsing: false,
    isUploading: false,
    parsedResults: null,
    showLongRunningMessage: false,
  }; }); // Extra trailing paren
}

[devinrhode2]

THANK YOU @ljharb this was driving me bonkers, I was convinced it was a bug related to prettier/eslint integration, but it seems isolated to eslint.

[ljharb]

cc @ngtan

[ljharb]

The solution I came up with is a bit quick and dirty, so it probably won't work reliably for atypical forms of semicolon usage, but this should be a start, and will fix the reported issue at least :-)