Question about App Bridge Modal

Currently following the instructions here to build a Modal

Link: https://shopify.dev/docs/api/app-bridge-library/react-components/modal#modals-with-different-options-using-a-modal-for-a-destructive-action

It seems like the Modal component MUST HAVE a src or message prop or else it will break (This is not mentioned in the docs). Can someone confirm or is it because Im using an older version of app bridge react?

1 Like

Hi @triplesingle

Are you talking about the p tag? If so, I am able to remove it and it didn’t break. See the result and sample code below

This is the result when I remove the TitleBar

1 Like

Hi @triplesingle ,

For app-bride-react versions from v3 and earlier, you can refer to here: https://shopify.dev/docs/api/app-bridge/previous-versions/actions/modal#react

Currently the docs you are reading require v4 or higher:

You can preview the changes from v3 to v4 here. I also recommend updating the version to v4:
https://shopify.dev/docs/api/app-bridge/migration-guide#step-2-upgrade-your-shopify-app-bridge-react-dependency

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like

Thanks a lot! I am using this template (https://github.com/Shopify/shopify-app-template-node)) and it seems like I’m stuck on an older version of app-bridge-react even though I’ve specified that I should be on the new version in package.json…