facebook/react · error · Error

ReactART does not support the type "${type}"

Error message

ReactART does not support the type "${type}"

What it means

react-art implements a host config for React with exactly four host element types: ClippingRectangle, Group, Shape, and Text (the TYPES constants in the createInstance switch). When React asks the renderer to create a host instance for any other type string, the switch falls through with instance still undefined and the renderer throws ReactART does not support the type "<type>". The message echoes the offending type so you can see exactly which element leaked in.

Source

Thrown at packages/react-art/src/ReactFiberConfigART.js:297

      instance._applyProps = applyGroupProps;
      break;
    case TYPES.SHAPE:
      instance = Mode.Shape();
      instance._applyProps = applyShapeProps;
      break;
    case TYPES.TEXT:
      instance = Mode.Text(
        props.children,
        props.font,
        props.alignment,
        props.path,
      );
      instance._applyProps = applyTextProps;
      break;
  }

  if (!instance) {
    throw new Error(`ReactART does not support the type "${type}"`);
  }

  instance._applyProps(instance, props);

  return instance;
}

export function cloneMutableInstance(instance, keepChildren) {
  return instance;
}

export function createTextInstance(
  text,
  rootContainerInstance,
  internalInstanceHandle,
) {
  return text;
}

View on GitHub (pinned to eafeac097b)

Solutions

1. Render only ART primitives (Surface > ClippingRectangle/Group/Shape/Text) inside the ART tree
2. Replace DOM elements with ART equivalents: <Text> for text, <Shape> with paths for graphics instead of <div>/<svg>
3. If you need DOM alongside ART, keep them in separate subtrees: DOM-rendered components outside <Surface>, ART content inside it
4. Search the thrown type string in your JSX to find the offending element (the message includes it verbatim)

Example fix

// before
<Surface width={300} height={300}>
  <div className="label">Hello</div>
</Surface>

// after
<Surface width={300} height={300}>
  <Text font="13px sans-serif" alignment="center">Hello</Text>
</Surface>

// Dev-time guard: validate the element type before it reaches the ART renderer
import {Children, isValidElement} from 'react';

const ART_TYPES = new Set(['ClippingRectangle', 'Group', 'Shape', 'Text']);

function assertArtChildren(children) {
  Children.forEach(children, child => {
    if (isValidElement(child) && typeof child.type === 'string' && !ART_TYPES.has(child.type)) {
      throw new Error(`Non-ART element <${child.type}> cannot render inside <Surface>`);
    }
  });
}

const ART_TYPES = new Set(['ClippingRectangle', 'Group', 'Shape', 'Text']);
const isSupportedArtType = (type: unknown): type is string =>
  typeof type === 'string' && ART_TYPES.has(type);

When it happens

Trigger: Rendering a DOM element (<div>, <p>, <svg>) or any unknown lowercase tag inside a react-art <Surface>; using a typo'd ART primitive (<Rekt> instead of <Rect>-style Shape usage); a library component that internally renders HTML assuming a DOM renderer while mounted under the ART renderer.

Common situations: Mixing DOM JSX into ART trees when adopting react-art for canvas rendering; sharing component code between DOM and ART renderers; version changes where a previously supported type (e.g. older Image support) was removed from the switch.

Related errors

• Not implemented.
• startGestureTransition is not yet supported in react-art.
• 161
• 458
• Invalid renderer id "${rendererID}"

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/a8947c6fb2650af0. Report an issue: GitHub.