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

[dev-startbit]

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

[Mahfz_ShopiDevs]

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>;
};

[dev-startbit]

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

TypeError: this.app.subscribe is not a function

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]

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>
  );
}

[dev-startbit]

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

[Mahfz_ShopiDevs]

How you call the resourcePicker ? provide the code

[dev-startbit]

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]

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.