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

[yvesshum]

✅ 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

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

[am-hernandez]

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!