Extension not available in POS during development

I’ve been developing several POS UI Extensions and have been testing them on an Android emulator. Since yesterday however, when I load the extensions onto the POS app, I’m getting an error saying the extension is not available because it’s no longer compatible with the POS app.

When I manually add the extension tile via the Add Tile function, the extension does load. This workaround is not great since the extension doesn’t hot reload and I have to close the app and reopen for the manually added extension to reload.

Here’s my current workflow:

  1. Start shopify app by running npm run dev
  2. Press P to load the preview overview in the browser
  3. Click on View Mobile and copy the URL
  4. Run adb shell am start ‘{extension url}’ to send an intent to the Shopify POS app on the Android emulator to trigger it to load the extensions.

I’ve also updated the Shopify app to the latest version on the Android emulator.

The dev console is also not showing any errors when connected to the Shopify POS app.

2 Likes

Hey @michaelelias

Thanks for reporting. Checking with the POS folks and will report back!

DON’T UPDATE TO LATEST SHOPIFY POS APP yet!

Same. Issue already escalated.

Worst part is our previous UI Extension doesn’t work anymore with the current Shopify POS update and we have a client demo in few hours!!!

Running npm run shopify upgrade in the project before running npm run dev solved this for me. Both existing and new extensions started working after this change along with hot reload.

Hi @Sasank
I’m still having the same problem even after upgrading to the 3.50.2 version.
When I’m trying to test my POS application trough the UI Extension Dev console.
Is there another thing to do to make it work ?

Not sure. I was having the exact issue mentioned in original post and after upgrading to 3.50.2, everything started working. I can see the extension on home screen without having to add the tile manually, there is no “Not compatible” error as well.

Under you App > Extension

Turn on Development store preview

See if that makes a difference. I find that turning this off would show the “Extension Not Available” error. :confused:

The Development store preview is already turn on.
I’ve been following the Shopify Tutorial to create an app with an extension.
Creating the app and the extension went well, When I’m running npm run dev,
I can see that toggle “development store preview: :check_mark: on”, I can install the application on my development store through the link in the “DevConsole”.
However, when I’m installing the extension with the QR-code link using Android studio. I’m still facing the same issue (Extension not available).

am I missing something here ?

By following the tutorial https://shopify.dev/docs/apps/pos/ui-extensions/getting-started I get the same error “Extension Not Available”
The Development store preview is enabled.
Is there a problem with the latest CLI version or have I missed something?

Hey @michaelelias,

Can you confirm what version of retail-ui-extensions-react package are you using?

Team reported an issue where 1.5.1 version of the package is released which is not yet supported in latest version of POS app and will be supported once 8.22 version of POS app is rolled out. Until then, continue to use 1.5.0, or whatever version you were using.

To achieve this, update your package json to @shopify/retail-ui-extensions-react”: “1.5.0” or

@shopify/retail-ui-extensions”: “1.5.0” depending on React or vanilla javascript.

Once you update the version in package.json, run npm install before running npm run dev

Verify that updated package version is used in package-lock.json

I was using 1.4.0 when the issue started and tried upgrading to 1.5.1 with the same issue. I just tried downgrading to 1.5.0 but the issue still persists.

Which version of POS app are you using?

On my Android Emulator I’m using Shopify POS 8.21.0

Few things I would suggest.

  • Can you check package-log.json and confirm the package version?

  • You can also try following command to confirm the version the extension is actually using curl ‘https://{your_cloudflare_tunnel_url}/extensions’ | jq ‘.extensions[] | .version’

Let us know what you find out.

I was able to reproduce the issue and had to run npm install to ensure that the updated package version is used. Try npm install before running npm run dev

The following message in the thread should help you unblock

https://community.shopify.com/c/extensions/extension-not-available-in-pos-during-development/m-p/2304070/highlight/true#M1463

This looks like a gap with Shopify CLI generated UI Extension code.

Internally, I think there should be a smoke test when releasing new Shopify POS app version.

