Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught TypeError: Cannot read property 'getContext' of undefined when routing to another page

See original GitHub issue

Hi, In chrome console I am getting the following error when I navigate away from a component containing a qrcode reader

webpack-internal:///47:1 Uncaught TypeError: Cannot read property 'getContext' of undefined
    at VueComponent.repaintTrackingLayer (webpack-internal:///47:1)
    at VueComponent.onLocate (webpack-internal:///47:1)
    at Worker.i.onmessage (webpack-internal:///47:1)
repaintTrackingLayer @ webpack-internal:///47:1
onLocate @ webpack-internal:///47:1
i.onmessage @ webpack-internal:///47:1

More precisely: 1/ The qrcode reader is declared in a QrReader.vue component which contains a <qrcode-stream @init="onInit" @decode="onDecode"></qrcode-stream> tag, as shown in the doc. 2/ This component is included in a main component and is wrapped in a v-show directive, as follows:

              <div v-show="showQrCodeReader">
                <qr-reader/>
              </div>

As soon as the qr code reader detects a value, it is hidden (showQrCodeReader is set to false) 3/ When I click on a link that route to the application home page I get the error shown above.

Note that:

this only happens when I scan a QR Code. If I don’t scan anything (showQrCodeReader is never set to false) and navigate away, no problem.
If I remove the v-show directive, no problem neither.
If I change the v-show directive to a v-if one, the error occurs as soon as the component is destroyed (i.e. as soon as showQrCodeReader is set to false, no need to navigate away)
No error is displayed when using Firefox.

Thanks in advance

Issue Analytics

State:
Created 5 years ago
Comments:15 (4 by maintainers)

Top GitHub Comments

1reaction

oimoucommented, Apr 15, 2019

It seems that <qrcode-reader>, which will apparently be removed in 2.0.0, still has this issue, but <qrcode-stream> has been fixed.

1reaction

ghostvarcommented, Jan 17, 2019

In my case, that happen if you try to destroy the component, like using v-if or updating routes, and seem beforeDestroy hooks not work correctly in QrcodeStream.vue

but, that can be handled by using pause props after onDecode() event was run.

example in my code:

I hope that can be help you.

Top Results From Across the Web

Cannot read property "getContext" of undefined - electron

This issue is almost always caused by the canvas element not being in the DOM yet. When you use: stage = new createjs.Stage("stage");....

cannot read properties of null (reading 'usecontext') jest

To solve the "Cannot read property 'getContext' of null" error, place the JS script tag at the bottom of the body, after the...

Why is my code not going through? it's indicating ... - Sololearn

Why is my code not going through? it's indicating >>> uncaught TypeError! cannot read property 'getContext' of null line: 5. var canvas= document....

Vue.js--TypeError: Cannot read property 'getContext' of null ...

Phil has the correct answer. The created lifecycle hook is rendered before the html and the canvas will not be loaded.

How to use getContext() in jQuery - Morioh

Update your browser or use a different browser</canvas> ... Uncaught TypeError: Cannot read property 'getContext' of undefined. Any help is appreciated!