I'm working on implementing the QR code scanner using source code I found on this website: https://www.sitepoint.com/create-qr-code-reader-mobile-website/

and modifying the project that already exists in the codesandbox: https://codesandbox.io/s/qr-code-scanner-ilrm9?file=/src/qrCodeScanner.js

The above example relies on library stored on on another website. I want to create a web application where all the libraries are stored locally as source files. I created a project and downloaded the library as provided: https://raw.githubusercontent.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js

Then I included the library in the project as qr_packed_download.js. I changed only the CSS and left most of the HTML the same as the original. When I try implementing the library from the source file, the scanner doesn't work. I get an error at qrCodeScanner.js line 13:

Cannot set properties of undefined (setting 'callback')

I'm assuming it means the library isn't loaded at the time the scanning script is executed. I made no changes to either. Even the original project doesn't work when I reference the library as a file rather than a website. Could anyone help me out with this?

Here's the link to my project: https://codesandbox.io/s/scannergui-forked-5l8q2

There are 3 html files, 2 scanners and one GUI. scanner_screen is the same as the original and works fine. scanner_bottle involves the library as a javascript file and doesn't work. This link will prompt you to a GUI. Clicking on either of the icons opens the scanner interface.