Error: Minified React error #31

[pondskai]

✅ Prerequisites

• [x] Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• [x] Are you running the latest SDK version?
• [x] 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

🤔 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

[am-hernandez]

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!

[am-hernandez]

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!

[am-hernandez]

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!