Product Configuration Admin UI Extension Is Not Updating For Different Products

[ryanbalsdon]

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

    "@shopify/ui-extensions": "2023.10.x",
    "@shopify/ui-extensions-react": "2023.10.x",

Describe the bug

Using the Product Configuration UI Extension (admin.product-details.configuration.render), the extension is only rendered once per refresh. When switching to a different product page, the extension is not rendered again and shows the previous product instead.

For different UI Extension targets (even the normal product block), this issue does not reproduce. It seems isolation to the bundles UI.

Steps to reproduce the behavior:

Using the minimal implementation below and a bit of graphql to generate two products with bundles.

const TARGET = 'admin.product-details.configuration.render';
export default reactExtension(TARGET, () => <App/>);

function App() {
  const {data} = useApi(TARGET);
  return <Text>Rendering for product ID: {data.product.id}</Text>
}

1. View a product that has a bundle attached. See the product ID is as-expected.
2. Return to the product index and view a different product that has a different bundle attached. See the product ID matches the previous product.
3. Refresh the page. See that the product ID is now as-expected.

Expected behavior

I was expecting the extension to be re-rendered with the new product passed down when viewing a different product.

Screenshots

First render shows correct product ID, matching URL

Second render shows previous product ID, not matching URL

Additional context

That this is all being done in an isolated web worker is incredible. And also through a tunnel to local code when using the dev console is so helpful. So, additional context is just a 👍 this is awesome from me.

[MitchLillie]

This is a bundles issue, looking into routing it to the right place

[Cyclodex]

I don't think this has something to do with bundles:

I just have the same issue, but with placing and Admin Block in the Order page:
const TARGET = 'admin.order-details.block.render';

The component renders perfectly fine the first time, looks up the current order and my metafields on it...
However when I click the buttons in the top right,

to switch to the next order, all components seem to re-render or do something, but mine just stays the same. Its not getting re-rendered, which is what I would expect.

Means, the order is switched but my AdminBlock still shows the Information from the first order. 😢

I tested it with simple console.logs nothing is happening with my AdminBlock extension when the URL switches to the next order. It's really seems not unmounting/remounting the component.

Is that a bug or intended?
Do I need to watch the URL or something like this, to update my component?
Is there any workaround for that?

[carrotderek]

Since this issue is occurring on other pages, this should be something app-ui team can investigate.

[gab-sundae-lane]

Hi, has there been any developments on this issue? I'm also experiencing this on 2024-07 on a deployed version of our app.

"@shopify/ui-extensions": "2024-07",  
"@shopify/ui-extensions-react": "2024-07"

We are trying to launch the product configuration extension for our bundle app and this is a clear blocker for being able to deploy.