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.

我已经构建了一个组件库，使用React、TailwinCSS和类差异授权(CVA)，并使用TypeScrip进行编译。我的构建目录中有三个目录--一个用于CJS，一个用于ESM，一个用于类型。

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.

与大多数类型一样，导入组件的工作方式与预期相同。然而，变种的道具(由CVA提供)不起作用。它们出现在已编译的.d.ts文件中，但在我使用这些组件时不起作用。无论我是从Barrel文件还是从单个文件导入，都会发生这种情况。

My package.json contains these fields:

我的Package.json包含以下字段：

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

和我的tsfig.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:

带有两个tsfig.(模块格式).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?

导致除变体道具外的所有按钮道具都在消费应用程序中正确输入？

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

刚才我也遇到了同样的问题。我只需在我的tsfig.json中将“modeResolve”更改为“bundler”，它就起作用了。

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