TypeError: Html5QrcodeScanner is not a constructor

[ayubUOL]

The bug
I'm using Angular 12 toolkit with Ionic framework.
Followed the documentation but didn't understand why this error appears.
Used both npm command to installed the related modules plus I've linked JS file from assets folder as well but both ways it's not working.

Import from npm
import Html5QrcodeScanner from 'html5-qrcode'

Manual import to use JS file
declare var require: any; var Html5QrcodeScanner = require('html5-qrcode');

function onScanSuccess(decodedText, decodedResult) { // handle the scanned code as you like, for example: console.log(Code matched = ${decodedText}`, decodedResult);
}

function onScanFailure(error) {
  // handle scan failure, usually better to ignore and keep scanning.
  // for example:
  console.warn(`Code scan error = ${error}`);
}

let html5QrcodeScanner = new Html5QrcodeScanner(
  "reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);`

Looking forward for guidance to improve my code. Thank you
@mebjas @gurubobnz @esin @dampee @jdtimmerman

[dampee]

I don't understand why you mention people. It might be me, but I think it is quite rude to do so. Certainly if people have not requested to make sure you ping them if you post something. Furthermore, I have hardly any experience with Angular.

Unsubscribing from this issue to make sure I am not updated from any further comments.

[dampee]

... That said, for our project, bundling was the issue. And we solved it using webpack externals.

[ayubUOL]

My sincere apologies, I mentioned you because I saw that you are contributor in making of this project.
Thank you for telling me about Webpack externals.

[mebjas]

Can you verify with latest version of code with npm update?

(I'll add more documentation later)

[mebjas]

This should have been fixed in latest version - v2.1.0

• NPM: https://www.npmjs.com/search?q=html5-qrcode
• Github release: https://github.com/mebjas/html5-qrcode/releases/tag/v2.1.0

Please reopen if this is still an issue.

[elazarza]

this is still an issue with importing the JS file directly in angular.json (not using the npm package)
im using version 2.3.6
using this code:

declare var require: any; var Html5QrcodeScanner = require('html5-qrcode');
function onScanFailure(error) {
  // handle scan failure, usually better to ignore and keep scanning.
  // for example:
  console.warn(`Code scan error = ${error}`);
}
function onScanSuccess(decodedText, decodedResult) { // handle the scanned code as you like, for example:
  alert(decodedText + ' ' +decodedResult)
}
let html5QrcodeScanner = new Html5QrcodeScanner(
  "reader", { fps: 10, qrbox: 250 }, /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

and getting the same error:
qrscanner-dialog.component.ts:13 Uncaught TypeError: Html5QrcodeScanner is not a constructor