ResourcePicker not displaying anymore

[carloslenondavis]

Describe the bug

The team has built an app calling the ResourcePicker component

To Reproduce

Steps to reproduce the behaviour, please check the screenshots:

1. Click the Select Button
2. Notting happend

Expected behaviour

By clicking the Select Button the picker should appeard

Contextual information

Packages and versions

These are the relevant packages the app using and their versions.

lib name	version
ruby	"3.1.2"
rails	"~> 7.0.3"
shopify_app	"~> 21.0.0"
jquery-rails
app-bridge	app-bridge@3
app-bridge-utils	app-bridge-utils@3

Platform

• OS: WINDOW
• OS Version: 11
• App: Shopify Chrome web

Additional context

This is the code used to call the picker:

const ResourcePicker = window.AppBridge.actions.ResourcePicker;
const picker = ResourcePicker.create(app, {
  resourceType: ResourcePicker.ResourceType.Product,
  options: {
    showHidden: false,
    showVariants: false,
    showArchived: false
  },
});
picker.subscribe(ResourcePicker.Action.SELECT, (payload) => {
  payload.selection.forEach(product => {
    self.element = product;
    var item = this.setOptions(this.getItem());
    $('#combination-group')
      .append(item);
  });
  // Show or Hide the save button depends of many options exists
  $('[data-element]').length == 0 ? $('input[type="submit"]').hide() : $('input[type="submit"]').show();
});
picker.dispatch(ResourcePicker.Action.OPEN);

This is the code where the app_bridge is configurated

var data = document.getElementById('shopify-app-init').dataset;
var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
window.app = createApp({
  apiKey: data.apiKey,
  shopOrigin: data.shopOrigin,
});
window.AppBridge = AppBridge;

This is the ruby view where the app_bridge lib is called

<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script>

<%= content_tag(:div, nil, id: 'shopify-app-init', data: {
  api_key: ShopifyApp.configuration.api_key,
  shop_origin: @shop_origin || (@current_shopify_session.shop if @current_shopify_session),
  host: @host,
  debug: Rails.env.development?
} ) %>

I do not know if we my missing or needs to do any adittional configuration or there was an update beside shopify side that we need to check.

Thanks for your time in reading this issue. I'll apprecciate your help and support with this Regards

[henrytao-me]

This happens because you initialize app-bridge with the shop param.

// Wrong
  window.app = createApp({
    apiKey: data.apiKey,
    shopOrigin: data.shopOrigin,
  });

Please use the host param (in the url query params) to initialize app-bridge according to the docs here