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

TuanDangA
Shopify Partner
17 0 7

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

 

Replies 6 (6)

Liam
Shopify Staff
2731 302 783

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. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

TuanDangA
Shopify Partner
17 0 7

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
dsamarin-magma
Shopify Partner
2 0 1

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

Eniac
Shopify Partner
11 0 0

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

dsamarin-magma
Shopify Partner
2 0 1

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 @ extensions.shopifycd…<name>-4:7
The above error occurred in the <Ti> component:

at Ti (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/versi...<name>-4:12:12035)
at mi (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/versi...<name>-4:11:14233)
componentDidCatch @ extensions.shopifycd…tvape-checkout-4:11
extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/<name>-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 @ extensions.shopifycd…<name>-4:7
The above error occurred in the <Ti> component:

at Ti (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/versi...<name>-4:12:12035)
at mi (https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/versi...<name>-4:11:14233)
componentDidCatch @ extensions.shopifycd…<name>-4:11
extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/112245932033/version/<name>-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.

mikefortney
Shopify Partner
15 0 10

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