reactjs - styled-components'ten kendi kütüphanemi kullandığımda Geçersiz hook çağrısı hatası

Kendi UI aracımı styled-components kütüphanesinden oluşturdum (TypeScript ve Rollup kullanarak).

Örneğin, benim aşağıdaki bileşenim var:

import styled from 'styled-components'

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

Yani, bu bileşeni başka bir projede kullanıyorum:

<MyUITest2>This is my test</MyUITest2>

Ve uygulamayı çalıştırdığımda, şunu alıyorum:

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.

Bence styled-components ile bir sorun var çünkü basit bir kullanırken styled-components olmadan, bileşim uygulamada görüntüleniyor.

İşte benim GitHub depo: https://github.com/aehp20/ionic-react-my-ui-components

Şimdiden teşekkürler!

Cevap #1

package.json dosyanızı kontrol edin ve react ile react-dom'un dependencies içinde bulunmadığından emin olun, bunun yerine her ikisini de peerDependencies'e ekleyin.

Bu hata, iki farklı React örneği çalıştığında meydana gelir, bu nedenle UI kütüphanesinde React yüklüyse, bu, UI kütüphanesini uyguladığınız projedeki React sürümüyle çakışacaktır.

İlgili makaleler