[POS UI] Invalid hook call. Hooks can only be called inside of the body of a function component

Retired Boards Appdev Extensions
1

Hi,

I have an issue in building my POS extension. It is giving me an error.
See image below:

devrex_0-1713767986658.png
devrex_0-1713767986658.png968×306 58.5 KB

This is a newly created app and extension.

I commented the useExtensionApi() and the tile works.

devrex_1-1713768101066.png
devrex_1-1713768101066.png424×323 13.7 KB

I am thinking that the issue is coming from useExtensionApi() hook and we cannot do anything about it as it is the base of POS UI extension.

HELP!

This is the package.json of POS extension

{
  "name": "pos-ui",
  "private": true,
  "version": "1.0.0",
  "main": "dist/main.js",
  "license": "UNLICENSED",
  "dependencies": {
    "react": "^17.0.0",
    "@shopify/retail-ui-extensions-react": "1.7.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0"
  }
}
2

…

3

Hey, Devrex, did you find solution?

If not - here is my solution.
I had the same issue but with Post Purchase.
But I think the reason for this error is the same.

Documentation on the Shopify and npm is not the same.
I was using this example: https://www.npmjs.com/package/@shopify/post-purchase-ui-extensions-react?activeTab=readme

Render looks like this:

render("Checkout::PostPurchase::Render", (props) =>