The inferred type of 'button' cannot be named without a reference to 'class-variance-authority/dist/types'

[Alxandr]

I have a simple file containing a cva function that is reused in multiple components:

import { cva } from 'class-variance-authority';

export const button = cva(
	'button',
	{
		variants: {
			variant: {
				primary: 'primary',
				secondary: 'secondary',
				link: 'link',
				'link-light': 'link-light',
			},
			size: {
				large: 'inline-block px-6 py-4',
				small: 'inline-block px-4 py-3',
				inline: 'inline',
			},
		},
	},
);

After updating to 0.5.2, this gives me ts error 2742: The inferred type of 'button' cannot be named without a reference to 'class-variance-authority/dist/types'. I've not found a way to work around this.

[joe-bell]

Can you provide a working reproduction please?

I can see that types.d.ts is released, and it's also working in a few of my private projects. I'm not really sure unless I can dig into your use-case!

cc @msonnberger

[Alxandr]

I tried making a quick and naive reproduction, and that didn't produce the issue, so there is something bigger at play in my work project that is causing this issue. I will try to figure out how I can distill it down to a as simple as possible reproduction, but it will likely be a short while due to next week being all meetings.

For now I've downgraded to 0.4.0, which does not have this issue.

[Alxandr]

I have not been able to make a simple reproduction, but I have been able to "solve" the issue.

I patched the cva package as following:

--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -4,18 +4,19 @@ export type VariantProps<Component extends (...args: any) => any> = Omit<OmitUnd
 export type CxOptions = Parameters<typeof clsx>;
 export type CxReturn = ReturnType<typeof clsx>;
 export declare const cx: typeof clsx;
-type ConfigSchema = Record<string, Record<string, ClassValue>>;
-type ConfigVariants<T extends ConfigSchema> = {
+export type ConfigSchema = Record<string, Record<string, ClassValue>>;
+export type ConfigVariants<T extends ConfigSchema> = {
     [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
 };
-type ConfigVariantsMulti<T extends ConfigSchema> = {
+export type ConfigVariantsMulti<T extends ConfigSchema> = {
     [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
 };
-type Config<T> = T extends ConfigSchema ? {
+export type Config<T> = T extends ConfigSchema ? {
     variants?: T;
     defaultVariants?: ConfigVariants<T>;
     compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
 } : never;
-type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
+export type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
 export declare const cva: <T>(base?: ClassValue, config?: Config<T> | undefined) => (props?: Props<T> | undefined) => string;
+export type { ClassProp, ClassValue, OmitUndefined, StringToBoolean } from "./types";
 export {};

This was a bit of a sledge-hammer approach, I didn't take the time to figure out what properties I needed to export and what I didn't. But it does lead to the question, is there any good reason for these types to be private?

[joe-bell]

But it does lead to the question, is there any good reason for these types to be private?

Yes! Supporting these types publicly would lead to more breaking changes, and that's not something I'm willing to commit to I'm afraid

I would need a more detailed reproduction to investigate this further

[cardonamarc]

@Alxandr, make sure that moduleResolution: 'node' is present in your tsconfig file. That was my case.

[Alxandr]

I'm using moduleResolution: 'bundler'. Node resolution is not an option for me (and should probably be deprecated)

[MBrunoS]

To me what happened was exactly like #190, but after updating moduleResolution to bundler solved the issue with types for me.

[CombeeMike]

I'm also experiencing #190 but setting moduleResolution to bundler does not work for me. My ts config sets moduleResolution to NodeNext which should also work according to the TS error I'm seeing in my built .d.ts file:

In the consuming code, all CVA types appear as generic string instead of the proper union type:

What does seem to work for me is to change the path in the built .d.ts file:

import("class-variance-authority/types").ClassProp // Current build result, does not work
import("class-variance-authority/dist/types").ClassProp // Seems to be working

This s kind of the opposite of what this issue describes 🤔

I'm building a UI library based on ShadCN UI for use in various Next.JS app router apps and I could manually adjust those paths in the libs build process but that would be very hacky.

Is there anything else I could do on my end to solve this issue?
Please let me know if you need more info. I could also provide some minimal reproduction code but that requires some effort which I only want to invest if I know that someone is actually looking at it.

Thanks!

FYI, I'm on the latest CVA v0.7.0.