Shopify / ui-extensions

MIT License
265 stars 37 forks source link

Product Configuration Admin UI Extension does not support most components with "@shopify/ui-extensions-react/admin" #2103

Open NegaTiv1298 opened 3 months ago

NegaTiv1298 commented 3 months ago

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.4.2",
"@shopify/ui-extensions-react": "2024.4.2",

Describe the bug

I am developing a Product Detail Configuration Extension and ran into the problem that a large number of components are not supported even though they are listed in @shopify/ui-extensions-react/admin For example, consider the Thumbnail component. When I import this component and want to display it on the product page, I get the error Error: Unsupported component: Thumbnail

image (17)

Although when I look at the @shopify/ui-extensions-react/admin components, I see that the "Thumbnail" is present

image (18) image (19)

Steps to reproduce the behavior:

import {reactExtension, Thumbnail} from '@shopify/ui-extensions-react/admin';
export default reactExtension('admin.product-details.configuration.render', () => <App />);
function App() {
  return (
    <Thumbnail
      size="small"
      scaleType="fit"
      source="https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png"
      alt="Shopify"
    />
  );
}
  1. Create a admin ui configuration extension and import Thumbail
  2. Display a test version of the Thumbnail component
  3. Get an error in the console that this component is not supported

Expected behavior

I expected that if the components are present in @shopify/ui-extensions-react, I can use them in my development and make the block view like in Shopify Bundles app that has these components available

image (20)

Screenshots

gab-sundae-lane commented 2 months ago

I'm also experiencing this issue, if you pause on the "Unsupported component:.." error I can see the component list being validated against only has the following:

"BlockStack" "Box" "Divider" "Heading" "HeadingGroup" "Icon" "Image" "InlineStack" "Link" "Text" "Form" "FunctionSettings"

Which is far less than what is in the admin components list. product-configuration.js where the error is calling

createComponent(type, ...rest) {
 if (components && components.indexOf(type) < 0) {
      throw new Error(`Unsupported component: ${type}`);
  }
...

Would love to know if this is to be expected for Admin UI Extensions?