magiclabs/magic-js

Error: Minified React error #31

pondskai opened this issue ยท 3 comments

โœ… Prerequisites

  • Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
  • Are you running the latest SDK version?
  • Are you reporting to the correct repository (magic-sdk)?

๐Ÿ› Description

My dApp uses thirdweb wallet to connect magic and use the latest magic-sdk to show magic wallet. When i click on the nft token id, i get Error: Minified React error #31.

โ”œโ”€ @thirdweb-dev/wallets@1.1.10
โ”‚ โ””โ”€ magic-sdk@13.6.2
โ””โ”€ magic-sdk@20.0.2

๐Ÿงฉ Steps to Reproduce

  1. log in magic through thirdweb wallet sdk
  2. click on wallet to see widget
  3. click on nft token to see nft details
  4. click on token id under properties
    image

๐Ÿค” Expected behavior

open the window to see preperties

๐Ÿ˜ฎ Actual behavior

get below error

Uncaught Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bgated%2C%20delivery%2C%20fileName%2C%20fileType%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Yo (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:239838)
    at d (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:241505)
    at m (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:242610)
    at app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:244714
    at iu (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:255827)
    at dc (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:297314)
    at Jl (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:287694)
    at Ql (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:287622)
    at Xl (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:287475)
    at Hl (app.chunk~vendor~react.c30abd261f6d6ba76f91.js:2:284282)

๐Ÿ’ป Code Sample

const onClickWallet = async () => {
   if (connectionStatus === 'connected') {
     setLoading(true)
     const walletWidget = magic.wallet.showUI()
     walletWidget.on('disconnect', () => {
       onClickLogout()
     })
     await walletWidget
     setLoading(false)
   } else if (connectionStatus === 'connecting') {
     return <CircularProgress />
   } else {
     await onConnectMagic()
   }
 }

 const onConnectMagic = async () => {
   try {
     await connectMagic(
       {
         type: process.env.REACT_APP_TYPE_CONNECT_MAGIC_LINK,
         apiKey: process.env.REACT_APP_API_KEY_CONNECT_MAGIC_LINK,
         chainId: parseInt(process.env.REACT_APP_CHAIN_ID)
       }
     )
     sessionStorage.setItem('wallet', 'MagicWallet')
   } catch (error) {
     console.error(error)
   }
 }

 const onClickLogout = async () => {
   await disconnect()
   setLoading(false)
   sessionStorage.removeItem('wallet')
 }

๐ŸŒŽ Environment

Software Version(s)
magic-sdk 20.0.2
Browser chrome
yarn
Operating System mac

Hi @pondskai ,

Would you please share a code sandbox with this issue reproduced? In lieu of a sandbox, would you kindly share a screen recording of this behavior, preferably with the console and network tabs visible?

As this issue may be specific to the NFT I may not be able to reproduce the issue without this additional info from you.

Thank you!

Hi @pondskai ,

Just following up to see if you are able to share a sandbox?

I am also curious if you could reproduce the behavior on https://wallet.magic.link/ by trying to view your NFT there?

Thanks!

Closing this thread now.

If you'd like to reopen with this issue please share a reproducible code sandbox or public repo where we can observe this behavior.

Thank you!