Console logs thousands of: cannot read properties of undefined (reading 'onPointerOut' etc)

[fendyk]

Describe the bug When using the react-router-dom useNavigate() hook together with tailwind variants by for example making a button variant component and using it inside a component or screen, the console logs thousands of messages saying:

TypeError: Cannot read properties of undefined (reading 'onMouseMoveCapture')

Using the following:

const navigate: NavigateFunction = useNavigate();

    const handleRegistered = () => {
        navigate('/route-a');
    };

button example:

import classNames from 'classnames';
import {ButtonHTMLAttributes} from 'react';
import {tv, VariantProps} from 'tailwind-variants';
import {Icon} from '../../types/icon';

export const button = tv({
    slots: {
        container: 'flex flex-row items-center shadow-md shadow-neutral-800',
        text: '',
        icon: 'w-8 h-8'
    },
    variants: {
        color: {
            primary: {
                container: ''
            },
            secondary: {
                container: 'bg-[#ffc56d]'
            }
        },
        size: {
            base: {
                container: 'p-4 pr-6',
                text: '',
                icon: ''
            }
        },
        disabled: {
            true: {
                container: '',
                text: '',
                icon: ''
            }
        },
        inverted: {
            true: {
                container: 'text-gray-500 bg-transparent !shadow-none hover:bg-transparent hover:text-black'
            }
        }
    },
    defaultVariants: {
        color: 'primary',
        size: 'base',
        disabled: false,
        inverted: false
    },
    compoundSlots: []
});

type ButtonVariants = VariantProps<typeof button>
type ButtonExcludeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>

export interface Props extends Omit<ButtonVariants, 'class'>, ButtonExcludeProps {
    icon?: Icon;
    iconPosition?: 'left' | 'right';
    onClick?: () => void;
    text?: string;
}

export function Button(props: Props) {
    const {
        className,
        disabled,
        text: textValue,
        iconPosition = 'left',
        ...otherProps
    } = props;

    const {container, text, icon} = button({
        color: props.color,
        size: props.size,
        disabled: disabled,
        inverted: props.inverted
    });

    const iconElement = props.icon ?
        <props.icon
            className={classNames(
                icon(),
                iconPosition === 'left' ? 'mr-6' : 'ml-6'
            )}
        />
        : undefined;

    return (
        <button
            className={classNames(container(), className)}
            disabled={props.disabled}
            {...otherProps}
        >
            {iconPosition === 'left' && iconElement}
            <span className={text()}>{textValue}</span>
            {(iconPosition === 'right') && iconElement}
        </button>
    );
}

To Reproduce Steps to reproduce the behavior:

1. Install tailwind variants with react-router-dom
2. Create a simple button with tailwind variants
3. Use the useNavigate hook and navigate to another page
4. See error displaying in your screen

Expected behavior It should work as intended, without the errors

Screenshots

Desktop (please complete the following information):

• OS: MacOS Sonoma 14.1
• Browser: Chrome
• Version: 119.0.6045.105

[fendyk]

When I use the following useEffect, the errors are gone, however, I still find it odd that these errors occur so I still think this is an issue that should be looked in to.

    useEffect(() => {
        if (status == LoginStatus.LoggedIn) {
            return navigate('/');
        }

    }, [status, navigate]);

[mskelton]

This is definitely not an issue with Tailwind Variants, likely some other dependency in your application that is causing this issue. I'd recommend inspecting the stack trace to identify from which module the error originated.

[fendyk]

This is definitely not an issue with Tailwind Variants, likely some other dependency in your application that is causing this issue. I'd recommend inspecting the stack trace to identify from which module the error originated.

It is, because removing tailwindcss variants solves the issue, or by doing what I described. And Like I described, it happens with react route.

I will try to make a reproduction soon