Customer Account UI-Extension is Rendered Twice

[najmiantariksa]

Extension packages

{ "name": "checkbox-location-b2b", "private": true, "version": "1.0.0", "license": "UNLICENSED", "dependencies": { "react": "^18.0.0", "@shopify/ui-extensions": "unstable", "@shopify/ui-extensions-react": "unstable" }, "devDependencies": { "@types/react": "^18.0.0", "react-reconciler": "0.29.0" } }

Extension toml file

api_version = "unstable"

[[extensions]] type = "ui_extension" name = "checkbox-location-b2b" handle = "checkbox-location-b2b"

[[extensions.targeting]] target = "customer-account.profile.company-location-addresses.render-after" module = "./src/MenuActionExtension.jsx"

[[extensions.targeting]] target = "customer-account.page.render" module = "./src/FullPageExtension.jsx"

[extensions.capabilities] api_access = true network_access = true

Describe the bug

A UI-Extension on the target 'customer-account.profile.company-location-addresses.render-after' is rendered twice. The first one being an old code from previous developments. This happens after doing npm run dev multiple times.

Steps to reproduce the behavior:

1. Generating a UI-Extension on 'customer-account.profile.company-location-addresses.render-after'
2. npm run dev multiple times until the component is rendered twice

Expected behavior

The UI-Extension should be rendered once.

Screenshots

The first checkbox is an old code. The one on the bottom with CURRENT is the actual code in my local editor.

Additional context

This could be partially solved by creating a new app but then it could also happen to this app which means you have to create another app. I also have removed all other apps that have the same extension in the development shop.

[oluwatimio]

@najmiantariksa thanks for pointing out your issue. Do you mind letting us know what shop you're developing your extension on?

[najmiantariksa]

@oluwatimio I actually tried installing the app on multiple development shops. At first the checkbox was rendered once as expected but after restarting the localhost the bug showed up again. I unfortunately can't share any shop information.

[oluwatimio]

@najmiantariksa Ah I see thanks for sharing that! if you don't feel comfortable sharing the shop information here, you could dm our product lead on twitter at @pmillegan. Knowing what shops these are happening on will help us get closer to diagnosing what the issue could be

[najmiantariksa]

@oluwatimio Thanks for your help! I already contacted and sent @pmillegan the name of the shop last week. Is there any update on this issue?

[pmill-shop]

hey @najmiantariksa 👋 I don't see any dms from you ! want to just shoot me an email at patrick.millegan(at)shopify(dot)com ?

[najmiantariksa]

Hey @pmill-shop thanks for answering. I just wrote an email to you. I hope the shop name will help in finding out what the problem is. Please keep me posted.

[dangreaves]

I am experiencing a similar issue with Customer account UI extensions.

My extension consists of a customer-account.order.action.menu-item.render which links to a customer-account.page.render.

If I install the deployed app on the development store, the extension appears correctly.

If I then run shopify app dev on the same development store, rather than the customer-account.order.action.menu-item.render getting overwritten with my draft, a new duplicate link appears instead.

Both links go to the same customer-account.page.render page, but the page will not show my draft, it will only show the deployed version.

The only way to fix it is to uninstall the app completely, then run shopify app dev again, and the draft extensions then appear correctly. The problem with this, is that I then lose API access, which is painful for development.

It looks like drafts are not correctly overriding deployed extensions.

[jrrafols]

👋 Hey everyone, we've done some investigation and what's happening is that the double-rendering is because both the deployed extension and the CLI preview (e.g. shopify app dev) are being rendered.

Our team is looking into this, but in the meantime, here are some potential workarounds:

• You don't need to install the app for the CLI preview to show your extensions. In this case, nothing will be deployed so you shouldn't run into the doubling
• You can deploy a new version of the extension (shopify app deploy) which will ensure that both the deployed and the CLI preview have the same content
• If you are deploying and you don't run the CLI preview, then you won't get the doubling and you'll see the latest content rendering (with the trade-off that you lose hot-reloading)