[BUG] design-sync preview runtime hardcodes React 18.3.1, breaking design systems that require React 19 (e.g. Mantine 9)
What's broken
The design-sync skill's generated preview runtime (dc-runtime, compiled to a support.js bundle that ships alongside synced design-system previews) hardcodes an exact React host version — react@18.3.1 / react-dom@18.3.1, loaded via unpkg UMD — rather than reading the synced package's own peerDependencies or otherwise allowing a newer React to be used:
// support.js (generated, "do not edit")
var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js";
var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js";
This contradicts design-sync's own stated compatibility contract — the storybook-shape SKILL.md says "Requires React 18+" (i.e. 18 or newer should be fine), but in practice the runtime never loads anything newer than the pinned 18.3.1, so any synced design system whose components require React 19 fails outright once mounted.
Concrete repro
Our design system (hoziron-console-design-system, synced via design-sync's "package" shape) wraps @mantine/core/@mantine/charts/mantine-datatable (all ^9.4.1), matching our production console frontend's actual stack. Mantine 9.x officially requires React 19.2+ (documented, intentional — it uses React 19's use(), useEffectEvent, and Activity component internally: https://mantine.dev/guides/8x-to-9x/). Every Mantine-wrapped component (Button, Panel, Badge, DataTable, chart components, etc.) throws immediately on mount in the design-sync preview surface:
- First error, before any workaround:
(0, import_react26.use) is not a function— confirms Mantine's render path callsReact.use(), absent from the pinned React 18.3.1. - After polyfilling
window.React.use = (ctx) => useContext(ctx)to get past that: a second, genericTypeError: d is not a functioninsidereact-dom.production.min.js's own commit/reconciliation code — Mantine 9's incompatibility with React 18 goes deeper than one hook (per Mantine's own migration notes), so no client-side polyfill can fully paper over it. - Only the two non-Mantine, hand-rolled components in our system render fine — isolating the failure specifically to Mantine's React-19-only internals colliding with the pinned React 18.3.1 host.
Impact
Any design system that has legitimately moved to React 19 (increasingly common — Mantine 9, and presumably other libraries following suit) cannot be live-previewed via design-sync at all, even though design-sync documents itself as supporting "React 18+." This isn't a niche stack — Mantine is one of the most widely used React component libraries.
What we'd like
- At minimum:
dc-runtimeshould read the synced package's ownreact/react-dompeerDependencies(or an explicit config field) and load a matching UMD build instead of a hardcoded exact version, or at least fetch the latest 18.x/19.x as appropriate rather than a frozen18.3.1. - Failing that: design-sync should detect a React-19-only design system up front and say so clearly (similar to the ask in #71523 for non-React stacks), rather than silently mounting against an incompatible host and surfacing an opaque minified
TypeError: d is not a function.
Environment
- design-sync (package shape), synced to a
claude.ai/designproject - Design system:
@mantine/core/@mantine/hooks/@mantine/charts9.4.1,mantine-datatable9.3.1,react/react-dom19.2.7(devDependency / actual build target) - Host runtime observed:
window.React.version === "18.3.1",window.React.use === undefined