Estoy creando un pequeño entorno local de desarrollo/prueba/documentación para algunos componentes que se usan en diferentes proyectos y, por lo tanto, quiero crearlos como paquetes npm individuales.

Todo funcionaba perfectamente hasta que intenté usar useState() en uno de los componentes. Agregar esto creó los siguientes errores:

 Invalid hook call. Hooks can only be called inside of the body of a function component.

 TypeError: Cannot read properties of null (reading 'useState')

Siento que esto es extraño y no puedo entender qué lo está causando. También probé con otros ganchos para ver si solo useState era el problema, pero otros como useEffect y useRef también tienen el mismo problema.

La estructura del proyecto es:

 /components (the components to develop/test/document /component-group /Component index.js Component.js component.scss package.json /library (where all the components are developed/tested/documented) /component1 /component2 /etc (all the components that make up the library) webpack.config.js package.json etc...

Los componentes se importan a la biblioteca usando una ruta relativa porque no tendré que publicarlos en npm y actualizar la versión localmente cada vez que se realice un cambio y deba probarse.

En cuanto al código del componente donde useState está causando problemas, esta es una versión básica que todavía causa problemas:

 import React, { useState } from 'react'; const TestComponent = () => { const [testState, setTestState] = useState("testing"); return ( <p>Hello World</p> ) } export default TestComponent

Si comento la línea useState , se muestra Hello World, si elimino el comentario de la línea, aparecen los errores.

Cualquier idea sobre lo que podría estar mal sería muy apreciada.

¡Gracias de antemano!