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 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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (4 by maintainers)

Commits related to this issue

Most upvoted comments

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: image

I hope that can be help you.

Thanks for providing so many details in advance, I’ll look into it