Lerna + Styled Components monorepo invalid hooks

Viewed 234

I am working on a monorepo that has a centralised UI library in which I want to use styled-components.

I currently have the library working fine without styled-components and am able to pull components into other projects successfully.

However as soon as I install styled components and refactor a component to use a style I get an invalid hook call.

I have seen multiple issues regarding invalid hooks but none with a basic styled component implementation.

enter image description here

I have tried to make the simplest component possible to export to get this working

Component

import React from 'react'
import styled from 'styled-components'

const StyledButton = styled.button`
    background: #000;
`
  
const Button = ({ children }) => {
    return (
        <StyledButton>{ children }</StyledButton>
    )
}

export default Button

Basic structure and react versions

Packages
    library: 
       react & react-dom: ^17.0.1 (react & react-dom)
       styled-components: ^5.2.1
    website:
       react & react-dom: ^17.0.1 (react & react-dom)
0 Answers
Related