I've tried importing the shopify resource picker from app bridge react and said it didnt exist so I am now trying to import it from app bridge actions library with only slightly more success. It is throwing an error saying "this.app.subscribe is not a function". How is this resolved?

here is my code:

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

const app = useAppBridge();

useEffect(() => {
    if (app) {
      resourcePicker = ResourcePicker.create(app, {
        resourceType: ResourcePicker.ResourceType.Product, // or 'Collection'
        options: {
          selectMultiple: true,
        },
      });

      resourcePicker.subscribe(
        ResourcePicker.Action.SELECT,
        (selection: any) => {
          console.log("selection: ", selection);
        },
      );
    }
  }, [app]);

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

I've tried importing the shopify resource picker from app bridge react and said it didnt exist so I am now trying to import it from app bridge actions library with only slightly more success. It is throwing an error saying "this.app.subscribe is not a function". How is this resolved?

here is my code:

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

const app = useAppBridge();

useEffect(() => {
    if (app) {
      resourcePicker = ResourcePicker.create(app, {
        resourceType: ResourcePicker.ResourceType.Product, // or 'Collection'
        options: {
          selectMultiple: true,
        },
      });

      resourcePicker.subscribe(
        ResourcePicker.Action.SELECT,
        (selection: any) => {
          console.log("selection: ", selection);
        },
      );
    }
  }, [app]);

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

• javascript
• shopify
• shopify-app
• remix.run

1 Answer 1

If you are using the legacy version, please check Example code.

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

const app = createApp(config);

const productPicker = ResourcePicker.create(app, {
  resourceType: ResourcePicker.ResourceType.Product,
});

Also, I saw you are using legacy versions. I recommend upgrading to the latest version. Please check migration guide.