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

[TuanDangA]

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

[Liam]

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. 

[TuanDangA]

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]

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

[Eniac]

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]

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]

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