Не работает библиотека classnames?

Question

[Alex_87]

Добрый день! При запуске возникает ошибка
[plugin:vite:react-swc] Bindings not found.
D:/Learn/React/DZ/react-basics-project-1/src/main.jsx



Использую css модули
Мой код:

import styles from  './Input.module.css';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

function InputComponent({name, className, placeholder}) {
  const fs = `${styles['form-style']}` + (className ? '' : ' ' + `${styles['plusPadding']}`);
  const ic = `${styles['input-icon']} ${styles['uil']} ${styles['uil-at']}` + (className ? ' ' + `${styles[className]}` : '');

  const className = cx(styles['form-style'],{
    [styles['plusPadding']] : className
  });

  return (
    
    
      <div className={styles['form-group']}>
        <input type="email" name={name} className={className} placeholder={placeholder} id="logemail" autoComplete="off" />
        <img className={ic} src="/search.svg" alt="" />
      </div>
  
    
  )
}

export default InputComponent

Как это решить? Весь вечер вчера искал, не нашёл...

P.S. У меня Windows 7

Answer 1

[Егор Иванов]

Сделайте проще, библиотека умеет работать с классами динамическим способом. То, что у вас, в документации предлагается как альтернатива.

1. Импортируйте

import classNames from 'classnames'

// и внутри компонента напишите объявление переменной:

const iconStylesClass = classNames(styles.selector)

2. Выделите классы, которые будут зависеть от каких-то условий: по пулевому типу они или будут показываться, или нет. Стандартный класс можно прописать в начале.

const iconStylesClass = cn(styles.selector, {
    [styles.selector2]: hasItems, 
    [styles.selector3]: foo && bar,
}

Также, эта библиотека умеет принимать пропсы от родителей, это очень удобно, если нужно расширить стиль компонента, не прибегая к изменениям внутри компонента.

const someStyles = cn(props.someStyle, {
    [styles.selector4]: true,
}

Такой подход более декларативный и избавляет от написания турнирных операторов внутри строк.

3. После того как определитесь со стилями, вашу переменную уже можно положить в верстку:

<div className={iconStylesClass}/>

Подробнее хорошо написано в доке здесь

Comments

[Alex_87]

Большое вам спасибо!