Skip to main content

Troubleshooting

Troubleshooting log for the POS UI Extensions library. Listed are some possible errors and resolutions to help aid in the event of unexpected error messages.

Anchor to api-or-component-not-workingAn API or a component doesn't work despite following the documentation

Resolution

The POS UI extensions documentation represents the latest version of our components and APIs. If you're using an older version of the POS UI extensions library, then some features mentioned in the documentation might not be available to you.

Visit the changelog to make sure you're using the latest version of POS UI extensions. Additionally, if your app has multiple extensions, please ensure that all extensions have the same version of the POS UI extensions library installed. Failure to do so may cause unexpected behavior when loading extensions from the development server. This will be fixed in a future release of the CLI.

Example

You're attempting to use the `[ScannerAPI](/docs/api/pos-extensions/ui-extensions-reference/api/scanner)`, but it doesn't work. You've done everything according to the documentation.

Anchor to extension-qr-not-working-on-androidExtension QR code does not work on Android

Resolution

Android devices can have a restriction on how deep links are handled. To resolve this issue, you can use one of the following options:

  1. Connect the device to your computer. Use Android Studio to open your deep link by running the following command: adb shell am start "com.shopify.pos://pos-ui-extensions?url=". Replace with the URL that you want to test.

  2. Download and use a deep link opener app from Play Store.

Examples

Unable to access "..."

It looks like you don't have access to this store. Contact the store administrator for access.

Anchor to could-not-resolveCould not resolve...

Resolution

This error is most likely from missing a dependency in package.json in the app root. Try re-installing your dependencies and running the app again.

Example

✘ [ERROR] Could not resolve "react-dom"

node_modules/react-redux/es/utils/reactBatchedUpdates.js:1:40:
1 │ export { unstable_batchedUpdates } from 'react-dom';

You can mark the path "react-dom" as external to exclude it from the bundle, which will remove this error.

Anchor to cannot-be-used-as-jsx... cannot be used as a JSX component

Resolution

This issue commonly happens when Yarn is used for dependency management. The package's version was updated but npm conflicts with Yarn. In the root of your application run npm install to get it up to date as well. Restart your IDE if necessary.

Example

'Tile' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<ReactPropsFromRemoteComponentType<RemoteComponentType<"Tile", TileProps, true>>, any, any> | null' is not a valid JSX element.
Type 'Component<ReactPropsFromRemoteComponentType<RemoteComponentType<"Tile", TileProps, true>>, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<ReactPropsFromRemoteComponentType<RemoteComponentType<"Tile", TileProps, true>>, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/heltisace/app-store-app/node_modules/@types/react-reconciler/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

Anchor to session-token-nullSession tokens are being returned as null

Resolution

The getSessionToken() function returns null when the authenticated user (the user that logged into Shopify POS with their email address) doesn't have the correct app permissions enabled for your app. Session tokens are only returned for authenticated users who have enabled the correct app permission for the app making the request. This is irrelevant of POS Staff members, as those are not authenticated users.

To resolve this issue:

  1. Check app permissions: Verify that the authenticated user has the correct app permission enabled for your app. This can be seen in the Shopify Admin by navigating to Settings > Users > Select a user > Scroll down to view the permissions summary.

  2. Enable app permissions: If the user does not have permissions to use your app, it can be added to one of the roles that is assigned to that user. This can be done in the Shopify Admin by navigating to Settings > Users > Roles > Select a role. You can then scroll down to the apps section and select the app for which you want to grant the user permissions.

For more information on configuring and managing app permissions, see the Shopify app permissions documentation.