Extension not available in POS during development

michaelelias · ‎11-06-2023

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:

Start shopify app by running npm run dev
Press P to load the preview overview in the browser
Click on View Mobile and copy the URL
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.

pkhanal · ‎11-08-2023

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

View solution in original post

SBD_ · ‎11-06-2023

Hey @michaelelias

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

Scott | Developer Advocate @ Shopify

dgtlmonk · ‎11-06-2023

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!!!!

Sasank · ‎11-07-2023

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.

Thierry-wiink · ‎11-07-2023

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 ?

Sasank · ‎11-07-2023

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.

dgtlmonk · ‎11-07-2023

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. 😕

Thierry-wiink · ‎11-08-2023

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: ✔ 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 ?

Ben06 · ‎11-08-2023

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?

pkhanal · ‎11-08-2023

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/230...

pkhanal · ‎11-08-2023

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

michaelelias · ‎11-08-2023

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.

pkhanal · ‎11-08-2023

Which version of POS app are you using?

michaelelias · ‎11-08-2023

On my Android Emulator I'm using Shopify POS 8.21.0

pkhanal · ‎11-08-2023

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

dgtlmonk · ‎11-08-2023

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

Ben06 · ‎11-09-2023

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.mysho...",

"title": "solpay-app",

"url": "https://solpay-test.myshopify.com/admin/oauth/redirect_from_cli?client_id=5c4d23365bf11616e670e1ec42..."

},

"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-9c24f..."

}

},

"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-9c24f..."

},

"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"

}

pkhanal · ‎11-09-2023

@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.

Ben06 · ‎11-09-2023

Under extension folder I have this in the package.json file:

"@shopify/retail-ui-extensions": "1.5.0"

and this in package-lock.json :

"node_modules/@shopify/retail-ui-extensions": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@shopify/retail-ui-extensions/-/retail-ui-extensions-1.5.0.tgz",
"integrity": "sha512-LaKOqgZkwo7eOngs83ABSB2ko5Par2wlfMYxTemhEcBnPNv+AJRYxPR0IpXEaOO08XJ2bN/jmCNMrEjgSZeWOg==",
"dependencies": {
"@remote-ui/async-subscription": "2.1.x",
"@remote-ui/core": "2.1.x"
}

I don't understand why I have "version": "1.5.1" after using "npm run dev". Did I miss something?

pkhanal · ‎11-09-2023

Can you run npm install once before running npm run dev.

Ben06 · ‎11-09-2023

I run npm install in the extension folder before running npm run dev but I still have "version": "1.5.1"

Ben06 · ‎11-09-2023

I deleted the folder node_modules\@shopify\retail-ui-extensions before running npm install and npm run dev
This solved the problem!

michaelelias · ‎11-09-2023

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.

dgtlmonk · ‎11-08-2023

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.

dgtlmonk · ‎11-09-2023

It looks like the cli is working perfect now. The generated dependencies versions are confirmed working.

If anyone is still having issue with this, you can grab this repo as template
https://github.com/dgtlmonk/shopify-ext-tpl

mrniamster · ‎11-16-2023

The issue was with "@shopify/retail-ui-extensions-react": "1.5.0" upgrading to 1.5.0 and doing a npm i resolved it , i was using 1.2.0 previously. thanks.