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