[BUG] design-sync preview runtime hardcodes React 18.3.1, breaking design systems that require React 19 (e.g. Mantine 9)

Open 💬 0 comments Opened Jul 8, 2026 by theo-hoziron

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:

  1. First error, before any workaround: (0, import_react26.use) is not a function — confirms Mantine's render path calls React.use(), absent from the pinned React 18.3.1.
  2. After polyfilling window.React.use = (ctx) => useContext(ctx) to get past that: a second, generic TypeError: d is not a function inside react-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.
  3. 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-runtime should read the synced package's own react/react-dom peerDependencies (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 frozen 18.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/design project
  • Design system: @mantine/core/@mantine/hooks/@mantine/charts 9.4.1, mantine-datatable 9.3.1, react/react-dom 19.2.7 (devDependency / actual build target)
  • Host runtime observed: window.React.version === "18.3.1", window.React.use === undefined

View original on GitHub ↗