Modal props `primaryAction` and `secondaryActions` are broken

Extensions
1

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

    "@shopify/ui-extensions": "2025.1.0",
    "@shopify/ui-extensions-react": "2025.1.1",

Describe the bug

The Modal component has a primaryAction and a secondaryActions prop, and while these used to work before, they currently do not render anymore with the following warning in the console:

Component undefined is not allowed to be rendered, either because it is not allowed or the maximum number of components has been reached.

Steps to reproduce the behavior:

The minimal TypeScript React UI extension that replicates this behaviour can be achieved with the following Checkout.tsx file:

import { reactExtension, Modal, TextBlock, Button, useApi } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <Extension />);

export const MODAL_ID = 'modal-bug-checkout-ui';

function Extension() {
  const api = useApi();
  return (
    <>
      <Button
        overlay={
          <Modal
            id={MODAL_ID}
            title="Modal Bug Checkout UI"
            primaryAction={<Button>Save</Button>}
            secondaryActions={<Button onPress={() => api.ui.overlay.close(MODAL_ID)}>Cancel</Button>}
            padding
          >
            <TextBlock>This modal should have a primary action button as well as a secondary action button.</TextBlock>
          </Modal>
        }
      >
        Open Modal
      </Button>
    </>
  );
}

A button is rendered; when this button is clicked a modal will open but without any actions:

Image
Image1266×448 16.3 KB

Meanwhile, two console warnings are printed:

Image
Image1684×100 19 KB

One warning is printed for each prop: primaryAction & secondaryActions. Commenting these two props out will result in the warnings disappearing.

Expected behavior

The documentation for the Modal component states that only the Button component is allowed to be used.

It seems like something is going wrong with the validation that’s checking whether the passed component can be used as a value for the props primaryAction & secondaryActions.

2

Good report, thanks for sharing all of the details of the specific Polaris/AppBridge versions.

Just curious, did you try downgrading these versions to verify it’s a problem with this specific version?

I wonder if that error is related to the version, or just that truly there is a maximum number of components reached in your app. Which would be an impressive feat, I’ve never seen that before.

3

Hey @FrankHeijden, thanks for reporting this and including these details. Our team is looking into this, and we’ll update you soon as we can.

4

Hey @FrankHeijden this has been fixed now.

5

Thanks Osaru! I am still noticing the issue on my side; is there an action needed on our side to fix it?

6

Looks to be working now! Thanks team!

1 Like