Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This about gatsby-plugin-paypal

[axk2]

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

[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 :)

[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 :)