TypeScript Issue

[yordis]

"typescript": "5.0.4",
"clsx": "1.2.1"

Hey there, I need clarification on what is happening right now. I have the following piece of code:

import clsx from 'clsx';
import Link from 'next/link';

type ConnectWithUsButtonProps = { className?: string };
// This one fails as well.
// type ConnectWithUsButtonProps = { className: string | undefined };

export function ConnectWithUsButton(props: ConnectWithUsButtonProps) {
  return (
    <Link
      href="/"
      className={clsx(
        'flex-shrink-0 bg-yellow-300 hover:bg-yellow-400 font-bold text-black rounded-full py-4 px-6 shadow-lg',
        // TODO: remove ! from className
        props.className!
      )}
    >
      Connect with us
    </Link>
  );
}

I am getting the following issue:

Argument type string | undefined is not assignable to parameter type ClassValue

I am not sure why I must use ! now when it used to work just fine before.

I do not get why this is happening. Everything seems just fine.

I really appreciate any help you can provide.

[charlesfrisbee]

@yordis yep you're right you don't need the non-null assertion ! as props.className has type string | undefined which falls within that of type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined

Try restarting your ts server?

[yordis]

I am going to assume it was LSP or whatever Intellij was doing ... odd