"Error loading extension" for POS UI Extension after Getting Started Guide

Retired Boards Appdev Extensions
1

Hi all,

I followed this guide to create a POS UI Extension: https://shopify.dev/docs/apps/pos/ui-extensions/getting-started

I haven’t modified any code. I’m using all the code that was generated through the CLI.

When I preview the extension in my browser by clicking the “Preview link” it works. However, when I use the QR code to add the extension to the POS app running on an iPad, the tile gets created but I get an error “Error loading extension” message on the tile.

I’m using the Remix template with React TypeScript.

I don’t see any logs or way to debug the problem. How can I debug and fix the problem?

Thanks and best wishes!

UPDATE: I found this doc page explaining how to debug: https://shopify.dev/docs/apps/pos/ui-extensions/debugging. I setup an Android Emulator with Android Studio. Now I can’t figure out how to install the POS UI Extension. I’ve had no success using the camera to scan a QR code using a Virtual Scene. I’ve also had no success manually opening the URL that the QR code points to because it’s an app link and Chrome doesn’t open them. I’ve even tried printing the QR code and setting the emulator camera to use my web cam. That doesn’t work either because the Camera app never recognizes the QR code. Any pointers would be great.\

UPDATE 2: Okay I finally got the extension installed in the Shopify POS app in the Android Emulator. I did it by uploading an html file to my personal site with an href pointing to the same URL the QR code points to. Then from Chrome I visited my personal website and clicked on the link. However, when I visit chrome://inspect in Chrome I don’t see a Shopify device.

UPDATE 3: I needed to stop and start the emulator for it to show up in the Chrome inspector. The error is Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: which makes me think perhaps I’m hitting the same issue as https://community.shopify.com/post/2551868

2

UPDATE 4: I figured out a reasonable way to activate the UI extension app in the Android Emulator and wanted to share. I created a jekyll project on my laptop, created a file with an href link to the app URL that the extension QR code points to, and then ran bundle exec jekyll serve --host=<my local IP>. Then from the Chrome browser in the Android emulator, I visited :4000, clicked on the href link, and got the extension installed.

However, I’m still not able to run the extension UI. I believe the issue is related to https://community.shopify.com/post/2551868 but haven’t gotten it resolved yet.

3

The issue got resolved when I followed this question https://community.shopify.com/post/2551868 and upgraded the Shopify CLI to the latest version.