useShippingAddress API permissions issue only in `shopify app dev` mode

Extensions
1

Hi there,

I’ve been maintaining a Checkout UI extension for quite some time now. I’ve just fired up the development environment but the extension will no longer render.

The browser console error is:

ExtensionUsageError: Error: Uncaught ScopeNotGrantedError: Using shipping address requires having shipping address permissions granted to your app.

This is when I’m using the shopify app dev so I can make real time updates to the extension code and preview it.

When I use shopify app build && shopify app deploy to deploy the extension to my dev store, I have no issues loading this extension. Additionally, production is unaffected.

My app has protected customer data access, and it requires read_customers and read_orders OAuth scopes.

I’m at a bit of a loss of understanding how this error can suddenly pop up after so long without any issues.

The package version is 2024-10 and so is the api_version in the shopify.extension.toml

1 Like
2

Hey Dylan!

Thanks for reaching about the new issue you’re experiencing with Checkout UI Extensions!

Which target is your extension set to display on?
I’ve tried to replicate the issue with no luck.
Is the useShippingAddress() hook affected too, or does the issue seem to be specifically with the useAPI() hook?

3

Hi @Paige-Shopify good to hear from you. Thanks for helping.

Sure, the extension mount point is purchase.checkout.block.render

I’m using the useShippingAddress hook like so:

import { useShippingAddress } from "@shopify/ui-extensions-react/checkout";


function Extension() {
  const shippingAddress = useShippingAddress();

}

API version 2024-07

4

Hi Dylan,

Thanks for sharing!

This is what I used for my test:

import {
  reactExtension,
  Banner,
  BlockStack,
  Text,
  useShippingAddress,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => <BlockExtension />);

function BlockExtension() {

 const shippingAddress = useShippingAddress();

  return (
    <BlockStack>
      <Banner title="Testing">
      <BlockStack>
          {shippingAddress.name && <Text>{shippingAddress.name}</Text>}
          {shippingAddress.address1 && <Text>{shippingAddress.address1}</Text>}
          {shippingAddress.address2 && <Text>{shippingAddress.address2}</Text>}
          {shippingAddress.city && <Text>{shippingAddress.city}</Text>}
          {shippingAddress.provinceCode && <Text>{shippingAddress.provinceCode}</Text>}
          {shippingAddress.zip && <Text>{shippingAddress.zip}</Text>}
          {shippingAddress.countryCode && <Text>{shippingAddress.countryCode}</Text>}
        </BlockStack>
      </Banner>
    </BlockStack>
  );

}

I even tried it on an older app of mine and wasn’t able to replicate.
What version of the Shopify CLI are you using at the moment?

5

+1, same issue occurs

6

Hi @Paige-Shopify

Hmm, that is strange.

Here’s my shopify CLI version information:

@shopify/cli/3.84.1 darwin-arm64 node-v22.20.0

Do you need me to try anything else to give more detailed stack traces? Enable a debug flag?

7

I might have to try dig into the error itself and see if anyone else can replicate.

Actually, can you try upgrading your Shopify CLI version?
It might be the issue that was resolved here: