Error: with Webpack 5 and tailwind due to default import of clsx library

[bbpcoforge]

Hi Joe,
Thanks for the prompt reply. I am opening this discussion to get the resolution of the error I am getting.

I am implementing a React application with shadcnui (https://ui.shadcn.com/), tailwindcss, clsx (1.2.1) class-variance-authority (0.6.1) and bundling the app using Webpack 5 (5.4.0).

I am using clsx to merge tailwind class below is the code snap...

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
return twMerge(clsx(inputs));
}

And I noticed class-variance-authority is also using clsx. When I am trying to run my project I am getting the error cx is not a function in node_module/class-variance-authority/index.mjs.
If I change the
import clsx from "clsx";
to
import {clsx} from "clsx";
everything works fine. have you tested this library with Webpack 5?

I tried several ways and googled this error but no luck. I need your support to fix this issue.

Thank you in advance
Bipin Pandey

[bbpcoforge]

@joe-bell Could you please help me on this

[joe-bell]

Try https://github.com/joe-bell/cva/releases/tag/v0.7.0