reactjs - Ogiltigt hook-anropsfel när jag använder mitt eget bibliotek från styled-components

Jag skapade mitt eget UI-verktyg från styled-components-biblioteket (med TypeScript och Rollup).

Till exempel har jag följande komponent:

import styled from 'styled-components'

export const MyUITest2 = styled.div`
  color: red;
`

Så, jag använder den här komponenten i ett annat projekt:

<MyUITest2>This is my test</MyUITest2>

Och när jag kör applikationen får jag:

The above error occurred in the <styled.div> component:
    in styled.div (at ...)
...

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See ... react-invalid-hook-call for tips about how to debug and fix this problem.

Jag tror att det finns ett problem med styled-components eftersom när jag använder en enkel utan styled-components, visas min komponent i applikationen.

Här är mitt GitHub-förråd: https://github.com/aehp20/ionic-react-my-ui-components

Tack på förhand!

Svar #1

Kontrollera din package.json och se till att react och react-dom inte finns bland dependencies, lägg istället till båda i peerDependencies.

Detta fel uppstår när det finns två olika react-instansier igång, så om du har react i UI-biblioteket installerat kommer det att krocka med react-versionen av projektet där du implementerar UI-biblioteket.

Relaterade artiklar