Error when using the polyfill

[smfelsher]

My project is a Nuxt 2 (Vue 2) project and I am trying to use the @undecaf/vue-barcode-scanner on my page (Vue SFC). I installed the @undecaf/barcode-detector-polyfill package as a dependency of my project using npm.

• I have imported the polyfill

  import { BarcodeDetectorPolyfill } from '@undecaf/barcode-detector-polyfill'

• And, I am applying the polyfill in my mounted hook:

  mounted(){
  window.BarcodeDetector = BarcodeDetectorPolyfill
  }

However, I am receiving the following error:

in ./node_modules/@undecaf/barcode-detector-polyfill/dist/main.js
Module not found: Error: Can't resolve 'https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.11/dist/main.js' in '/ptda/node_modules/@undecaf/barcode-detector-polyfill/dist'

1. Why am I receiving this error?
2. I see that @undecaf/zbar-wasm is a dependency of the polyfill and installed in my node_modules, so why is it not retrieved locally?

I appreciate any help on this matter!

[undecaf]

Hello @smfelsher

1. Why am I receiving this error?
2. I see that @undecaf/zbar-wasm is a dependency of the polyfill and installed in my node_modules, so why is it not retrieved locally?

The reason for these effects is that barcode-detector-polyfill/dist/main.js imports from https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.11/dist/main.js which Webpack tries but (as must be expected) fails to resolve.

Why not just import from @undecaf/zbar-wasm? zbar-wasm has to be under LGPL (inherited from zbar, the underlying project) whereas barcode-detector-polyfill should be under MIT. IMHO, bundling zbar-wasm could violate the LGPL, so to be safe it is loaded at runtime from a CDN.

How can this be fixed? The documentation says

Bundlers must be configured so that they treat @undecaf/zbar-wasm as an external dependency instead of trying to resolve it.

For Nuxt, the Webpack configuration should be extended, and https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm should be declared as external in nuxt.config.js (untested, so please beware):

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // ...

      // Make config.externals an array in order to support multiple externals
      if (!Array.isArray(config.externals)) {
        config.externals = config.externals ? [config.externals] : []
      }

      // Declare every module named like zbar-wasm as external
      config.externals.push(/zbar-wasm/)

      // ...
    }
  }
}

If other issues arise then please take a look at this comment on zbar-wasm. It describes workarounds for Next.js and Webpack which may be applicable to Nuxt as well.

[smfelsher]

I was met with this error when I loaded the page:

SyntaxError: Unexpected token ':' (at main.js:1:23)
    at https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.11/dist/main.js (app.modern.js:1066:1)
    at __webpack_require__ (runtime.modern.js:859:30)
    at fn (runtime.modern.js:151:20)
    at eval (main.js?6417:1:1)
    at ./node_modules/@undecaf/barcode-detector-polyfill/dist/main.js (test.modern.js:11:1)
    at __webpack_require__ (runtime.modern.js:859:30)
    at fn (runtime.modern.js:151:20)
    at eval (test.vue?e2f2:13:1)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/unplugin/dist/webpack/loaders/transform.js?!./pages/test.vue?vue&type=script&lang=ts& (test.modern.js:23:1)
    at __webpack_require__ (runtime.modern.js:859:30)

I looked at the zbar-wasm issue you referenced. I am neither importing nor requireing zbar-wasm, so nothing for me to change there. Also, I don't see how using the copying plugin resolves the syntax issue I'm encountering.

I am going to try some other approaches; however, let me know if you would like to pursue this issue or you can close it.