reactjs - Los hooks de React no funcionan cuando se importan desde una biblioteca local

Estoy usando React para importar una función con un hook useState y eso parece romperlo. Tengo una versión de React con hooks:

npm ls react => [email 
npm ls react-dom => [email 

Puedo usar componentes sin problemas. Cuando incluyo un hook, obtengo la pantalla de «Llamada de hook inválida».

En mi proyecto de biblioteca tengo:

/**
 * @class ExampleComponent
 */

import * as React from 'react'

import styles from './styles.css'

export default function ThingyDefault() {
  return <p>hi</p>
}

export type Props = { text: string }

export class ExampleComponent extends React.Component<Props> {
  render() {
    const {
      text
    } = this.props

    return (
      <div className={styles.test}>
        Example Component: {text}
      </div>
    )
  }
}

////////////////// THIS DOESN'T SEEM TO WORK //////////////////
export function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

En mi proyecto que utiliza esa biblioteca:

import React from 'react';
import './App.css';
import ThingyDefault, {ExampleComponent, Example} from 'thingy';

const App: React.FC = () => {
  return (
    <div>
    <ThingyDefault />
    <ExampleComponent text='hello' />

    {/* commenting this component out makes it work */}
    <Example />
    </div>
  );
}

export default App;

¿Qué estoy haciendo mal aquí?

Respuesta #1

Dado que parece ser un problema de importación/exportación, intenta cambiar tu exportación a esto:

const Example = () => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export { Example };

Respuesta #2

No estás haciendo nada malo allí. Debería funcionar como se espera. Revisa el ejemplo en Stackblitz aquí, con la misma versión de React que tienes.

Podría volver a revisar la aplicación para ver si hay dependencias duplicadas que estén afectando la funcionalidad de los hooks. Especialmente, no puede determinar que tu function Example() es, de hecho, un componente funcional.