App Bridge Modal API doesn't seem to work with s-modal web component

App Bridge
1

I’m having trouble using Modal API to open up a modal. The example taken straight from the docs doesn’t seem to work either:

<s-modal id="my-modal">
  <s-text>Hello, World!</s-text>
</s-modal>

<s-button onClick="shopify.modal.show('my-modal')">
  Open Modal
</s-button>

Clicking this button results in this error:

Uncaught (in promise) Error: Modal with ID my-modal not found

Also, looking at App Bridge script, it looks like it is only targeting the ui-modal component despite the docs claiming that Modal API is meant to work with s-modal component.

Am I doing something wrong, or is it a bug that needs to be fixed in the App Bridge?

P.S. I’m trying to use it in React 19 (RR app)

3

@Anthony_Frehner Can you please have a look at this issue

5

I’ve reproduced the bug, and am currently working on a fix.

6

The fix has been deployed. Please let me know if you continue seeing the Uncaught (in promise) Error: Modal with ID… error.

7

Can confirm that it works now. Thank you!