src/content/docs/linter/rules/use-component-export-only-modules.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.9.2` - Diagnostic Category: [`lint/style/useComponentExportOnlyModules`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Inspired from [`react-refresh/only-export-components`](https://github.com/ArnaudBarre/eslint-plugin-react-refresh){
"linter": {
"rules": {
"style": {
"useComponentExportOnlyModules": "error"
}
}
}
}
Enforce declaring components only within modules that export React Components exclusively.
This is necessary to enable the React Fast Refresh feature, which improves development efficiency.
The determination of whether something is a component depends on naming conventions.
Components should be written in PascalCase and regular functions in camelCase.
If the framework already has established conventions, consider optionally specifying exceptions.
export const foo = () => {};
export const Bar = () => <></>;
const Tab = () => {};
export const tabs = [<Tab />, <Tab />];
const App = () => {}
createRoot(document.getElementById("root")).render(<App />);
export default function Foo() {
return <></>;
}
const foo = () => {};
export const Bar = () => <></>;
import { App } from "./App";
createRoot(document.getElementById("root")).render(<App />);
Functions that return standard React components are also permitted.
import { memo } from 'react';
const Component = () => <></>
export default memo(Component);
allowConstantExportSome tools, such as Vite, allow exporting constants along with components. By enabling the following, the rule will support the pattern.
{
"linter": {
"rules": {
"style": {
"useComponentExportOnlyModules": {
"options": {
"allowConstantExport": true
}
}
}
}
}
}
allowExportNamesIf you use a framework that handles Hot Module Replacement(HMR) of some specific exports, you can use this option to avoid warning for them.
Example for Remix:
{
"linter": {
"rules": {
"style": {
"useComponentExportOnlyModules": {
"options": {
"allowExportNames": [
"json",
"loader",
"headers",
"meta",
"links",
"scripts"
]
}
}
}
}
}
}