Re: Resource picker not working after upgrading app-bridge-react from 3.5 to 4.0

Resource picker not working after upgrading app-bridge-react from 3.5 to 4.0

dev-startbit
Shopify Partner
4 0 0

I was using <ResourcePicker resourceType={prodPickType} initialSelectionIds={collectionProdPickerIds} allowMultiple={allowMultipleItems} open={recPicker} onSelection={(resources) => handleProdSelection(resources)} onCancel={() => setrecPicker(false)} /> into my react app but it is not working after upgrade app-bridge-react package from 3.5 to 4.0.0

Replies 8 (8)

Mahfz_ShopiDevs
Shopify Partner
4 0 0

Use the new ResourcePicker in @Shopify/app-bridge/actions: You can use the ResourcePicker action from the App Bridge directly, like this:

 

import {ResourcePicker} from '@shopify/app-bridge/actions';
import {useAppBridge} from '@shopify/app-bridge-react';

const MyComponent = () => {
  const app = useAppBridge();
  const resourcePicker = ResourcePicker.create(app, {
    resourceType: 'Product', // or 'Collection'
    options: {
      initialSelectionIds: collectionProdPickerIds,
      selectMultiple: allowMultipleItems,
    },
  });

  resourcePicker.subscribe('selection', (selection) => {
    handleProdSelection(selection);
  });

  const openPicker = () => {
    resourcePicker.dispatch(ResourcePicker.Action.OPEN);
  };

  return <button onClick={openPicker}>Select Products/Collections</button>;
};

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
dev-startbit
Shopify Partner
4 0 0

I tried the above code and now see the below error:

TypeError: this.app.subscribe is not a function

 

devstartbit_0-1727157696926.png

I used the latest version of app-bridge and app-bridge-react packages which version are below:

"@shopify/app-bridge": "^3.7.10",
"@shopify/app-bridge-react": "4.1.5",
Mahfz_ShopiDevs
Shopify Partner
4 0 0

In the latest versions of app-bridge-react, the ResourcePicker from @Shopify/app-bridge/actions is typically integrated differently, and need to use useAppBridge to get the app object. you can try this.

this one is working for me. and my platform is 

"@shopify/app-bridge": "^3.7.10",
"@shopify/app-bridge-react": "^4.1.5",

 

import {
  Page,
  Layout,
  AlphaCard,
  Text,
  VerticalStack,
  Button,
} from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge/actions";
import { useAppBridge } from "@shopify/app-bridge-react";
import { useEffect, useState } from "react";

export default function DashBoard() {
  const app = useAppBridge(); // Get app bridge instance
  const [picker, setPicker] = useState(null);

  useEffect(() => {
    if (app) {
      const resourcePicker = ResourcePicker.create(app, {
        resourceType: ResourcePicker.ResourceType.Product,
      });

      resourcePicker.subscribe(ResourcePicker.Action.CANCEL, () => {
        // Picker was cancelled
      });

      resourcePicker.subscribe(
        ResourcePicker.Action.SELECT,
        (selectPayload) => {
          const selection = selectPayload.selection;
          console.log(selection);
          // Do something with `selection`
        }
      );

      setPicker(resourcePicker); // Store picker instance in state
    }
  }, [app]);

  const openPicker = () => {
    if (picker) {
      picker.dispatch(ResourcePicker.Action.OPEN);
    }
  };

  return (
    <Page fullWidth>
      <Layout>
        <Layout.Section>
          <AlphaCard>
            <VerticalStack gap="5">
              <Text as="h2" variant="bodyMd">
                <Button onClick={openPicker}>
                  Select Products/Collections
                </Button>
              </Text>
            </VerticalStack>
          </AlphaCard>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
dev-startbit
Shopify Partner
4 0 0

I tried also the shared code but still see the same error (see the attached screenshot)

devstartbit_0-1727239963566.png

 

Mahfz_ShopiDevs
Shopify Partner
4 0 0

How you call the resourcePicker ? provide the code

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
dev-startbit
Shopify Partner
4 0 0

Here is my component where i use ResourcePicker:

 

import {
  Page,
  Layout,
  Card,
  Text,
  BlockStack,
  Button,
} from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge/actions";
import { useAppBridge } from "@shopify/app-bridge-react";
import { useEffect, useState } from "react";

export default function ResourcePickerLt() {
  const app = useAppBridge(); // Get app bridge instance
  const [picker, setPicker] = useState(null);

  useEffect(() => {
    if (app) {
      const resourcePicker = ResourcePicker.create(app, {
        resourceType: ResourcePicker.ResourceType.Product,
      });

      resourcePicker.subscribe(ResourcePicker.Action.CANCEL, () => {
        // Picker was cancelled
      });

      resourcePicker.subscribe(
        ResourcePicker.Action.SELECT,
        (selectPayload) => {
          const selection = selectPayload.selection;
          console.log(selection);
          // Do something with `selection`
        }
      );

      setPicker(resourcePicker); // Store picker instance in state
    }
  }, [app]);

  const openPicker = () => {
    if (picker) {
      picker.dispatch(ResourcePicker.Action.OPEN);
    }
  };

  return (
    <Page fullWidth>
      <Layout>
        <Layout.Section>
          <Card>
            <BlockStack gap="5">
              <Text as="h2" variant="bodyMd">
                <Button onClick={openPicker}>
                  Select Products/Collections
                </Button>
              </Text>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

Digiteon
Excursionist
11 2 1

After upgrading the app-bridge-react package from version 3.5 to 4.0.0, you may encounter issues with the ResourcePicker component. This could be due to breaking changes or updates in the API. Start by reviewing the changelog for any relevant updates that might affect your implementation. Ensure that all related packages, such as @Shopify/app-bridge, are also updated to compatible versions. Additionally, double-check the props you're passing to ResourcePicker, as they might have changed or been deprecated. It's crucial to confirm that the App Bridge is initialized correctly in your application, as improper setup can lead to component malfunctions. Lastly, inspect the console for any error messages or warnings that could provide insight into the problem. 

rejukoshy
Shopify Partner
4 0 0

Please try below 

const app = useAppBridge(); //
// Call resourcePicker directly on the app instance
const picker = await app.resourcePicker({
type: "product", // Specify `type` as "product"
showVariants: false
});
if (picker && picker.selection && picker.selection.length > 0) {
console.log("Selection made:", picker.selection);}