gruhn / vue-qrcode-reader

A set of Vue.js components for detecting and decoding QR codes.
https://gruhn.github.io/vue-qrcode-reader
MIT License
2.1k stars 335 forks source link

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') #276

Closed OtakuFerreDavid closed 2 years ago

OtakuFerreDavid commented 2 years ago

I installed via NPM the component on my Laravel 8 with jetstream, I imported the components independantly as it show in the documentation and copy the code of the example: https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html I changed the import import { QrcodeStream } from '../../../../src' for import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

But when I load the welcome page that have the code with the component: app.js:49566 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.render (app.js:49566) at renderComponentRoot (app.js:6311) at componentEffect (app.js:9795) at reactiveEffect (app.js:4655) at effect (app.js:4630) at setupRenderEffect (app.js:9778) at mountComponent (app.js:9737) at processComponent (app.js:9697) at patch (app.js:9324) at mountChildren (app.js:9497)

If i check the error line

"use strict";

// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3ac860e9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/QrcodeStream.vue?vue&type=template&id=35411cc1&scoped=true&lang=html&

var render = function () {var _vm=this;var _h=_vm.$createElement;

ERROR HERE--->var _c=_vm._self._c||_h; return _c('div',{staticClass:"qrcode-stream-wrapper"},[_c('video',{ref:"video",staticClass:"qrcode-stream-camera",class:{ 'qrcode-stream-camera--hidden': !_vm.shouldScan },attrs:{"autoplay":"","muted":"","playsinline":""},domProps:{"muted":true}}),_c('canvas',{directives:[{name:"show",rawName:"v-show",value:(!_vm.shouldScan),expression:"!shouldScan"}],ref:"pauseFrame",staticClass:"qrcode-stream-camera"}),_c('canvas',{ref:"trackingLayer",staticClass:"qrcode-stream-overlay"}),_c('div',{staticClass:"qrcode-stream-overlay"},[_vm._t("default")],2)])} var staticRenderFns = []

// CONCATENATED MODULE: ./src/components/QrcodeStream.vue?vue&type=template&id=35411cc1&scoped=true&lang=html&

// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.includes.js var es_array_includes = __nested_webpack_require_10762__("caad");

// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js var es_array_map = __nested_webpack_require_10762__("d81d");

// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.to-string.js

I'm trying the example on localhost with visual studio code with laravel 8 inertia jetstream and vue 3

OtakuFerreDavid commented 2 years ago

SOLVED: Using: npm install vue3-qrcode-reader

and import { QrcodeStream} from "vue3-qrcode-reader";