TypeError: destroy is not a function

[ademidun]

While using Depay in my React App, I get the following error: TypeError: destroy is not a function

Sidenote: I've read your documentation, many of your blog posts, tokenomics, whitepaper and I really love the product and vision of what @spape and the entire Depay team is doing. Please keep up the great work!

update: Maybe this issue can be a clue: facebook/react#19941

A similar implementation is used here and works: https://github.com/iampick/pumpbsc-front/blob/main/src/components/footer.js

Code snippet:

import React from 'react'
import DePayWidgets from '@depay/widgets';

function CryptoPaymentWidget() {

  const ETH_BLOCKCHAIN_USDC_TOKEN_ADDRESS = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
  const ATILATECH_PAYMENTS_ADDRESS = '0x...';
  const BSC_BLOCKCHAIN_BUSD_TOKEN_ADDRESS = '0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56';

  const startPayment = async () => {
    
    await DePayWidgets.Payment({
      accept:[
        {
          blockchain: 'ethereum',
          amount: 10,
          token: ETH_BLOCKCHAIN_USDC_TOKEN_ADDRESS,
          receiver: ATILATECH_PAYMENTS_ADDRESS
        },
        {
          blockchain: 'bsc',
          amount: 10,
          token: BSC_BLOCKCHAIN_BUSD_TOKEN_ADDRESS,
          receiver: ATILATECH_PAYMENTS_ADDRESS
        }
      ],
      critical: (criticalError: any)=> {
        console.log({criticalError});
      },
      error: (error: any)=> {
        console.log({error});
      }
    });
  }

  console.log({startPayment});
  
  return (
    <div>
      <button onClick={()=> {startPayment()}}>
         Pay
      </button>
    </div>
  )
}

export default CryptoPaymentWidget

Traceback in console.log
CryptoPaymentWidget.tsx:33

{error: TypeError: destroy is not a function
    at commitHookEffectListUnmount (http://localhost:3000/stat…}
error: TypeError: destroy is not a function at commitHookEffectListUnmount 
(http://localhost:3000/static/js/10.chunk.js:338384:15) at commitPassiveHookEffects 
(http://localhost:3000/static/js/10.chunk.js:338441:15) at HTMLUnknownElement.callCallback 
(http://localhost:3000/static/js/10.chunk.js:318987:18) at Object.invokeGuardedCallbackDev 
(http://localhost:3000/static/js/10.chunk.js:319036:20) at invokeGuardedCallback 
(http://localhost:3000/static/js/10.chunk.js:319089:35) at flushPassiveEffectsImpl 
(http://localhost:3000/static/js/10.chunk.js:341506:13) at unstable_runWithPriority 
(http://localhost:3000/static/js/10.chunk.js:365510:16) at runWithPriority$1 
(http://localhost:3000/static/js/10.chunk.js:329874:14) at flushPassiveEffects 
(http://localhost:3000/static/js/10.chunk.js:341474:16) at http://localhost:3000/static/js/10.chunk.js:341353:15 at workLoop 
(http://localhost:3000/static/js/10.chunk.js:365454:38) at flushWork 
(http://localhost:3000/static/js/10.chunk.js:365410:20) at MessagePort.performWorkUntilDeadline 
(http://localhost:3000/static/js/10.chunk.js:365014:31)
message: "destroy is not a function"
stack: "TypeError: destroy is not a function\n    at commitHookEffectListUnmount (http://localhost:3000/static/js/10.chunk.js

[ademidun]

The solution was upgrading from React 16 to React 17 as explained in these two discord threads.

peer dependency to react is >= 17 you have 16
it showed you a peer dependency warning upon installing @DePay/widgets
look closely what NPM prints when you call npm install @depay/widgets --save