What type of constants are allowed to be exported when using Vite

[SayakMukhopadhyay]

Hello

This might not be an issue per se, but I am struggling to understand why some constants are passing the linter whereas others are failing. I am trying shadcn ui and one of the components it generates is as such

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "span"

  return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }

This leads to a lint error for the badgeVariants constant getting exported. A few tests shows that while export const test = "test" doesn't throw a lint error, export const test = JSON.parse('{"test": "test"}') does throw the same error.

Is it because test is not a primitive but a result of a function call, just like how badgeVariants is a result of the function call made to cva? Is this a real issue for HMR when using Vite?

Related shadcn-ui/ui#7736

[ArnaudBarre]

Yes only primitive constant are allowed. How they are created (function call or not doesn't matter), what matters is the runtime value of the export.

For now either now there are 4 possibilities to handle this case:

• Don't export badgeVariants if not used outside of Button
• If only few components needs it, export all of them from one file called badges-components.tsx for ex and don't export badgeVariants
• Move badgeVariants to its own file
• Add an eslint-ignore in the file and accepts an annoying warning when editing it.

The warning is here mostly so that it guides people towards a file structure that will lead to quick HMR most of the time, but it doesn't hurt to have a few files you don't update often and don't respect it. This will simply makes updates for them more slow but it will still works.

Maybe Vite could provide a way to opt-out of the warning for some files, I've started to think about it.

In the long run (probably > 1 year), Vite will default to bundle in dev and this should avoid the need for such a strict file rule (I still need to validate it, I didn't yet try this PR)

[SayakMukhopadhyay]

Thanks for the response. I have raised an issue with the shadcn-ui folks to see if this can be mitigated on their end. If not, I will add a rule to ignore this rule for only the components generated by shadcn-ui, since, as you said, they are very rarely modified.