Export pattern causes warning from eslint-plugin-react-refresh

[lunelson]

After initializing in a new React Vite TS Storybook starter, that happened to have this eslint plugin installed, I get warnings on a number of files that export functions in addition to a component.

Also, although documentation about "Fast Refresh" is a bit scant unfortunately, some resources on it also say that each export requires its own export statement...

https://github.com/ArnaudBarre/eslint-plugin-react-refresh

...from my eslint config:

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

[enix79]

same issue here, any updates?

[DocMoebiuz]

I would also prefer that there were no warnings.

[koutaro-masaki]

It was surprising that this hasn't been a major issue, but it seems that most of the components provided by shadcn/ui are following the only-export-components rule. The only example of rule violation I found was with the button. Additionally, I don't think the button needs to export the buttonVariants function. I have removed the buttonVariants function from the export object in the installed button.tsx.

[koutaro-masaki]

I found out that button is required to export buttonVariants due to dependencies from components such as alert-dialog. To adhere to the only-export-components rule, I decided to define buttonVariables in a file other than button.tsx and import them into button.tsx.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[philbates35]

Just came across this myself, maybe its worth considering re-opening?

[GuillemPM]

Same issue here in form when exporting useFormField

[jay-batavia]

Same issue here in form when exporting useFormField

@GuillemPM For my use, I removed the useFormField as an export from the file. It is only being used internally by the other Form components. So unless you are using the useFormField hook somewhere in your code, removing it from the export list should solve the issue.

[dmccoy-NL]

Would be great if this was looked at again.

[elalgarro]

This warning also appears when copypasting the theme provider example into a fresh create-vite project. Same workaround that @koutaro-masaki mentions works. Move the hook into its own file.

[illustrofia]

What does one have to do to get a issue reopened around here, btw? I love this project, that's why I'd like for it to be better managed 🤓

[denisorehovsky]

Not ideal, but I had to restructure my project in order to fix it. Instead of having a single button.tsx file, I now have a

button folder with:

• index.ts
• button.tsx
• variants.ts

# index.ts
export { button } from "./variants";
export { Button } from "./button";
export type { ButtonProps } from "./button";

# variants.ts
import { tv } from "tailwind-variants";

export const button = tv({
  base: "inline-flex justify-center items-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground hover:bg-primary/90",
      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
      ghost: "hover:bg-accent hover:text-accent-foreground",
      link: "text-primary underline-offset-4 hover:underline",
    },
    ...
});

# button.tsx
import { Button as AriaButton, type ButtonProps as AriaButtonProps } from "react-aria-components";
import { button } from "./variants";

interface ButtonProps extends AriaButtonProps {
  className?: string;
  size?: "sm" | "lg" | "icon" | "field";
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
  focus?: "default" | "ring";
}

function Button({ children, className, size, variant, focus, ...props }: ButtonProps) {
  return (
    <AriaButton className={button({ size, variant, focus, className })} {...props}>
      {children}
    </AriaButton>
  );
}

export { Button };
export type { ButtonProps };

[augnustin]

So, there is still no solution to this issue? Besides splitting the generated file ourselves?

[majicmaj]

bumping in 2025, still having this issue

[rafaltecza]

Button, Sidebar, and Form components are affected by this issue. To prevent ESLint warnings, I’ve temporarily added a directive above the relevant code, as I don’t want to modify the entire shadcn component structure.

// eslint-disable-next-line react-refresh/only-export-components