TypeScript type definitions for Shopify UI components (specifically s-form
) are not properly recognized in admin extensions, despite being documented and functional in the UI.
Environment
- Extension Type: Admin Extension
- Framework: Preact ^10.10.x
- TypeScript: ^5.8.3
- Shopify CLI: ^3.80.7
- @shopify/ui-extensions: ~2025.10.0-rc
- Node.js: 22.x
- pnpm: 8.15.4
Steps to Reproduce
- Create a new admin extension using the Shopify CLI
- Add a form using the
s-form
component as documented:
<s-form onSubmit={handleSubmit}>
<s-text-field label="Email address" />
<s-button variant="primary" accessibilityRole="submit">Submit</s-button>
</s-form>
-
TypeScript will show the following errors:
La propriété 's-form' n'existe pas sur le type 'JSX.IntrinsicElements'.ts(2339)
Impossible d'utiliser 's-form' comme composant JSX. Son type '"s-form"' n'est pas un type d'élément JSX valide.ts(2786)
-
Definitions look like this
import "@shopify/ui-extension";
declare module "./src/BlockExtension.tsx" {
const shopify: import("@shopify/ui-extensions/admin.settings.order-routing-rule.render").Api;
const globalThis: { shopify: typeof shopify };
}
Expected Behavior
The s-form
component should be properly typed and recognized by TypeScript, similar to other Shopify UI components like s-stack
, s-grid
, etc.
Additional Context
- The issue is specific to
s-form
while other Shopify UI components work correctly - The component is functional at runtime, this is purely a TypeScript type definition issue
- The issue occurs even with proper imports from
@shopify/ui-extension
Proposed Solution
Add proper TypeScript type definitions for the s-form
component in the @shopify/ui-extension
package, similar to how other components are typed.