2

I am creating a library of components. In this library, I created one component, connected it locally via npm link to my project, all work, the component was displayed. But when I decided to include styled-components to create a component. Here is my component.

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 MyCom

Then errors appeared in the console.

enter image description here

How to fix these errors and what are they related to?

Smile_mask
  • 243
  • 2
  • 7

2 Answers2

0

I also had similar case when I was working with lerna and yarn workspaces. In my case the problem was using multiple and different versions of react, some where hoisted some were not during lerna compilation process.

According to docs

In order for Hooks to work, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package.

Run this command to list installed versions of react. And if you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.

npm ls react

OR

yarn list react

Read more about the problem and solutions here

Eduard
  • 1,319
  • 6
  • 12
0

check that you have styled-components in your dependencies in file package.json

by:

 cd project_name/src
 npm install styled-components
abdelrahman aboneda
  • 176
  • 1
  • 4