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 PascalCase for components, camelCase for util functions). This is why there are some limitations:
export *
are not supported and will be reported as an error- Anonymous function are not supported (i.e
export default function() {}
) - Class components are not supported
- Full uppercase export would be considered as an error. It can be disabled locally when it's effectively a React component:
export const CMS = () => <></>;
I may publish a rule base on type information from typescript-eslint to improve some limitations and catch some naming convention issues (like non-component function starting with an uppercase).
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";
const Tab = () => {};
export const tabs = [<Tab />, <Tab />];
const App = () => {};
createRoot(document.getElementById("root")).render(<App />);
Pass
export default function Foo() {
return <></>;
}
const foo = () => {};
export const Bar = () => <></>;
import { App } from "./App";
createRoot(document.getElementById("root")).render(<App />);