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

Shopify Plus

Topic summary

A developer encountered issues with ResourcePicker after upgrading @shopify/app-bridge-react from version 3.5 to 4.0. The component stopped functioning in their React app.

Initial Problem:

  • Original ResourcePicker implementation broke after the upgrade
  • Error: TypeError: this.app.subscribe is not a function

Attempted Solutions:

  • First suggestion involved using ResourcePicker from @shopify/app-bridge/actions with useAppBridge hook, but this produced the subscribe error
  • A working code example was shared using app-bridge ^3.7.10 and app-bridge-react ^4.1.5, creating the picker with ResourcePicker.create(app, {...}) and subscribing to SELECT/CANCEL actions
  • Developer tried this approach but continued seeing the same error

Resolution:

  • Final working solution uses app.resourcePicker() method directly on the app instance (async/await pattern)
  • Syntax: const picker = await app.resourcePicker({ type: "product", showVariants: false })

Current Status:

  • ResourcePicker now functions, but developer needs help extracting product IDs from the deprecated picker.selection object in React
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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

2

Use the new ResourcePicker in @Shopify_77 /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 ;
};
3

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

TypeError: this.app.subscribe is not a function

devstartbit_0-1727157696926.png
devstartbit_0-1727157696926.png1430×388 38.4 KB

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”,

4

In the latest versions of app-bridge-react, the ResourcePicker from @Shopify_77 /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 (
    
  );
}
5

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

devstartbit_0-1727239963566.png
devstartbit_0-1727239963566.png1920×778 79.4 KB

6

How you call the resourcePicker ? provide the code

7

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 (


<Layout.Section>




Select Products/Collections




</Layout.Section>


);
}

8

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

9

Ok the above code seems to work but how can i extract product id into React? here picker.selection is showing deprecated