Getting an Uncaught TypeError: Cannot read property '_c' of undefined

[adityar15]

Describe the bug I am using Vue 3.*, I followed all the steps correctly mentioned in the document of vue qrcode reader library. When I render the QR code scanner component, I am getting the following error

runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property '_c' of undefined
    at Proxy.render (VueQrcodeReader.common.js?bb6f:286)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:846)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4280)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4263)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4222)
    at processComponent (runtime-core.esm-bundler.js?5c40:4182)
    at patch (runtime-core.esm-bundler.js?5c40:3791)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3975)

Here is my code

<template>

  <div class="w-full h-54">

    <transition-group name="fade">
      <div class="my-5 mx-4 text-gray-500">
        <input
          type="text"
          class="w-60 border border-gray-300 p-2 m-2"
          v-model="value"
        />
      </div>

      <div class="block w-3/4 m-auto">
        <qrcode :value="value" :size="size" level="H" v-if="show"></qrcode>

        <br />
      </div>

    </transition-group>

    <h3 class="text-xl my-3 p-1">QR Stream</h3>

      <div v-if="error != ''" class="m-3 p-1 bg-red-300 text-red-800 h-10">
        {{ error }}
      </div>

      <div style="width: 500px" id="reader">

          <qrcode-stream></qrcode-stream>

      </div>

    <button
      class="bg-green-500 text-white px-6 py-2 m-4 font-bold rounded-full focus:outline-none"
      @click="printMsg"
    >
      {{ !show ? "Show" : "Hide" }}
    </button>
    <br />

  </div>

</template>

<script>
import QRcode from "qrcode.vue" 
import { QrcodeStream } from "vue-qrcode-reader"

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  components: {
    qrcode: QRcode,
    QrcodeStream
  },
  data() {
    return {
      show: false,
      value: "https://bootcamp.garchi.co.uk",
      size: 300,
      error: "",
    };
  },
  methods: {
    printMsg() {
      this.show = !this.show;
    },
  },

    mounted : function(){

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Does the library do not support Vue 3.*?

Thanks in advance :)

[adityar15]

Finally got it working. Instead of vue-qrcode-reader, I have to do vue3-qrcode-reader. I guess you need to change in the doc @gruhn

[gruhn]

duplicate of #203