Cannot read properties of undefined (reading 'button')?

Question

[alaskafx]

Делаю свою ui библиотеку для локального использования между проектами.
Решил лить свой проект через gitlab, все сделал, однако, при попытке использовать вылазит подобная ошибка:

Cannot read properties of undefined (reading 'button')

Использую: webpack, ts, react, css modules, class-variance-authority.

Ошибка кидает именно на строку, где cva пытается достать класс .button.
Код выглядит так:

Button.tsx:

import styles from "./Button.module.css";
import { cva, type VariantProps } from "class-variance-authority";
import React, { type ButtonHTMLAttributes } from "react";

const button = cva(styles.button, {
	variants: {
		intent: {
			default: styles.buttonDefault,
			accent: styles.buttonAccent,
			stroke: styles.buttonStroke,
			disabled: styles.buttonDisabled,
			withoutBg: styles.buttonWithoutBg,
		},

	},
	defaultVariants: {
		intent: "default",
	},
});
 
export interface ButtonProps
		extends ButtonHTMLAttributes<HTMLButtonElement>,
				VariantProps<typeof button> {}

export const Button = ({ className, intent, ...props }: ButtonProps) => {
	return <button className={button({ intent, className })} {...props} />;
};

webpack.config.js:

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
    libraryTarget: "umd",
  },
  resolve: {
    extensions: [".ts", ".tsx"],
  },
  externals: {
    react: "react",
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)?$/,
        use: ["ts-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
          },
          { loader: "css-modules-typescript-loader" },
          { 
            loader: "css-loader", 
            options: { modules: true } 
        },
        ],
      },
    ],
  },
};

Comments

[alaskafx]

Может быть дело в использовании css модулей? Или я где-то просчитался..

[WbICHA]

А где цсс?

[alaskafx]

WbICHA,

.button{
	cursor: pointer;
	padding: 13px 30px;
	border-radius: 15px;
	outline: 0;
	border: 0;
	font-family: var(--font-geist, Geist), sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.32px;
}

.buttonDefault{
	background-color: #EDEDED;
	color: var(--background-color, #141414);
}

.buttonAccent{
	background-color: var(--accent-color, #E83F20);
	color: var(--font-color, #EDEDED);
}

.buttonStroke{
	background-color: transparent;
	color: var(--font-color, #EDEDED);
	border: 1px solid var(--font-gray-color, #A1A1A1);
}

.buttonDisabled{
	background-color: var(--stroke-color, #353535);
	color: var(--font-gray-color, #A1A1A1);
}

.buttonWithoutBg{
	background-color: transparent;
	color: var(--font-color, #EDEDED);
}

[WbICHA]

alaskafx, а что, у вебпака нет плагинов для цсс модулей посвежее, чем 4 летней давности?