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",