Should_render does not work for plain Javascript

Extensions
1

The official Shopify’s tutorial only have React / Typescript guide for conditional rendering of admin extension : Hide action and block extensions

I am using pure Javascript (without React and Typescript) for my own extension, I tried copy pasting the ShouldRender.js file from the tutorial, and followed the same configuration in the .toml file


[extensions.targeting.should_render]
module = "./src/condition/ShouldRender.js"

But it does not seem to work, the extension action still displays on the “More actions” on the extension target every time, despite me setting “{display: false}” in the return value of the ShouldRender.js file.

Is there anything I should modify? Does the triple slash directives at the top of the file affect anything if my extension is pure Javascript?

2

Hi Soulchild,

I’ve just reached out to the relevant product team in this area and will report back here once I get clarification from them.

3

Hi Liam, sorry for bumping, is there any update on this? This appear to still not working on my end

4

Hey - will re-connect with the product team on this!

5

Hi @soulchild ,

Sorry for the delayed response! There shouldn’t be any difference between js and ts shouldRender files.

A couple things to check…

  • In the extension’s package.json, you should be on the latest version of ui-extensions.

      "@shopify/ui-extensions": "2025.1.x",

  • Also check to make sure you’re on the latest version of the Shopify CLI. We’re currently on 3.74.1 and you can run npm install -g @shopify/cli@latest to get the latest.

I’ve tested this with simplest shouldRender script and it is working for me with all the latest library and CLI versions.

condition/shouldRender.js`

const TARGET = 'admin.product-details.action.should-render';

export default shopify.extend(TARGET, async () => {
  return {display: true};
});

TOML segment

[[extensions.targeting]]
module = "./src/ActionExtension.js"
target = "admin.product-details.action.render"

[extensions.targeting.should_render]
module = "./src/condition/shouldRender.js"

Please let me know if you’re still running into issues!

6

Nope. This directive is only for types. You can remove it in a js file.

7

Hi @Elana , thanks for the steps, I have confirmed I am on the latest version of ui-extensions.

The extension’s package.json :

{
  "name": "my-extension",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "dependencies": {
    "@shopify/ui-extensions": "2025.1.x"
  }
}

the TOML segment

# Only 1 target can be specified for each Admin action extension
[[extensions.targeting]]
module = "./src/ActionExtension.js"
# The target used here must match the target used in the module file (./src/ActionExtension.js)
target = "admin.draft-order-details.action.render"


[extensions.targeting.should_render]
module = "./src/condition/shouldRender.js"

The src/condition/shouldRender.js file content

const TARGET = 'admin.draft-order-details.action.should-render';

export default shopify.extend(TARGET, async () => {
  return {display: false};
});

I have set it to false, but the action still appears in the “More actions” menu in the draft order detail page.

Have you tried setting the “display” to “false”, and see if the menu action is hidden?

8

Here’s a minimal app project that demonstrate the issue : GitHub - cupnoodle/sample-should-render: Minimal example to demonstrate shouldRender API bug

The {display: false} is set (refer this file), but the admin action menu still appear .

CleanShot 2025-02-02 at 03.05.56@2x
CleanShot 2025-02-02 at 03.05.56@2x954×486 49.1 KB

9

Sorry to bother @Elana , can you check the sample repo (minimal app code to reproduce the issue) ? This is the code I am using , but the admin action is not being hidden.

1 Like
10

Sorry for the delay @soulchild ! I’m reviewing the sample code now.

11

I’m stumped @soulchild . :thinking: The sample code works for me. I cloned your repo and ran shopify app dev and the extension menu item was hidden and shown as expected.

elana-sample-should-render

12

Hi Elana,

Thanks for trying out the sample app! I gave it a try again and it worked for me suddenly, I am not sure why it didn’t work previously :sweat_smile:, sorry to bother you.

2 Likes