ESM ImportMap not Working

[jvanalst]

Hi,

I'm already using Vue.js with ESM, so I would have liked to have added html5-qrcode to my importmap thusly:

  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js",
          "@vue/devtools-api": "https://unpkg.com/@vue/[email protected]/lib/esm/index.js",
          "vue-router": "https://unpkg.com/[email protected]/dist/vue-router.esm-browser.js",
          "html5-qrcode": "https://unpkg.com/[email protected]/esm/index.js"
        }
      }
    </script>
  <script type="module">
    import { createApp } from 'vue'
    import * as VueRouter from 'vue-router'
    import { Html5QrcodeScanner } from 'html5-qrcode'
    
    // application specific stuff
  </script>

Unfortunately once you launch the Camera I get the following errors:

TypeError: Cannot read properties of undefined (reading 'QR_CODE')
   at new ZXingHtml5QrcodeDecoder (zxing-html5-qrcode-decoder.ts:31:71)
   at new Html5QrcodeShim (code-decoder.ts:53:37)
   at new Html5Qrcode (html5-qrcode.ts:321:23)
   at Html5QrcodeScanner.render (html5-qrcode-scanner.ts:268:28)
   at Proxy.mounted (<anonymous>:23:11)
   at vue.esm-browser.prod.js:1:32434
   at Qt (vue.esm-browser.prod.js:1:15021)
   at Xt (vue.esm-browser.prod.js:1:15099)
   at t.__weh.t.__weh (vue.esm-browser.prod.js:1:32313)
   at gn (vue.esm-browser.prod.js:1:16323)
(anonymous) @ vue.esm-browser.prod.js:1
html5-qrcode-scanner.ts:823

Uncaught TypeError: Cannot read properties of undefined (reading 'start')
    at HTMLButtonElement.<anonymous> (html5-qrcode-scanner.ts:823:32)
    at Html5QrcodeScanner.renderCameraSelection (html5-qrcode-scanner.ts:856:37)
    at html5-qrcode-scanner.ts:557:23

It looks like it's trying to read a file that doesn't exist from the third_party folder.

DevTools failed to load source map: Could not load content for https://unpkg.com/[email protected]/third_party/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

(I'm quite new to ESM in the browser, so apologies if it comes down to a simple error on my part).

Using the main index.js version works fine as a traditional include (i.e. the method used in the documentation).

[rnestler]

I have the same problem when using the version from https://ga.jspm.io/npm:[email protected]/esm/index.js which has a relative import in the beginning: import{_ as e,Z as t}from"../_/aee98b16.js".

[rnestler]

The one from https://cdn.jsdelivr.net/npm/[email protected]/+esm did work though.

[tonyvince]

same problem preventing import {Html5QrcodeScanner} from "html5-qrcode";

[treeder]

FYI, an alternative ESM native option is available here: https://github.com/chainparency/zxinger