Generated product configuration extension not working

Topic summary

A newly generated Shopify Admin product configuration extension does not render on the product page during local development.

Context: After returning to Shopify app development, the author created a new app via the latest CLI and scaffolded the default custom product configuration extension using @shopify/ui-extensions-react/admin with target “admin.product-details.configuration.render”.

Symptoms: Nothing appears on the product page when the dev server runs. The browser console shows errors (screenshot attached). A dev URL is logged for the extension: https://fears-quickly-admitted-urw.trycloudflare.com/extensions/bb0fbcfa-f823-47aa-bea4-c5a274a5ae24/admin.product-details.configuration.render.

Artifacts: A small React code snippet is provided; the extension target in code is stated to match the extension’s TOML. The IDE reports no errors.

Request: Guidance on how to debug why the extension isn’t loading or rendering.

Status: Unresolved; no proposed fixes or confirmed causes yet.

Summarized with AI on December 17. AI used: gpt-5.

Hi there,

the last time I’ve programmed a Shopify App was 2 years ago. Getting back now and noticed that nearly everything has changed. So I’ve generated a new App using the latest CLI and generated a custom product configuration extension. When running the dev server and accessing a product, I can not find any entries on a product page. This is the custom generated extension:

import { reactExtension, useApi, Text } from '@shopify/ui-extensions-react/admin';

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)

export default reactExtension<any>('admin.product-details.configuration.render', () => <App />);

function App() {

  const {extension: {target}, i18n} = useApi<'admin.product-details.configuration.render'>();

  return (
    <Text>
      {i18n.translate('welcome', {target})}
    </Text>
  );
}

It’s really just the default one. When checking the console, I can see some errors:

The URL inside the dev console is: https://fears-quickly-admitted-urw.trycloudflare.com/extensions/bb0fbcfa-f823-47aa-bea4-c5a274a5ae24/admin.product-details.configuration.render

I have really no idea how to debug this since the IDE shows no error at all and also the dev console. How would you go on?