Estoy creando una biblioteca de componentes. En esta biblioteca, creé un componente, lo conecté localmente a través del enlace npm a mi proyecto, todo el trabajo , se mostró el componente. Pero cuando decidí incluir componentes con estilo para crear un componente. Aquí está mi componente.
import React, {FC} from 'react' import styled from "styled-components" import './mytbc.css' export interface MyButtonProps{ color:string; big?:boolean; } const MyCom: FC<MyButtonProps> = ({children, color, big, ...props}) => { const MyCommon = styled.button` background:${color}; padding:10px; ` return ( <MyCommon> {children} </MyCommon> ) } export default MyComLuego aparecieron errores en la consola.
¿Cómo corregir estos errores y con qué están relacionados?
También tuve un caso similar cuando estaba trabajando con espacios de trabajo de lerna e yarn. En mi caso, el problema fue usar versiones múltiples y diferentes de reaccionar, algunas donde se izaron otras no durante el proceso de compilación de lerna.
De acuerdo con los documentos
Para que los Hooks funcionen, la importación de reacción desde el código de su aplicación debe resolverse en el mismo módulo que la importación de reacción desde el interior del paquete react-dom.
Ejecute este comando para enumerar las versiones instaladas de reaccionar. Y si ve más de un React, deberá averiguar por qué sucede esto y corregir su árbol de dependencia.
npm ls reactO
yarn list reactLea más sobre el problema y las soluciones aquí