Eslint-plugin-react: function-component-definition breaks code

[wmertens]

When I auto-fix function-component-definition, it decides that the below is a function component (it's not really) and that it should use arrow notation:

const RULES = [
    {
        serialize(el) {
            if (el.type !== 'tag') return
            const data = el.data.toJS ? el.data.toJS() : el.data
            const text = el.nodes[0].text

            return <Tag linked value={{...data, props: {label: text}}} />
        },
    },
]

It proceeds to auto-fix like this:

const RULES = [
    {
        serialize(el) => {
[...]

which is invalid. It should have changed it to serialize: el => { instead

Another option is that the rule ignores object function notation.

[ljharb]

This seems like two issues - one is that the autofix is incorrect, and produces invalid syntax. The other is that since this is a lowercase method of an object literal, we shouldn't detect it as a component.

[ljharb]

cc @stefan-wullems

[stefan-wullems]

I'll take a look

[ljharb]

(to clarify; the invalid autofix is a much more urgent issue)

[wmertens]

Great, thanks! Question: does it generally ignore lowercase identifiers now or is that a separate bug?

[ljharb]

Yes, custom components must be PascalCased as far as I know.

If there's a case you think is a bug, please do file an issue :-)