Upgrade to @shopify/post-purchase-ui-extensions-react

Shopify Apps
, ,

Topic summary

Developers are encountering errors when migrating from the old Shopify post-purchase UI library to @shopify/post-purchase-ui-extensions-react.

Main Issues:

  • Component rendering errors related to incorrect casing (React components require PascalCase, HTML elements use lowercase)
  • TypeScript type configuration problems that persist even after updating tsconfig.json
  • Difficulty obtaining correct types for useExtensionInput<'Checkout::PostPurchase::Render'>(), specifically the Change type needed for calculateChange()

Current Status:
Multiple developers are experiencing similar problems, but no solutions have been shared yet. The discussion remains open with unresolved technical questions about proper configuration and type definitions for the new library version.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

We currently use the old post purchase UI library for our app.

so we decided to upgrade to the recent which is @shopify/post-purchase-ui-extensions-react but unfortunately, i keep getting errors like seen below

is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
at BlockStack

this error appears any where the post-purchase-ui-extensions-react component is rendered.

1 Like
2

I’m also seeing this, adding types to the tsconfig.json file did not fix it. I’m also struggling to get the correct types for useExtensionInput<‘Checkout::PostPurchase::Render’>();, specifically the Change type needed to pass to calculateChangeset.