Polaris Button and ButtonGroup error: `this is undefined`

Solved
Highlighted
New Member
2 1 0

I'm new to creating Shopify apps. I have a Java backend with a React SPA frontend.

I've gone through the tutorials and have the app mostly working. Today I tried to add a ButtonGroup with Buttons to my page which resulted in an error:

Screen Shot 2020-08-31 at 2.11.17 PM.png

I've reduced my code to simply adding the buttons to a Layout.Section:

import React from 'react';
import {Card, Layout, Page, Stack, TextStyle} from "@shopify/polaris";
import {ButtonGroup} from "@shopify/app-bridge/actions/ButtonGroup";
import {Button} from "@shopify/app-bridge/actions/Button";

class Home extends React.Component {
  render() {
    return (
      <Page>
        <Layout>
          <Layout.Section>
            <p>Here's what's happening with your shipments today.</p>
              <Button>Cancel</Button>
              <Button primary>Save</Button>
          </Layout.Section>
          <Layout.Section secondary>
            <p><TextStyle variation="subdued">ACTIVITIES</TextStyle></p>
          </Layout.Section>
        </Layout>
      </Page>
    );
  }
}

export default Home;

I'm just trying to get the layout working and correct. I actually want to wrap the two buttons in a segmented ButtonGroup, and just tried to copy and paste from the documentation which resulted in this error.

0 Likes
Highlighted
New Member
2 1 0

This is an accepted solution.

Realized I had the wrong imports. Fixing them fixes the issue.

0 Likes