Possible false-positive with memo default export

[SukkaW]

See also #27.

Example code:

import { memo } from 'react';

const Component = () => {
  return <div />;
};

console.log(Component.name);
// >> "Component"
// So actually `Component` is also named

export default memo(Component);

// eslint.config.js
import eslint from '@eslint/js';
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint"

export default tseslint.config(
  eslint.configs.recommended,
  {
    files: ['src/**/*.tsx'],
    // in main config for TSX/JSX source files
    plugins: {
      "react-refresh": reactRefresh,
    },
    rules: {
      "react-refresh/only-export-components": "warn",
    },
  },
  ...tseslint.configs.recommended,
);

And minimum reproduction on ESLint REPL.

[ArnaudBarre]

Yeah this pattern should be allowed to

[SukkaW]

@ArnaudBarre I've created a PR #45 to fix this issue.

[sparrowek]

A minor problem is that the PR does not handle React.memo() only memo() correctly

[ArnaudBarre]

ah yeah I never use this pattern, I still hope that one day React will be ESM 😂 but should be supported anyway, I'll do a quick fix

[ptmkenny]

When will this fix be available? I just tried out this plugin today and was stumped why I was getting errors with

export default React.memo(MyComponent);

Fast refresh only works when a file only exports components. Move your component(s) to a separate file. Fast refresh can't handle anonymous components. Add a name to your export.

[ArnaudBarre]

Sorry I though I'll do it directly and forgot about it! Available in 0.4.10 thanks to @SukkaW!

[ptmkenny]

Thanks to both of you!