magiclabs/magic-js

NextJS - Cannot read properties of undefined (reading 'isMetaMaskBrowser')

yvesshum opened this issue ยท 1 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

magic.wallet.connectWithUI throws Cannot read properties of undefined (reading 'isMetaMaskBrowser') when ran in a NextJS app

Test with Chrome and Chrome Incognito

๐Ÿงฉ Steps to Reproduce

I created a fresh NextJS app created with npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Ran npm install --save magic-sdk which installed 19.3.1 (same problem happens with 19.0.0, 18.0.0)

Created this page to test connectWithUI

import { Magic } from 'magic-sdk';

const createMagic = () => {
  if (typeof window !== "undefined") return new Magic("APIKEY", {
    network: 'mainnet'
  });
  return null;    
}

export default function Home() {
  const magic = createMagic() 
  return (
    <div>
      <button onClick={magic?.wallet.connectWithUI}>Test</button>
    </div>
  )
}

๐Ÿค” Expected behavior

Should not throw error on click

๐Ÿ˜ฎ Actual behavior

image
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isMetaMaskBrowser')
    at eval (index.mjs:5:11162)
    at Generator.next (<anonymous>)
    at eval (index.mjs:1:1129)
    at new Promise (<anonymous>)
    at E (index.mjs:1:953)
    at eval (index.mjs:5:11119)
    at eval (index.mjs:5:3321)
    at new Promise (<anonymous>)
    at Ce (index.mjs:5:3294)
    at X (index.mjs:5:2573)
    at connectWithUI (index.mjs:5:11119)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at eval (react-dom.development.js:9288:1)
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)
    at dispatchEvent (react-dom.development.js:6457:1)
    at dispatchDiscreteEvent (react-dom.development.js:6430:1)

๐Ÿ’ป Code Sample

[If possible, please provide a code repository, gist, code snippet or sample files to reproduce the issue.]

๐ŸŒŽ Environment

Software Version(s)
magic-sdk 19.3.1, 19.3.0, 19.0.0, 18.0.0
Browser Chrome
yarn npm 9.3.1, yarn 1.22.17
Operating System OSX 12.0.1

Hi @yvesshum ,

I wasn't able to reproduce this error following the steps you provided. You can, however, refer to this demo I created using Next JS latest and Magic. You can refer to the lib folder's magic.js file for the Magic instantiation.

The demo uses

Software Version
magic-sdk 19.3.1
next 13.4.19

View the sandbox code for the demo here. Feel free to fork the demo!

I am closing this because the expected behavior was achieved in the given environment and the steps to reproduce the issue were followed but did not produce the issue. If this doesn't resolve your issue please let us know and we will reopen this one.

Thank you!