html5-qrcode: TypeError: window._ is undefined
Describe the bug Following the example here #113 I was unable to get this to work as a stand alone react component.
import React from "react";
import Html5QrcodeScanner from 'html5-qrcode'
class BarcodeScanner extends React.Component {
componentDidMount() {
// Creates the configuration object for Html5QrcodeScanner.
function createConfig(props) {
var config = {};
if (props.fps) {
config.fps = props.fps;
}
if (props.qrBox) {
config.qrBox = props.qrBox;
}
if (props.aspectRatio) {
config.aspectRatio = props.aspectRatio;
}
if (props.disableFlip !== undefined) {
config.disableFlip = props.disableFlip;
}
return config;
}
var config = createConfig(this.props);
var verbose = this.props.verbose === true;
// Suceess callback is required.
if (!(this.props.qrCodeSuccessCallback)) {
throw 'qrCodeSuccessCallback is required callback.';
}
this.html5QrcodeScanner = new Html5QrcodeScanner('qr-code-full-region', config, verbose);
this.html5QrcodeScanner.render(
this.props.qrCodeSuccessCallback, this.props.qrCodeErrorCallback);
}
componentWillUnmount() {
// TODO(mebjas): See if there is a better way to handle
// promise in `componentWillUnmount`.
this.html5QrcodeScanner.clear().catch(error => {
console.error('Failed to clear html5QrcodeScanner. ', error);
});
}
render() {
return <div id='qr-code-full-region' />
}
}
export default BarcodeScanner
I am getting an error saying TypeError: window._ is undefined in the browser. I have fiddled around with different attempts but have not been able to find a solution. I have also tried importing this library into my top level index.html file but to no avail. I’d be happy to contribute with a React component but have not been able to find something standalone that works.
Does anyone have any suggestions or solutions for a React Component?
Thank you in advance
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 4
- Comments: 25 (3 by maintainers)
Didn't want to have the huge error long output above so here it is in a spoiler for reference
Same issue for me when using Vue. I’ve tried a couple of different versions with no luck.
@thecpdubguy Yes, this is a temporary solution before the author fixes it.
@Dengyu-1129 please send comments in plain English, use google or other translator to help you thanks
The problem is the last three lines in the minified file, I ended up loading the js file from url using dynamically created script tag.