Struggling with resource picker error in my Remix Shopify app. Any solutions?

Other Questions Shopify
1

I’m having trouble with the resource picker in my Remix Shopify app. I tried importing it from app-bridge-react but it didn’t work. So I switched to app-bridge actions library. Now I’m getting an error saying “this.app.subscribe is not a function”. I’m stuck and don’t know how to fix this.

Here’s a simplified version of what I’m trying to do:

import { ResourceSelector } from '@shopify/app-bridge/utils';
import { useAppContext } from '@shopify/app-bridge-react';

const appContext = useAppContext();

function setupResourceSelector() {
  if (appContext) {
    const selector = ResourceSelector.create(appContext, {
      type: ResourceSelector.Type.Product,
      config: {
        allowMultiple: true,
      },
    });

    selector.on(
      ResourceSelector.Event.Choose,
      (chosen) => {
        console.log('Chosen items:', chosen);
      }
    );
  }
}

function launchSelector() {
  if (selector) {
    selector.trigger(ResourceSelector.Event.Open);
  }
}

Can anyone help me figure out what’s going wrong?

2

I’ve been down this road before, and it can be frustrating. One thing that helped me was making sure I was using the latest version of @shopify/app-bridge and @shopify/app-bridge-react. Sometimes, these libraries have breaking changes between versions.

Also, have you checked if your app is properly initialized? In my experience, errors like ‘this.app.subscribe is not a function’ often occur when the app object isn’t set up correctly. Make sure you’re initializing the app before trying to use the ResourceSelector.

Here’s a snippet that worked for me:

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

const app = createApp({
  apiKey: 'YOUR_API_KEY',
  host: 'YOUR_HOST',
});

const resourcePicker = ResourcePicker.create(app);

resourcePicker.dispatch(ResourcePicker.Action.OPEN);

This approach bypasses the need for the Provider component and might solve your issue. Let me know if this helps or if you need more guidance!

3

I’ve encountered this issue before. The problem likely stems from how you’re initializing the ResourceSelector. Instead of creating it directly, try using the useResourcePicker hook from @shopify/app-bridge-react. It handles the app context internally and provides a more streamlined API. Here’s a basic example:

import { useResourcePicker } from '@shopify/app-bridge-react';

function YourComponent() {
  const [picker] = useResourcePicker({
    resourceType: 'Product',
    options: { allowMultiple: true },
  });

  const handleSelection = async () => {
    const selection = await picker.selectProduct();
    console.log('Selected products:', selection);
  };

  return <button onClick={handleSelection}>Select Products</button>;
}

This approach should resolve your error and simplify your code. Remember to ensure you’re using compatible versions of all @shopify packages in your project.

4

hey there! i ran into a similar issue. try wrapping ur app with the Provider component from app-bridge-react. like this:

import {Provider} from '@shopify/app-bridge-react';

<Provider config={...}>
  <YourApp />
</Provider>

this should fix the subscribe error. lmk if it helps!