TypeError: Cannot read properties of undefined (reading 'getContext')

[ekkis]

I have the following code:

const { Image } =  useQRCode()
  return (
    <>
    <Image text={link} />
    <p/>
    <a href={link} target="_new">{link}</a>
    </>
  )

which breaks with the following errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'getContext')
at renderCanvas (browser.js?b4d5:27:1)
at eval (next-qrcode.es.js?5558:1:168)
at invokePassiveEffectCreate (react-dom.development.js?ac89:23487:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
at flushPassiveEffectsImpl (react-dom.development.js?ac89:23574:1)
at unstable_runWithPriority (scheduler.development.js?bcd2:468:1)
at runWithPriority$1 (react-dom.development.js?ac89:11276:1)
at flushPassiveEffects (react-dom.development.js?ac89:23447:1)
at eval (react-dom.development.js?ac89:23324:1)
at workLoop (scheduler.development.js?bcd2:417:1)
at flushWork (scheduler.development.js?bcd2:390:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:157:1)

The above error occurred in the component:

at n (webpack-internal:///./node_modules/next-qrcode/dist/next-qrcode.es.js:7:138)
at eval (webpack-internal:///./pages/index.js:52:62)
at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./pages/_app.js:40:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:820:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:944:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at eval (webpack-internal:///./pages/index.js:52:62)
at WEBPACK_DEFAULT_EXPORT (webpack-internal:///./pages/_app.js:40:27)

if I remove the image component from the page, the value displayed in the link is http://localhost:3000/auth?id=u5-btJ73LdoDIqwaAAAn&userId=288100 and if I hard code that value in the image:

    <Image text={'http://localhost:3000/auth?id=u5-btJ73LdoDIqwaAAAn&userId=288100'} />

the QR code shows up correctly. what am I doing wrong here?

[bonface221]

Hey there are you using nextjs?

[bonface221]

make sure to add "use client" on the top