CODEWITHSUNDEEP
reactjstypescript
SirGolem
SirGolem

Reputation: 147

Class Variance Authority props not working in TypeScript

I have built a component library with React, TailwindCSS and Class Variance Authority (CVA), and compiled with Typescript. I have three directories in my build directory - one for CJS, one for ESM and one for types.

Importing components works as expected, as do most types. 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. This happens whether I import from a barrel file or from individual files.

My package.json contains these fields:

"main": "./build/cjs/index.js",
"module": "./build/esm/index.js",
"types": "./build/types/index.d.ts",
"exports": {
    ".": {
        "types": "./build/types/index.d.ts",
        "require": "./build/cjs/index.js",
        "import": "./build/esm/index.js",
        "default": "./build/esm/index.js"
    },
    "./*": {
        "types": "./build/types/*.d.ts",
        "require": "./build/cjs/*.js",
        "import": "./build/esm/*.js",
        "default": "./build/esm/*.js"
    },
    "./styles/*": {
        "default": "./styles/*.css"
    }
}

and my tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./build",
        "target": "ES2016",
        "moduleResolution": "Node",
        "jsx": "react-jsx",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules"]
}

with two tsconfig.(module format).jsons:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./build/esm",
        "module": "ESNext"   <- "CommonJS" for CJS
    }
}

Why does

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}

lead to all button props except the variant props being properly typed in the consuming app?

Upvotes: 2

Views: 5276

Answers (2)

Lucas Duarte
Lucas Duarte

Reputation: 51

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

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

Upvotes: 0

Rony Moura
Rony Moura

Reputation: 29

Just now I was having the same problem. Just changed the "moduleResolution" to "Bundler" in my tsconfig.json and it worked.

{ 
  "compilerOptions": {
    "moduleResolution": "Bundler"
  }
}

Upvotes: 2

Related Questions