Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript: prop Type is not assignable to type never when extending VariantProps #175

Open
yaman3bd opened this issue Mar 27, 2024 · 5 comments
Labels
bug Something isn't working need info Further information is requested

Comments

@yaman3bd
Copy link

Describe the bug
I am building a React UI Component library, and using tailwind-variants for the styles of the component.
for the component props, I am extending VariantProps to have the component variants included in the props:

export type ButtonProps = RACButtonProps &
  Omit<ButtonVariantProps, "isDisabled" | "isFocusVisible" | "onlyIcon"> & {
  icon?: React.ReactElement<typeof Icon>;
  iconAlign?: "start" | "end";
};

however after I built the library and published it to NPM when I want to use any component in my project, typescript always throws an error on the component variants.
my button styles:

import {VariantProps, tv} from "tailwind-variants";

const button = tv({
  variants: {
    variant: {
      solid: "...",
      outline: "...",
      link: "..."
    },
    color: {
      primary: "...",
      secondary: "...",
      warning: "...",
      success: "...",
      danger: "...",
      info: "...",
      gray: "...",
      gradient: "..."
    },
  },
  defaultVariants: {
    variant: "solid",
    color: "primary",
  },
});

export type ButtonVariantProps = VariantProps<typeof button>;
export {button};

To Reproduce
Steps to reproduce the behavior:
I have made this minimal reproducible example:
https://github.com/yaman3bd/tailwind-variants-issue

  1. npm i tailwind-variants-issue
  2. import Button component from the package and use it in your project:
import { Button } from 'tailwind-variants-issue'

function App() {
  return (
    <div className="App">
      <Button
        variant="link"
        color="gray"
      />
    </div>
  );
}

3.typescript will throw an error on the variant/color props with the following message:

TS2322: Type string is not assignable to type never

Expected behavior
I expected the types and intellisense to work as expected with correct types and props names,
but it does not work

Screenshots
Screenshot 2024-03-27 at 11 31 21 AM

Additional context
I thought it might be an IDE issue, I have tried it in Webstorm and VSCode and had the same issue, however when I hard coded the variants it worked without any issue:

export type ButtonProps = RACButtonProps & {
  variant?: "solid" | "outline" | "link";
  color?: "primary" | "secondary" | "warning" | "success" | "danger" | "info" | "gray" | "gradient";
};
@yaman3bd yaman3bd added the bug Something isn't working label Mar 27, 2024
@preshonyee
Copy link

I have the same issue and I can't seem to land on a solution yet.

@mskelton
Copy link
Collaborator

mskelton commented Apr 6, 2024

@yaman3bd It looks like you are on an old version of Tailwind Variants. Please update to the latest version and then see if you can still reproduce it.

@preshonyee
Copy link

@yaman3bd It looks like you are on an old version of Tailwind Variants. Please update to the latest version and then see if you can still reproduce it.

@yaman3bd still happens even on the latest version of tailwind-variants

@yaman3bd
Copy link
Author

@yaman3bd It looks like you are on an old version of Tailwind Variants. Please update to the latest version and then see if you can still reproduce it.

@mskelton
I have upgraded to the latest version and now I have a new run time error:

Uncaught TypeError: Cannot read properties of undefined (reading 'twMerge')

my repo which has my library setup:
https://github.com/yaman3bd/vite-build-issue
another repo has the library installed and shows the error:
https://github.com/yaman3bd/test-lib-build

@mskelton
Copy link
Collaborator

@yaman3bd Can you set this up as a code sandbox so I can run the example quickly?

@mskelton mskelton added the need info Further information is requested label Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working need info Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants