Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This

[axk2]

×
i have this error when i try to use this plugin

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 https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

//component
`
import React from "react"
import Paypal from "gatsby-plugin-paypal"

const PaylpalButton = () => (
<Paypal
style={{
shape: 'rect',
color: 'blue',
layout: 'horizontal',
label: 'paypal',
}}
amount={10.1}
/>
)

export default PaylpalButton
`

//just a simple page
`
import React from 'react'
import PaypalButton from '../components/PaypalButton'

const Home= () => {
return (

)
}

export default Home
`

//config
.... plugins: [ { resolve:gatsby-plugin-paypal, options: { clientId: process.env.PAYPAL_ID } }, .... ] ....

plugin version 1.1

[alexislepresle]

Hello @axk2,
You should try it like this:

import React from "react"
import Paypal from "gatsby-plugin-paypal"

const PaylpalButton = () => {   
   return (
      <Paypal
          style={{
              shape: 'rect',
              color: 'blue',
              layout: 'horizontal',
              label: 'paypal',
          }}
          amount={10.1}
      />
   )
}

export default PaylpalButton

[axk2]

i've just made all of the documentation, the id, the config, the install, the component, and always is the same error

[axk2]

i've deleted all the cache files, node modules, etc, installed all again

[alexislepresle]

Could you invite me to your repo? So that I can look at your code 👍🏻

[axk2]

sure, https://github.com/axk2/paypal-plugin-error i've replicated it for you, so it's simplier to analize

[alexislepresle]

Hello @axk2,

I just updated the packages and that's it, the issue is solved.

Thank you :)

[axk2]

thank you, it's a very good plugin, more people should use it

[yewyewXD]

@alexislepresle which packages did you update? I'm facing the same issue, would really appreciate it if you share more detail :)

[lawrencejberry]

Hi @alexislepresle, thanks for creating this package, it's really nifty! @yewyewXD I think this issue is still around and stems from the fact that the package is specifying React as a dependency rather than just a peer dependency. I was able to get around it by installing React 17 (react@^17.0.1 and react-dom@^17.0.1) before installing the plug-in. The package manager then successfully picked up the plug-in's React dependency as a duplicate. The ideal solution would be to remove React as a dependency of this package as the React docs suggest.

[alexislepresle]

Hi @lawjb , @yewyewXD ,

I just fixed the issue, normally it's good now :)