Bunlong
TypeError: Cannot read properties of undefined (reading 'getContext')
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?
