Migrating to Preact + Web components is confusing and sloppy

Extensions
,
1

Trying out the 2025-10 release this morning, and first off noticed checkout ui extensions must be under 64kb.

This means switching to preact + web components to remain under that limit as vanilla react + ui react package add 73kb out of the box.

Switched API version in toml, updated package.json to latest.

This example fails out of the box:

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-text>
      Line item title:{' '}
      {shopify.target.value.merchandise.title}
    </s-text>
  );
}

I’ve tried other examples found in the docs specifically for preact, and they all fail.

Is there one guide which shows the required steps to migrate from 2025-07 to 2025-10 and get a simple to render in place?

2 Likes
2

Hi @releod - thank you for the feedback. We’ll look into creating a more robust migration guide.

What kind of app are you migrating? Is it a remix app or an extension-only app? If it’s remix, you may need to follow this guide to upgrade to react-router.

For now, can you create a new app using the latest CLI version (at least v.3.85.3) and validate that the markup you’ve posted works for you?

3

The extensions directories have seen several version and tech shifts. It was originally started as vanilla js, so there were no ts files or extension specific package.json, once those were added (copied from running shopify app extension generate → checkout-ui ) the builds started passing and working.

4

I experienced the same issue with 64 kb limit. Honestly I didn’t know it was in place before. However after removing all imports from the @shopify/ui-extensions-react/checkout package the size went down below the limit. Not the greatest experience though, agreed.

@Jun-Shopify was this 64 kb limit always in place or is it new?

5

It’s a new limit for 2025-10

6

cant’ we just keep using vanilla JS? It’s so much better than these frameworks.