I’m having trouble with the resource picker in my Shopify app made using Remix. At first, I couldn’t import it from app bridge react. Now I’m trying to get it from app bridge actions, but I’m getting an error that says ‘this.app.subscribe is not a function’. What should I do to make it work?
Here’s a simplified version of what I’m trying:
import { ResourceSelector } from '@shopify/app-bridge/utilities';
import { useBridgeApp } from '@shopify/app-bridge-react';
const bridgeApp = useBridgeApp();
useEffect(() => {
if (bridgeApp) {
const selector = ResourceSelector.create(bridgeApp, {
type: ResourceSelector.Type.Item,
config: {
allowMultiple: true,
},
});
selector.on(
ResourceSelector.Event.CHOOSE,
(chosen) => {
console.log('Chosen items:', chosen);
},
);
}
}, [bridgeApp]);
function launchSelector() {
if (selector) {
selector.trigger(ResourceSelector.Event.OPEN);
}
}
Can someone help me figure out what’s wrong? Thanks!
Hey Laura, I’ve been through this exact headache with Shopify apps and Remix. The resource picker can be a real pain sometimes. Here’s what finally worked for me after hours of troubleshooting:
Instead of using the ResourceSelector from app-bridge utilities, I switched to the ResourcePicker component from @shopify/app-bridge-react. It’s much more straightforward to use in a Remix context.
Here’s a quick example of how I implemented it:
import { ResourcePicker } from '@shopify/app-bridge-react';
import { useState } from 'react';
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
const handleSelection = (resources) => {
console.log('Selected:', resources);
setIsOpen(false);
};
return (
<>
<button onClick={() => setIsOpen(true)}>Pick Products</button>
<ResourcePicker
resourceType='Product'
open={isOpen}
onSelection={handleSelection}
onCancel={() => setIsOpen(false)}
/>
</>
);
}
This approach bypasses the issues with app.subscribe and works seamlessly with Remix. Give it a shot and let me know if you run into any other snags!
hey laura, been there! try using @shopify/app-bridge-react’s ResourcePicker instead. it’s way simpler:
import { ResourcePicker } from '@shopify/app-bridge-react';
<ResourcePicker
resourceType='Product'
open={open}
onSelection={handleSelection}
onCancel={() => setOpen(false)}
/>
this should fix ur issue. lmk if u need more help!
I’ve faced similar issues with the resource picker in Shopify apps using Remix. From my experience, the problem might be related to how you’re initializing the App Bridge instance.
Instead of using useBridgeApp, try creating a new instance using createApp from @shopify/app-bridge. Here’s a modified version that worked for me:
import { createApp } from '@shopify/app-bridge';
import { ResourcePicker } from '@shopify/app-bridge-react';
const app = createApp({
apiKey: YOUR_API_KEY,
host: new URL(location).searchParams.get('host'),
});
// Then in your component:
const [pickerOpen, setPickerOpen] = useState(false);
const handleSelection = (resources) => {
console.log('Selected resources:', resources);
setPickerOpen(false);
};
// Render the ResourcePicker
<ResourcePicker
resourceType='Product'
open={pickerOpen}
onCancel={() => setPickerOpen(false)}
onSelection={(resources) => handleSelection(resources)}
/>
// Button to open the picker
<button onClick={() => setPickerOpen(true)}>Select Products</button>
This approach should resolve the ‘subscribe is not a function’ error. Make sure to replace YOUR_API_KEY with your actual Shopify app API key. Let me know if you need any clarification!
I encountered a similar issue when working on a Shopify app with Remix. The problem likely stems from how App Bridge is initialized in your project. Here’s what worked for me:
First, ensure you’re using the latest versions of @shopify/app-bridge and @shopify/app-bridge-react. Then, try this approach:
import { Provider } from ‘@shopify/app-bridge-react’;
import { AppProvider } from ‘@shopify/polaris’;
function MyApp({ Component, pageProps }) {
const config = {
apiKey: process.env.SHOPIFY_API_KEY,
host: new URL(location).searchParams.get(‘host’),
forceRedirect: true
};
return (
<Component {…pageProps} />
);
}
This setup should resolve the ‘subscribe is not a function’ error and allow you to use the ResourcePicker component as shown in previous responses. Remember to replace the API key with your actual key.