[New Plugin] QR Code Scanner

For some odd reason I can’t get the new version of the component to appear in my app.
I upgraded the plugin to the new version but it’s still the old component no matter what I do.
Tried these things so far:

  • Upgraded, deleting all QR Scanner components and dragged a new one to my page
  • Uninstalled and re-installed the plugin
  • Copy the component from your demo-site (yes, I know, but it was worth a try)

No matter what I do it is still the old version (see screenshot below) of the component.
I can see the “Select QR Image” button in the middle when running in version-test so something is upgraded but it seems not completely so.
Is there anything else I need to do?

That is bizarre! I added this to a new app the other day too and I didn’t even have to delete the old instance, it just threw up a few errors about the Content state not being valid (because it’s been re-created).

Can you (as a test) create a brand new app and add the plugin to see if the new version is added?

It sounds to me like one for Bubble support as I can’t see how that should happen!

Waiting game apparently worked as the updated plugin is now all the way there.
No idea why it behaved in that strange way but when I tried it just now in a new app it was the new version of the plugin.
Went back to the app I’m implementing it in and it was also the new version.

Maybe some server sync thing on the bubble side of things.

Everything works now and the plugin looks and works great.
Thanks @talkingoldfish !

1 Like

Great news, I am working on a small update to allow Auto-Aspect Ratio so you don’t have to work it out every time, although I’m having a few issues with that on iOS15

hello @talkingoldfish ! My side, the new version doesn’t work unfortunatly. QR Content is empty :confused:

I use an android phone. With old version it is ok. What is strange is it has worked just once ! I stored in the qr the unique id of a data entry.

That’s strange, does it register a code each time you scan with your phone on the test app at https://qr-code-scanner.bubbleapps.io ?

Are there any errors in your app relating to the QR Content state?


I finally make it work! Maybe there were something with the old version, at one moment I had the newest version and the property editor was the old one. thank you @talkingoldfish !

1 Like

Hi @talkingoldfish

The problem that some users referred of having updated the plugin and seeing elements of former version of the plugin is a cache problem. I also had that issue. Using Ctrl + F5 in Windows system solves that problem.

However, I have an issue that I would appreciate your help/comment.
I can read a QR code that is an email address. In QRCodeScanner A’s QR Content the email address is stored. I can see it, if I insert a text element with QRCodeScanner A’s QR Content as content in the web page.
If I try to select an user in User Data Type, using Do a search for User: first item with the constraint email = QRCodeScanner A’s QR Content the result is empty.
Can you explain why that happens and, if this is the expected behaviour, how can we select an user?

Well, I turn around this issue, saving QRCodeScanner A’s QR Content as text and not as an user email.

Hi @talkingoldfish ,

When trying to scan a QR code, the plugin gave the following error. It is strange, because it was working fine.

The plugin QR Code Scanner / action Start a QR Code Scanner threw the following error: ReferenceError: Html5Qrcode is not defined
at eval (PLUGIN_1593701658260x162495678044438530/QR-Code-Scanner-element_action–QR-Code-Scanner-Start-.js:19:25)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/af993028f0b9380c81c7e09a1ce86933e5dd5fcdb53f1aa46230f58c3b443167/xfalse/x15:6:2252922 (please report this to the plugin author)


Good afternoon,

I find this occurs when the element is hidden before you need to use it. If you show the element, add a pause, then start it it may work?

The Html5Qrcode variable isn’t defined until the element is shown in the page.

I had a similar issue with the old version using popup boxes.

Did you manage to sort the other issue with the email address? The QR Content state will only ever return text but you should be able to search for a user using the QR Content result.

1 Like

Hi @talkingoldfish

It was hidden in a group. I changed that and the error stopped.
However, if I change QRCode Scanner element to fixed width, the same problem occurs.

Concerning the email address issue, it was a bad logic in my programming. Sorry for worrying you with that.

Another question: Is there a way to clean the QRCode Scanner A’ QR Content information after scanning a QR code and processing its data?

I had the same error message as @jose.a.ribeiro.73 but your suggestion of adding a pause fixed the issue for me.
Thanks very much for the plugin!!

I am trying this and it is not working. It keeps giving me the same error message:

“Sorry, we ran into a temporary bug and can’t complete your request. We’ll fix it as soon as we can; please try again in a bit!”

This is extremely weird because I have another QR Code Scanner in another hidden group on the same page and it works just fine (well actually, sometimes it works and sometimes it doesn’t, but it is working as of right now).

Why does the the first QR Code scanner work that is in a hidden group and the other one in a hidden group not work? I tested out a hidden group on a new page and it didn’t work even after adding a pause before next action and beginning the QR Code scanner. So, the fact that the one QR Code scanner works on the original page while being in a hidden group is totally weird.

UPDATE: I had to make sure the group that the QR Code scanner was in was at least 300px in width. The difference between the two QR Code scanners on the page were the dynamic sizes of the groups (the one that was working was a size of 310px with a minimum width of 99%, while the one that wasn’t working was a size of 310px with a minimum width of 20%). The group that the QR code group was in was 582 px wide, so 582px * 20% = 116px. So, the QR Code was too small and I believe that is what was causing the error because it is working fine now.
Unfortunately, this trick isn’t working on another page where a QR scanner is in a hidden group :frowning:

I finally got around to updating this plugin a couple weeks ago. Couldn’t believe how greatly improved it is. Works great…until I make a change to the app.

So I have a problem but I don’t know if the bug is with the plug-in or bubble. Below is the scenario.

Plug-in works great. Then I make a change anywhere in the app, can be completely unrelated to the plug-in, then publish. Now the plug-in doesn’t work. To fix that I go back and change any element, let’s say change it’s size or location by just one pixel, and republish. Now it works again.

The app is currently in production so that means every time I make a change I must try a scan to make sure it’s still working so it doesn’t interfere with the actual users. This doesn’t happen every time, but at least two times out of three. The fix mentioned always works.

Any ideas what might be causing this?


1 Like


I’ve set a pause before the Start action, but it doesn’t start and this error is shown in the console.

Thanks for the plugin. It works great except in one situation.

  1. I have a button that toggles the scanner group and I can scan one item no problem.

  2. When the scanner has a value, I stop the scanner and save the value into an input field and then toggle the scanner group to hide it.

  3. However, when I try to open the scanner group again, I get an error "The plugin QR Code Scanner / action Start a QR Code Scanner threw the following error: (please report to the plugin author).

  4. I have tried resetting the group and nothing works except refreshing the page.

Any ideas what is happening?

Hey @talkingoldfish
Thanks for the great plugin.
Scanning works fine for me but when I use the “select QR image” button, it just shows up my QR in the preview and does nothing (QR content status remains empty). It is strange because when I use the plugin test page you created, it works fine and shows the QR content in “text A”

Can you upgrade your app version for Bubble?

There has been a recurring error (I’m testing it on the iPhone 14): when it reads the first QR Code it’s ok, but when it tries to read the next one it gives the error below:

The plugin QR Code Scanner / action Start a QR Code Scanner threw the following error: TypeError: instance.data.generatePreview is not a function at eval (PLUGIN_1593701658260x162495678044438530/QRO-Code-Scanner-element_action–QR-Code-Scanner-Start-.js:4:19) ]