1 Like

Do you think a sample working repo would reduce this back and forth conversation? :slightly_smiling_face:

Hi,
I use the following packages:
@prisma/client”: “^4.13.0”,
@remix-run/node”: “^2.0.0”,
@remix-run/react”: “^2.0.0”,
@remix-run/serve”: “^2.0.0”,
@shopify/app”: “3.50.2”,
@shopify/app-bridge-types”: “^0.0.3”,
@shopify/cli”: “3.50.2”,
@shopify/polaris”: “^12.0.0”,
@shopify/shopify-api”: “^8.0.2”,
@shopify/shopify-app-remix”: “^2.1.0”,
@shopify/shopify-app-session-storage-prisma”: “^2.0.0”,
“cross-env”: “^7.0.3”,
“isbot”: “latest”,
“prisma”: “^4.13.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”

And the response of the url https://offers-proceeding-myth-helicopter.trycloudflare.com/extensions

{

“app”: {

“apiKey”: “5c4d23365bf11616e670e1ec4237d1a6”,

“mobileUrl”: “https://solpay-test.myshopify.com/admin/apps/5c4d23365bf11616e670e1ec4237d1a6?shop=solpay-test.myshopify.com&host=c29scGF5LXRlc3QubXlzaG9waWZ5LmNvbS9hZG1pbi9hcHBzLzVjNGQyMzM2NWJmMTE2MTZlNjcwZTFlYzQyMzdkMWE2”,

“title”: “solpay-app”,

“url”: “https://solpay-test.myshopify.com/admin/oauth/redirect_from_cli?client_id=5c4d23365bf11616e670e1ec4237d1a6

},

“appId”: “69964038145”,

“devConsole”: {

“url”: “https://offers-proceeding-myth-helicopter.trycloudflare.com/extensions/dev-console

},

“extensions”: [

{

“approvalScopes”: [

],

“assets”: {

“main”: {

“lastUpdated”: 1699516813317,

“name”: “main”,

“url”: “https://offers-proceeding-myth-helicopter.trycloudflare.com/extensions/dfa447f8-fa4a-4c9a-b7e8-9c24f6338d08/assets/pos-ui.js

}

},

“capabilities”: {

“apiAccess”: false,

“blockProgress”: false,

“collectBuyerConsent”: {

“smsMarketing”: false

},

“networkAccess”: false

},

“categories”: null,

“description”: “pos-ui”,

“development”: {

“hidden”: false,

“localizationStatus”: “”,

“resource”: {

“url”: “”

},

“root”: {

“url”: “https://offers-proceeding-myth-helicopter.trycloudflare.com/extensions/dfa447f8-fa4a-4c9a-b7e8-9c24f6338d08

},

“status”: “success”

},

“extensionPoints”: [

“pos.home.tile.render”,

“pos.home.modal.render”

],

“externalType”: “pos_ui”,

“handle”: “pos-ui”,

“localization”: null,

“metafields”: null,

“name”: “pos-ui”,

“surface”: “point_of_sale”,

“title”: “pos-ui”,

“type”: “pos_ui_extension”,

“uuid”: “dfa447f8-fa4a-4c9a-b7e8-9c24f6338d08”,

“version”: “1.5.1”

}

],

“root”: {

“url”: “https://offers-proceeding-myth-helicopter.trycloudflare.com/extensions

},

“socket”: {

“url”: “wss://offers-proceeding-myth-helicopter.trycloudflare.com/extensions”

},

“store”: “solpay-test.myshopify.com”,

“version”: “3”

}

I tried to run npm install again in the app’s root folder as I did before and then npm run dev and now the extensions are loaded correctly again in the emulator.

1 Like

@Ben06
The package version is 1.5.1 as shown in the response “version”: “1.5.1”
You would want to update the @shopify/retail-ui-extensions-react or

@shopify/retail-ui-extensions package version to 1.5.0 in the package.json file under extension folder. What you shared looks like app level dependencies.