vue-qrcode-reader: Uncaught TypeError: Cannot read property 'getContext' of undefined when routing to another page
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 av-if one
, the error occurs as soon as the component is destroyed (i.e. as soon asshowQrCodeReader
is set to false, no need to navigate away) -
No error is displayed when using Firefox.
Thanks in advance
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 15 (4 by maintainers)
Commits related to this issue
- Uncaught TypeError: Cannot read property 'getContext' of undefined when routing to another page #85 https://github.com/gruhn/vue-qrcode-reader/issues/85 — committed to ciloholic/qrcode_stream_vue by ciloholic 5 years ago
- fix(QrcodeStream): stop worker on destroy The worker which is processing scanning jobs, is not terminated when the component is destroyed. This was intended to be guaranteed by the following mechanis... — committed to gruhn/vue-qrcode-reader by gruhn 5 years ago
It seems that
<qrcode-reader>
, which will apparently be removed in 2.0.0, still has this issue, but<qrcode-stream>
has been fixed.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.
Thanks for providing so many details in advance, I’ll look into it