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.03k stars 330 forks source link

Fix Import to work with SSR #259

Closed JemiloII closed 11 months ago

JemiloII commented 2 years ago

Describe the bug Every time I load this module on an ssr page with nuxt. My application throws an error as it is looking for browser globals. Please check for these globals so that it doesn't crash with an SSR load!

To Reproduce Create a nuxt with SSR enable and load the qrcode-stream element.

Screenshots Screenshot_1

Desktop (please complete the following information): ALL

Smartphone (please complete the following information): ALL

gruhn commented 2 years ago

It's difficult to eliminate these SSR errors. The library relies heavily on Web APIs. A workaround might be something like:

<template>
  <client-only>
    <qrcode-stream />
  </client-only>
</template>

<script>
export default {

  components: {
    'qrcode-stream': async () => {
      const { QrcodeStream } = await import("vue-qrcode-reader")
      return QrcodeStream
    }
  }

}
</script>
github-actions[bot] commented 11 months ago

This issue has been marked as stale. If there is no further activity it will be closed.