Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

Solved

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

alexlod
Shopify Partner
4 1 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/c/extensions/shopify-pos-ui-extension-error-loading-extension/m-p/2551868

Accepted Solution (1)

alexlod
Shopify Partner
4 1 1

This is an accepted solution.

The issue got resolved when I followed this question https://community.shopify.com/c/extensions/shopify-pos-ui-extension-error-loading-extension/m-p/2551...and upgraded the Shopify CLI to the latest version.

View solution in original post

Replies 2 (2)

alexlod
Shopify Partner
4 1 1

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 <my local IP>: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/c/extensions/shopify-pos-ui-extension-error-loading-extension/m-p/2551...but haven't gotten it resolved yet.

alexlod
Shopify Partner
4 1 1

This is an accepted solution.

The issue got resolved when I followed this question https://community.shopify.com/c/extensions/shopify-pos-ui-extension-error-loading-extension/m-p/2551...and upgraded the Shopify CLI to the latest version.