Remix Shopify app bridge resource picker 'subscribe is not a function' error - need help fixing

Other Questions Shopify
1

Issue with Shopify App Bridge Resource Picker

I’m working on a Remix-based Shopify application and running into problems with the resource picker component. Initially I tried to use the picker from the app-bridge-react package but it wasn’t available there.

Now I’m attempting to use it from the main app-bridge actions package instead. The picker seems to initialize but I get a runtime error: “this.app.subscribe is not a function”

Has anyone encountered this before? What’s the proper way to set up the resource picker in a Remix environment?

My current implementation:

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("picked items: ", data);
      },
    );
  }
}, [bridge]);

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

Any guidance would be appreciated!

2

I hit this same issue migrating from older App Bridge versions. You’re mixing the legacy actions-based resource picker with the newer app bridge context - that’s what’s breaking it. The subscribe method doesn’t exist on bridge instances in newer versions. Just import ResourcePicker directly from ‘@shopify/app-bridge-react’ and use it as a React component instead of creating it imperatively with actions. This handles the bridge context correctly and fixes those subscription errors.

3

Been through this exact headache building automated product sync workflows for e-commerce clients. Manual debugging and version checking gets old fast.

You’re hitting the classic App Bridge API evolution mess - different packages, methods, subscription patterns. Instead of wrestling with these moving parts and potential breaking changes, I’d automate the whole product selection flow.

Built something similar when we needed automatic sync between Shopify and our internal systems. Rather than fighting resource pickers and their quirky APIs, I used Latenode for automated workflows that handle product selection and processing without UI components.

You can set up triggers based on product updates, inventory changes, or manual webhook calls. No more subscribe method hunting or bridge context issues. Just clean automation that works regardless of which App Bridge version Shopify pushes next week.

Latenode handles all the Shopify API calls seamlessly and you can process product data however you need. Way more reliable than debugging UI component subscription patterns.

4

check if you’re declaring productPicker outside the component scope properly. looks like a scope issue - try moving the picker creation inside a ref or state instead of a loose variable. also make sure the bridge is fully initialized before creating the picker.

5

This happens when there’s a mismatch between how you’re creating the ResourcePicker and passing the app bridge context. The subscribe method is on the picker instance, not the bridge - but you need to initialize the picker first. Wrap your ResourcePicker creation in a try-catch and make sure the bridge object has fully loaded. I’ve hit this same issue when the bridge wasn’t ready even though useAppBridge returned an object. Also check that your productPicker variable is scoped right - try declaring it outside the component or use useRef to keep the instance between renders. It’s all about timing when you create vs when you subscribe.

6

You’re calling subscribe on the ResourcePicker instance instead of the app bridge - that’s what’s causing the error. You need to subscribe to the bridge first, then listen for resource picker events. Here’s how to fix it: after creating the picker, use bridge.subscribe() to listen for ResourcePicker actions. Don’t call subscribe directly on the productPicker object. The bridge handles event subscriptions, not the picker component. I hit the same issue with App Bridge in Next.js and this fixed it. Also check that your app bridge versions match across all packages.

7

totally a version mismatch! in v4 of app bridge, you’ll wanna use productPicker.subscribe(ResourcePicker.Action.SELECT, callback) instead. i faced this too, gluck with your fix!

8

This happens when you’re mixing old initialization patterns with newer App Bridge versions. ResourcePicker.create expects different config than what useAppBridge gives you in Remix apps. I hit this same issue migrating a legacy Shopify app. Fix it by properly initializing the bridge with all required config before passing it to ResourcePicker.create. Double-check your bridge has the right apiKey, host, and forceRedirect parameters. Also make sure you’re not importing ResourcePicker from multiple packages - pick either the actions approach or React components, don’t mix them. The subscribe method changed between versions too, so your callback handling needs to match your App Bridge version.