Problem with VariantProps ?

[McPixeI]

Hi, I have built a component library with React, Vite, TailwindCSS and Class Variance Authority (CVA) and Typescript.

Importing components in a consumer projects works as expected. However, the props for variants (provided by CVA) do not work. They appear in the compiled .d.ts files, but do not work when I use the components.

The main problem I see when i generate the definition file (xxx.d.ts) is that the

declare type badgeVariants = VariantProps<typeof badgeStyles>;

This is generated like that:

type badgeVariants = {
    [x: string]: any;
    [x: number]: any;
    [x: symbol]: any;
}

Instead of:

type checkboxVariants = {
    variant?: "default" | "indeterminate" | null | undefined;
    disabled?: boolean | null | undefined;
    error?: boolean | null | undefined;
    checked?: boolean | null | undefined;
}

When I do a build in the project, the dist is correctly generated and the VariantProps is working propperly, but when I use this project as a dependency of another, the (xxx.d.ts) file shows the first code that I show with the [xxx]: any.

Here it is my tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    

    "declaration": true,
    "allowSyntheticDefaultImports": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "typeRoots": ["./dist/nomo-ui.d.ts"],

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["index.ts", "src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

and the related part of my package.json:

  "files": [
    "dist"
  ],
  "main": "dist/nomo-ui.umd.js",
  "module": "dist/nomo-ui.js",
  "types": "dist/nomo-ui.d.ts",
  "exports": {
    ".": {
      "main": "./dist/nomo-ui.umd.js",
      "module": "./dist/nomo-ui.es.js"
    },
    "./dist/plugin.cjs": "./dist/plugin.cjs",
    "./dist/style.css": "./dist/style.css"
  },

[McPixeI]

Ok it was a problem with moduleResolution in tsconfig file.

If you put moduleResolution to "Bundler" and execute "yarn build", the generated type definition file (xxx.d.ts) has the correct path for "ClassProp" from "cva", but not the consumer projects.

If you put moduleResolution to "node", you will see the ClassProp import path generated on dist/xxx.d.ts to change and give error on the library project, but not on the consumer projects.

Hope this helps to anyone who is facing the same problmem.

[dxptqhtlutehvlyxcmtg]

Had this same issue. "Bundler" fixes it but I'm building for Node. Fortunately, it looks like "Node16" also generates the correct path for "ClassProp".

This works for me:

"module": "Node16",
"moduleResolution": "Node16",

[multivoltage]

Did you put in consumer or library project?

[dxptqhtlutehvlyxcmtg]

This was for a library

[multivoltage]

Can you provider a full tsconfig? Even if I fixed with other solution , putting this settings generate different errors

[dxptqhtlutehvlyxcmtg]

I've kind of lost track of that project so I'm not 100% sure, but I think this was what I was using:

{
  "compilerOptions": {
    "jsx": "react",
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noEmitOnError": true,
    "importHelpers": true,
    "skipLibCheck": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2020",
    "module": "Node16",
    "moduleResolution": "Node16",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "outDir": "build"
  },
  "include": [
    "src"
  ]
}

The lockfile says class-variance-authority@0.7.0

[ako-v]

I have the same issue, but using node as the moduleResolustion does not solve it.

here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "outDir": "dist",
    "declaration": true,
    "declarationMap": true
  },
  "include": ["./src"]
}

my vite.config.ts:

import dts from "vite-plugin-dts";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve, basename } from "path";

import { dependencies, peerDependencies } from "./package.json";

function getComponentName(entryName: string): string {
  const name = basename(entryName);
  return name.replace(/\..+$/, "").toLowerCase();
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    dts({
      include: ["src"],
      exclude: ["src/**/*.stories.ts", "src/**/*.stories.tsx"],
    }),
    react({
      jsxRuntime: "automatic",
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src", "index.ts"),
      formats: ["es"],
      fileName: (ext, entry) => {
        const componentName = getComponentName(entry);
        return `${componentName}.${ext}.js`;
      },
    },
    rollupOptions: {
      external: [...Object.keys(peerDependencies), ...Object.keys(dependencies), "react/jsx-runtime"],
      output: { preserveModules: true, exports: "named" },
    },
    target: "esnext",
    sourcemap: true,
  },
});

and this is the relevant part of package.json:

  "type": "module",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "sideEffects": false,
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./package.json": "./package.json",
    "./dist/*": "./dist/*"
  },
  "files": [
    "dist"
  ],

[jimbo0378]

@ako-v , did you find a solution yet? Running into the same problem with similar setup.

[jimbo0378]

@ako-v , problem is caused by package.json from cva, (exports & types are clashing). We've found a workaround:

dts({ beforeWriteFile: (filePath: string, content: string) => ({ filePath, content: content.replace('class-variance-authority/types', 'class-variance-authority/dist/types'), }) }),

[multivoltage]

Correct answer for me

[lucasdu4rte]

I used the import of the separate type of the cva function and it looks like this:

import type { VariantProps } from 'class-variance-authority';

It's working for me.

[ahmed-rezk-dev]

Is not working with me

import { join, resolve } from 'node:path';
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import tailwindcss from '@tailwindcss/vite';

import { peerDependencies } from './package.json';

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    dts({
      tsconfigPath: './tsconfig.app.json',
      beforeWriteFile: (filePath: string, content: string) => ({
        filePath,
        content: content.replace(
          'class-variance-authority/types',
          'class-variance-authority/dist/types'
        ),
      }),
    }),
  ],
  build: {
    target: 'ES2020',
    minify: false,
    lib: {
      entry: {
        components: resolve(__dirname, join('lib/components', 'index.ts')),
        hooks: resolve(__dirname, join('lib/hooks', 'index.ts')),
        index: resolve(__dirname, join('lib', 'index.ts')),
      },
      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'cjs'}`,
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.names[0] == 'shared-core.css') return 'style.css';
          return assetInfo.names[0];
        },
      },
      // Exclude peer dependencies from the bundle to reduce bundle size
      external: ['react/jsx-runtime', ...Object.keys(peerDependencies)],
    },
  },
});

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

import { cn } from '../../utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
        outline:
          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2',
        sm: 'h-8 rounded-md px-3 text-xs',
        lg: 'h-10 rounded-md px-8',
        icon: 'h-9 w-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button';
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = 'Button';

export { Button, buttonVariants };

Result after build:

import { VariantProps } from 'class-variance-authority';
import * as React from 'react';
declare const buttonVariants: (props?: ({
    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    asChild?: boolean;
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
export { Button, buttonVariants };
//# sourceMappingURL=Button.d.ts.map

Error:

1. Type '{ children: string; variant: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps & RefAttributes<HTMLButtonElement>'.
     Property 'variant' does not exist on type 'IntrinsicAttributes & ButtonProps & RefAttributes<HTMLButtonElement>'. [2322]

[ahmed-rezk-dev]

I found out the problem looks like from npm. When I published the package. everything works fine. Don't know the reason yet. But it's working

[nlopin]

I migrated to the new major version and it solved the problem. It is in beta now, however I didn't get any issues