eslint-plugin-react-refresh

eslint-plugin-react-refresh

Validate that your components can safely be updated with fast refresh.

Limitations

⚠️ To avoid false positive, this plugin is only applied on tsx & jsx files ⚠️

Like the implementation for vite, the plugin rely on naming conventions (i.e. use ). This is why there is some limitations:

• export * are not supported and will be reported as an error
• anonymous function are not supported (i.e export default function() {})
• Full uppercase export would be considered as an error. It can be disabled locally when it's effectively a React component:

// eslint-disable-next-line react-refresh/eslint-plugin-react-refresh
export const CMS = () => <></>;

Installation

npm i -D eslint-plugin-react-refresh

Usage

{
  "plugins": ["react-refresh"],
  "rules": {
    "react-refresh/only-export-components": "warn"
  }
}

Fail

export const foo = () => {};
export const Bar = () => <></>;

export const CONSTANT = 3;
export const Foo = () => <></>;

export default function () {}

export * from "./foo";

Pass

export default function Foo() {
  return <></>;
}

const foo = () => {};
export const Bar = () => <></>;

Changelog

0.2.0

• Fix TS import
• Document limitations