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

Retired Boards Appdev Extensions

Topic summary

A developer encountered the “Invalid hook call” error when building a POS extension, specifically when using the useExtensionApi() hook. The extension works when this hook is commented out, suggesting the issue originates from the hook implementation.

Key Details:

  • Error appears in a newly created POS UI extension
  • The tile renders successfully without useExtensionApi()
  • Developer suspects the base POS UI extension code may be problematic

Proposed Solution:
Another user (Lan-Ne) experienced the same issue with Post Purchase extensions and identified a documentation discrepancy between Shopify’s official docs and npm. They suggest:

  • The render method implementation differs between sources
  • Following the npm documentation instead of Shopify’s examples may resolve the hook error
  • The root cause appears to be inconsistent code examples across Shopify’s documentation

Status: The original poster has not confirmed whether this solution resolved their issue. The discussion remains open for verification.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
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) =>