Uncaught CheckoutUIExtensionError: You can only call this hook when running as a UI extension

Retired Boards Appdev Extensions
,
1

Hello everyone, I tried to call a hook in a checkout UI extension and it returned this:

Uncaught CheckoutUIExtensionError: You can only call this hook when running as a UI extension.

Can anyone tell me what is going on? because I’m already in a checkout UI extension so I don’t know why this happen

2

Hi TuanDangA,

If you’re certain that you’re using the hook in the correct context (ie: as a UI extension) then there’s a couple other things you could try for troubleshooting this error message:

  • Check the Hook’s Execution Order: Hooks must be called in the correct order. If you’re calling a hook before its parent hook has been called, you might encounter this error. Make sure that all parent hooks are being called before any child hooks.
  • Check the Hook’s Placement: Hooks should be called at the top level of your React function, not inside loops, conditions, or nested functions. If you’re calling a hook inside one of these, it might not be recognized as being within the correct context.
  • Check the Hook’s Version: If you’re using a version of the Shopify library that doesn’t support the hook you’re trying to use, you might encounter this error.

Try these and let us know if you’re still seeing issues.

3

Thank you Liam for replying, here is my code:

the version:

“@shopify/ui-extensions-react”: “^2023.7.0”,

import {
useShippingAddress,
useApplyShippingAddressChange
} from ‘@shopify/ui-extensions-react/checkout’;

function App() {
const shippingAddress = useShippingAddress();
const shippingAddressChange = useApplyShippingAddressChange();
…
}
and it showed me the error:
Uncaught CheckoutUIExtensionError: You can only call this hook when running as a UI extension.
do you know what can be the issue here

1 Like
4

I have encountered the same issue as well, and I believe this might be a bug that was left behind during the development process.

5

I am getting the same error, but only with my app deployment, not in the development store. Of course, when it’s deployed, I don’t have access to any debugging information. I get the following:

CheckoutUIExtensionError: You can only call this hook when running as a UI extension.
sl [email removed] extensions.shopifycd…-4:7
The above error occurred in the component:

at Ti (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/-4:12:12035)
at mi (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/-4:11:14233)
componentDidCatch [email removed] extensions.shopifycd…tvape-checkout-4:11
extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/-4:12 Uncaught CheckoutUIExtensionError: You can only call this hook when running as a UI extension.
CheckoutUIExtensionError: You can only call this hook when running as a UI extension.
sl [email removed] extensions.shopifycd…-4:7
The above error occurred in the component:

at Ti (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/-4:12:12035)
at mi (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/-4:11:14233)
componentDidCatch [email removed] extensions.shopifycd…-4:11
extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/-4:12 Uncaught CheckoutUIExtensionError: You can only call this hook when running as a UI extension.

What is going on? And how can I debug this? I can’t even tell which hook it is.

1 Like
6

What would you say is the difference between a parent hook and a child hook?

7

I am having the same issue. I am using api version 2024.4.1. It does not make much sense as an error since the hook could not really be imported and used anywhere other than a UI extension…