Solved

Extension not available in POS during development

michaelelias
Shopify Partner
10 0 4

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.

 

michaelelias_0-1699301027946.png

 

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.

 

 

Accepted Solution (1)
pkhanal
Shopify Staff
6 1 0

This is an accepted solution.

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

Replies 25 (25)

SBD_
Shopify Staff
1829 269 409

Hey @michaelelias 

 

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

Scott | Developer Advocate @ Shopify 

dgtlmonk
Shopify Partner
38 3 7

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
Shopify Partner
2 0 0

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
Shopify Partner
2 0 0

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
Shopify Partner
2 0 0

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
Shopify Partner
38 3 7

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
Shopify Partner
2 0 0

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
Shopify Partner
14 0 3

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
Shopify Staff
6 1 0

pkhanal
Shopify Staff
6 1 0

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
Shopify Partner
10 0 4

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
Shopify Staff
6 1 0

Which version of POS app are you using?

michaelelias
Shopify Partner
10 0 4

On my Android Emulator I'm using Shopify POS 8.21.0

pkhanal
Shopify Staff
6 1 0

This is an accepted solution.

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
Shopify Partner
38 3 7

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

Ben06
Shopify Partner
14 0 3
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
Shopify Staff
6 1 0

@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
Shopify Partner
14 0 3

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
Shopify Staff
6 1 0

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

Ben06
Shopify Partner
14 0 3

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

Ben06
Shopify Partner
14 0 3

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

michaelelias
Shopify Partner
10 0 4

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
Shopify Partner
38 3 7

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
Shopify Partner
38 3 7

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
Shopify Partner
12 0 1

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.