Services Plugins FAQs

Barcode & QR Code Plugin: deviceId Error on First Use After Page Reload

Plugins
#1

Hi there,

I’m using the Barcode & QR Code Reader plugin (latest version installed), and I’ve run into a consistent issue that seems related to its initialization.

I have two buttons in my app:

  • One to Start Scanning
  • One to Stop Scanning

The scanning works perfectly once it’s up and running.

However, the first time I open the page and trigger the “Start Scanning” action, the plugin throws the following error:

TypeError: Cannot destructure property ‘deviceId’ of ‘a.data[…]’ as it is undefined.

1
1720×1600 95.1 KB

2
21029×374 9.35 KB

3
31056×360 8.49 KB

To get around this, I have to manually click Stop Scanning and then Start Scanning again. After doing that, the scanner works smoothly and reliably for the rest of the session — as long as the page remains open.

But if I reload or reopen the page, the issue returns again on the first scan attempt. So basically, it only works after I intentionally cause the error, stop the scanner, and start it again.

My app is already using the latest version of the plugin (v1.69.0). I’d appreciate any help in resolving this, or suggestions on how to prevent the scanner from erroring on first launch after page load.

Thanks in advance!

#2

Hi @patrickgenitor,

Thanks for the detailed explanation and screenshots!

To keep our communication clear and efficient, could you please stick to either email or the forum for further messages? Feel free to continue in whichever channel you prefer most.

The error Cannot destructure property 'deviceId' of 'a.data[...]' as it is undefined usually occurs on the first scan attempt because the plugin is still initializing and doesn’t have the camera device ready yet.

To prevent the error on the first scan after page load, you should introduce a slight delay to ensure the plugin is fully initialized before triggering the “Start Scanning” action. Here’s how you can adjust your workflow:

  1. Modify Your Workflow:
  • In your current workflow (as shown in the screenshot), you’re triggering the “Start Scanning” action immediately when the “BUTTON Ler Qr/barcode” is clicked.
  • Instead of directly starting the scan, add a small delay using a “Pause before next action” step to give the plugin time to initialize.
  1. Updated Workflow Steps:
  • Step 1: Keep the “Animate BARCODE/QR LIVE-SCANNER A” action as it is.
  • Step 2: Modify the “Pause before next action” step (currently set to stop scanning) to introduce a delay. Set the pause duration to 500 milliseconds (or 0.5 seconds) to allow the plugin to initialize.
  • Step 3: After the pause, trigger the “Start Scanning BARCODE/QR LIVE-SCANNER A” action.Your revised workflow should look like this:
  • Event: “BUTTON Ler Qr/barcode is clicked”
    • Step 1: Animate BARCODE/QR LIVE-SCANNER A
    • Step 2: Pause for 500 milliseconds
    • Step 3: Start Scanning BARCODE/QR LIVE-SCANNER A

Looking forward to assisting you further!

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#3

thanks for the answer

We can continue here on the forum no problem.

But I believe you may have misunderstood — in the screenshots, the one without the pause is the stop action; the start action does have a 1000 ms pause.

However, the error still occurs on the first execution regardless.

I was only able to prevent the error by using a 2000 ms delay.

However, that’s a very long pause for the end user just to open the camera — and this only happens on the first execution. All the others work normally. But when I set it to 2000 ms to avoid the error, it ends up affecting the performance of the other executions.

#4

Hi @patrickgenitor,

Thanks for the update and for clarifying your current setup.

Given that a 1000ms delay isn’t sufficient and a 2000ms delay impacts performance, this sounds like a timing issue related to the plugin initialization on certain devices or browsers.

To help us narrow down the cause, could you please share more details about your devices and browsers? Also, if you have any patterns about when the problem occurs, that would be helpful.

Feel free to share any additional info about your setup (i.e. how’s the plugin Element configured on your page).

Looking forward to your reply!

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#5

Following the sequence shown in the screenshots, I have the plugin placed on my page in a hidden state. When the user clicks a button, the plugin is made visible, then waits for the current delay of 2000ms before triggering the Start Scanning action.

After that, I retrieve the result and proceed with the required logic on my side.

I’m currently testing this behavior in live mode of my application, using an Android device (Xiaomi Redmi Note 12 Pro Plus).

There are no other errors or abnormal behaviors observed — the issue occurs only during the first execution after the page is loaded. All subsequent executions work normally.

1
11812×904 61.3 KB

2
21888×899 50.3 KB

3
31519×841 44.9 KB

4
41476×890 41.9 KB

5
51835×860 44.8 KB

#6

Hi @patrickgenitor,

Thank you for providing the additional details and screenshots.

Since the issue only occurs on the first execution after page load, you could try pre-initializing the plugin on page load while keeping it hidden. Here’s the recommended approach:

  • Event: “Page is loaded”
    • Step 1: Start Scanning BARCODE/QR LIVE-SCANNER A (while it’s still hidden)
    • Step 2: Immediately stop scanning (this forces the plugin to initialize its camera feed without showing it to the user)
  • Then, when the button is clicked, the plugin should already be initialized, and you may not need a long delay at all.

However, this approach depends on whether the plugin initializes properly while hidden. You can test this by adding the above steps to your “Page is loaded” workflow and reducing the delay in the button click workflow to 200 ms.

Let me know if you encounter any issues during testing!

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3