[Checkout editor/customer profile page] Customisable settings not being passed to extension in editor

[andrewpye]

Please list the package(s) involved in the issue, and include the version you are using

@shopify/ui-extensions: unstable @shopify/ui-extensions-react: unstable

Describe the bug

An extension on the customer profile page never receives values from the useSettings hook – the property is populated but the value is always undefined, even after editing it and saving the change.

Steps to reproduce the behavior:

1. Add a setting to a customer profile UI extension;
2. Log the output of the useSettings() hook in the extension's code;
3. Change the value in the input.

Expected behavior

The settings returned by useSettings() are always an accurate representation of the merchant's chosen settings.

Screenshots

N/A

Additional context

N/A

[alxclark]

Hi Andy, thanks for the report. Can you share your imports for the useSettings hook and for reactExtension ?

We currently don't allow importing from different surfaces (checkout, customer-accounts, admin, etc) in the same extension since reactExtension wraps all of your extension code in a React context provider specific to that surface. I'm thinking this might be what you're getting here.

[andrewpye]

Hi @alxclark, thanks for the quick response! Unfortunately that isn't the issue – if you try using imports for a different surface, they throw due to a missing context. We've also previously encountered https://github.com/Shopify/ui-extensions/issues/1885 which has made us very cautious to use imports from the correct package 😅

For clarity, the imports we're using in this situation are:

import { reactExtension } from '@shopify/ui-extensions-react/customer-account';

in the extension's top-level component, and

import { useSettings } from '@shopify/ui-extensions-react/customer-account';

in the hook that determines the state for the extension.

Did you try this at all? I'm curious if it's something I've done wrong (I've followed the docs though) or if it's actually a bug 👀

[alxclark]

Hi @andrewpye, sorry about the delay this time. Do you mind linking your app, extension and store? If you're worried about sharing on a public repo, you can also email me at alexandre.c@shopify.com

From my testing, we are seeing reactivity on the order status page and the values persisted after saving.

Also if you have a small repro of your extension's TOML file it would help 🙏🏼