eslint mobx/missing-observer rule false positive with forwardRef

[TimMoore]

Intended outcome:

I am using the mobx-react observer function with a component that is also wrapped with React forwardRef, such as the example below:

import { observer } from 'mobx-react';
import { ForwardedRef, forwardRef } from 'react';

const MobxObserverForwardRefExample = observer(
  forwardRef(function MobxObserverForwardRefExample({ name }: { name: string }, ref: ForwardedRef<HTMLHeadingElement>) {
    return (
      <div>
        <h1 ref={ref}>Mobx Observer Forward Ref Example {name}</h1>
      </div>
    );
  }),
);

export default MobxObserverForwardRefExample;

I am extending plugin:mobx/recommended in my .eslintrc.json.

Actual outcome:

With the mobx/missing-observer eslint rule enabled, it fails to detect the observer wrapper on this component because of the forwardRef call in between:

MobxObserverForwardRefExample.tsx
  5:14  warning  Component `MobxObserverForwardRefExample` is missing `observer`  mobx/missing-observer

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.

How to reproduce the issue:

I wasn't able to quickly figure out how to make ESLint work in a CodeSandbox, but this is easy to reproduce with the component above.

Versions

• React 18.3.1
• MobX 6.12.0
• mobx-react 9.1.0
• eslint-plugin-mobx 0.0.10

[urugator]

Fixed in eslint-plugin-mobx@0.0.11

[TimMoore]

Amazing! Thanks for the quick fix.