Can't use React Hooks in Library

[StefanMuellerPDX]

Hey,

I am trying to implement your template into a project of mine. The Problem is that as soon a i try to add hooks from react like useState it doesnt work anymore. The problem only occurs when i try to build my vite project and serve it. When i run it in dev mode it works.

import { useState } from 'react'
import styles from './styles.module.css'
import clsx from 'clsx'

interface ComponentProps extends React.ComponentProps<'button'> {
  primary?: boolean
  size?: 'small' | 'medium' | 'large'
  label: string
}

export function MyButton({ primary = false, size = 'medium', label, ...props }: ComponentProps) {
  const style = clsx(styles.button, {
    [styles['button--primary']]: primary,
    [styles[`button--${size}`]]: size,
  })

  const [state, setState] = useState(0)

  return (
    <button
      type='button'
      className={style}
      {...props}
      onClick={() => setState(prev => prev + 1)}
    >
      {label}
      {state}
    </button>
  )
}

I just created a new vite react project with npm create vite@latest and changed the react and react-dom versions to the same as the library. Maybe you can help me or even extend your article to create a template for the project to use it with react hooks

[victor-lillo]

Hello @StefanMuellerPDX!

Sorry for the delay, I was on vacations.

Could you build a working repository with this problem and share it with me? And, how do you build and serve it?