Shopify app bridge resource picker 'subscribe is not a function' error in Remix application

Other Questions Shopify
1

I’m currently developing a Remix app for Shopify and I’m facing a problem with the resource picker feature. Initially, when I tried to import the resource picker from the app bridge react library, it indicated that the component was unavailable. Therefore, I opted to import it from the app bridge actions library instead.

Now, I encounter a different error that states “this.app.subscribe is not a function” while attempting to initialize the picker. I’m uncertain about the cause of this problem or how to resolve it.

Here’s the code snippet I’m working with:

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

const bridge = useAppBridge();

useEffect(() => {
  if (bridge) {
    productPicker = ResourcePicker.create(bridge, {
      resourceType: ResourcePicker.ResourceType.Product,
      options: {
        selectMultiple: false,
      },
    });

    productPicker.subscribe(
      ResourcePicker.Action.SELECT,
      (data: any) => {
        console.log("selected products: ", data);
      },
    );
  }
}, [bridge]);

const showPicker = () => {
  if (productPicker) {
    productPicker.dispatch(ResourcePicker.Action.OPEN);
  }
};

Do you have any suggestions on what could be wrong here?

2

This is a timing issue with app bridge initialization. The useAppBridge hook returns a bridge object before it’s fully ready, so the subscribe method is undefined when you try to use it. I’ve faced this exact problem in my Remix Shopify app.

To resolve this, ensure the bridge is completely ready before creating the ResourcePicker. You can check if bridge.subscribe exists before proceeding. Additionally, remember to clean up the picker in your useEffect cleanup function to avoid memory leaks. The timing issue resolves when app bridge finishes initializing, but extra validation helps prevent the error during that brief window.

3

you’re missing the unsubscribe cleanup in your useEffect. without it, the picker instance gets corrupted on re-renders and breaks the subscribe method. add a return statement in useEffect that calls productPicker.unsubscribe() before unmounting. also check that your app bridge package version matches what’s in package.json - i had the same errors when versions didn’t align.

4

I hit the same thing building my Shopify app last year. Your productPicker variable isn’t declared in the component scope properly - that’s what’s breaking initialization.

Declare productPicker as a ref with useRef instead of a loose variable. This keeps the picker instance alive through re-renders without breaking things. Also check you’re importing the right app bridge version that matches your React version. I had issues mixing different app bridge package versions. The subscribe function should be there if the bridge initializes correctly, so you’ve got either a scoping problem or version mismatch in your dependencies.