[Admin Blocks] Uncaught Error: No extension found with the provided handle

[Fleker]

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

admin-ui-extensions-react 2023.7.x

Describe the bug

I am following the Admin action extension tutorial and have managed to get all the pieces individually connected. However, the one part that doesn't work in my test shop is the navigation. Any time I press a button to open a new "Create Issue" popup or edit an existing item, I run into this issue:

Uncaught Error: No extension found with the provided handle: issue-tracker-action
    at v.Ae (main-d01fa0f53716b6dd.js:1:27564)
    at navigate (main-d01fa0f53716b6dd.js:1:40704)
    at i (vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-a02257-30e76657d3f02703.js:2:271477)
    at Object.call (vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-a02257-30e76657d3f02703.js:2:192894)
    at MessagePort._ (vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-a02257-30e76657d3f02703.js:2:195469)

              <Button
                onPress={() =>
                  navigation?.navigate('extension:issue-tracker-action')
                }
              >
                Add issue
              </Button>

I know that this extension is in my overall project, and I can see both extensions running in the context of my large app. This is a brand new app I created last Friday by following the Shopify create-an-app tutorial, so I think everything is up-to-date. I have verified that each extension has the expected shopify-extension.toml properties:

api_version = "2023-07"

[[extensions]]
# Change the merchant-facing name of the extension in locales/en.default.json
name = "t:name"
handle = "issue-tracker-action"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/ActionExtension.jsx"
# The target used here must match the target used in the module file (./src/ActionExtension.jsx)
target = "admin.product-details.action.render"

I can activate the Create Issue dialog using the "More actions" menu at the top of the product page. However, this inter-extension communication is the only part not working.

Steps to reproduce the behavior:

1. Add a button in my block which points to issue-tracker-action
2. Press button

Expected behavior

I expect this launches a dialog with my "create issue" UI

Additional context

This is just following the tutorial. I'm feeling a bit stymied. But then again, I am new to this dev platform so I may be missing something obvious.

[AaronSpringut]

Hey @Fleker, thanks for reporting!

I suspect this is an issue that's cropping up from our dev preview. A few questions to help us figure out the root cause:

What version of the CLI are you seeing this on? (Updating to the latest CLI version could resolve this.)

Is the dev server for your extensions still running when you get this error? (The dev server is started when you run `npm run dev.) Switching networks or a timeout on cloudflare could kill the server.

[Fleker]

I just updated to 3.49.3 and spun up a fresh dev server instance a few minutes ago. When I click the Add Issue button in my block, I still see the error:

Uncaught Error: No extension found with the provided handle: issue-tracker-action

Opening the action through the More Actions > Create an Issue flow works as expected.

[MitchLillie]

Hey @Fleker, thanks for the report! Let's see if we can get to the bottom of this.

I tried to reproduce the issue on my end but didn't have any luck. Would you be available for a quick call to see if we can debug this live? I'm available tomorrow anytime after 10am Pacific.

A couple of things off the top of my head we could check:

1. Are you running yarn dev? Because yarn deploy won't work properly for block extensions yet as they're still in dev preview. If your action extension is deployed, but the block isn't, they won't be able to communicate.
2. You pasted one example of the shopify.extension.toml. This should work for the action extension. The block extension will need to have slightly different values. Based on the tutorial:

api_version = "2023-07"

[[extensions]]
name = "t:name"
handle = "issue-tracker-block"
type = "ui_extension"
[[extensions.targeting]]
module = "./src/BlockExtension.jsx"
# The target used here must match the target used in the module file (./src/BlockExtension.jsx)
target = "admin.product-details.block.render"

Would also love to hear any other feedback you have, sync or async :)

[Fleker]

Thanks for your comment @MitchLillie I just went out on vacation after that and have managed to catch up.

1. Yes I am running yarn dev and the project is running on a preview store in a separate app. I followed the codelab closely.

Here's my shopify.extension.toml for issue-tracker-block:

api_version = "2023-07"

[[extensions]]
# Change the merchant-facing name of the extension in locales/en.default.json
name = "t:name"
handle = "issue-tracker-block"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/BlockExtension.jsx"
# The target used here must match the target used in the module file (./src/BlockExtension.jsx)
target = "admin.product-details.block.render"

Here's the shopify.extension.toml for issue-tracker-action:

api_version = "2023-07"

[[extensions]]
# Change the merchant-facing name of the extension in locales/en.default.json
name = "t:name"
handle = "issue-tracker-action"
type = "ui_extension"

[[extensions.targeting]]
module = "./src/ActionExtension.jsx"
# The target used here must match the target used in the module file (./src/ActionExtension.jsx)
target = "admin.product-details.action.render"

Both exist in the same top-level extensions directory and otherwise work independent of each other.

We could try to do a sync tomorrow if that works.

[roberttolton]

I'm also facing this issue, followed the tutorial exactly and getting the error that no extension with the handle could be found. Double-checked that the handle in the action extension and the navigate() function in the block extension are identical.

I can trigger the action extension manually and it works, and the block works, they just don't see each other yet.

[MitchLillie]

Fleker and I met to go over this issue. We were able to repro on his machine only. We need some more time to investigate.

[DenisYakimchuk]

I've exactly the same issue with the 3.52.0 cli version. Is there any progress in solving the issue?