Function UI React Input Variables issue

[Floyd_Wallace]

Hi – I have a bunch of Shopify Discount Functions running, I am trying to use the Shopify documentation using the React Javascript framework and have the following issue:

If I comment out the section with the input variables the two extensions (Discount Function and React UI) will build and deploy, but obviously the variables are not there for the run.graphql file to pick up.

Below is my discount function shopify.extension.toml:

api_version = "2025-01"

[[extensions]]
name = "t:name"
handle = "demo-discount-function"
type = "function"

description = "t:description"

  [[extensions.targeting]]
  target = "purchase.product-discount.run"
  input_query = "src/run.graphql"
  export = "run"

  [extensions.build]
  command = ""
  path = "dist/function.wasm"

  [extensions.ui.paths]
  create = "/"
  details = "/"

[extensions.input.variables]
namespace = "$app:demo-discount-function--ui-extension"
key = "function-configuration"



[extensions.ui]
handle = "discount-ui-js"

Here is my discount function run.graphql

query RunInput {
  cart {
    lines {
      id
      quantity
      cost {
        amountPerQuantity {
          amount
          currencyCode
        }
        subtotalAmount {
          amount
          currencyCode
        }
      }
      
      merchandise {
        __typename
        ...on ProductVariant {
            id
            product {
              two_for_tag: hasAnyTag(tags: ["UI2FOR30MATCHSETS"])
            }
        }
      }
    }
  }
  
  
  
  
   discountNode {
    metafield(namespace: "$app:example-discounts--ui-extension", key: "function-configuration") {
      value
    }
  }
      
  
}

And here is the Web UI of the function:

Is there something missing from the documentation? My goal is just to store and set metafields for user configuration. Does the React framework actually function, or should I just switch to Remix?

Thanks.