facebook/react · error · Error

583

583

Error message

The current renderer does not support view transitions. This error is likely caused by a bug in React. Please file an issue.

What it means

View Transitions (<ViewTransition>) require renderer support: applyViewTransitionName, restoreViewTransitionName, cancelViewTransitionName and the root variants. Renderers that don't implement them re-export ReactFiberConfigWithNoViewTransition, where every one is a throwing shim. Rendering a ViewTransition-tagged element against such a config throws this error.

Source

Thrown at packages/react-reconciler/src/ReactFiberConfigWithNoViewTransition.js:14

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

// Renderers that don't support view transitions
// can re-export everything from this module.

function shim(...args: any): empty {
  throw new Error(
    'The current renderer does not support view transitions. ' +
      'This error is likely caused by a bug in React. ' +
      'Please file an issue.',
  );
}

// View Transitions (when unsupported)
export const applyViewTransitionName = shim;
export const restoreViewTransitionName = shim;
export const cancelViewTransitionName = shim;
export const cancelRootViewTransitionName = shim;
export const restoreRootViewTransitionName = shim;
export const cloneRootViewTransitionContainer = shim;
export const removeRootViewTransitionClone = shim;
export type InstanceMeasurement = any;
export const measureInstance = shim;
export const measureClonedInstance = shim;
export const wasInstanceInViewport = shim;

View on GitHub (pinned to eafeac097b)

Solutions

  1. Gate <ViewTransition> usage to DOM environments (feature-detect and fall back to a plain fragment/wrapper on other renderers).
  2. Custom renderer authors: implement the view-transition hooks if your target supports similar animations.
  3. Keep view-transition-dependent components out of react-native trees.

Example fix

// before
<ViewTransition name="item-expand">{content}</ViewTransition>

// after: DOM-only
{isDom
  ? <ViewTransition name="item-expand">{content}</ViewTransition>
  : <>{content}</>}
Defensive patterns

Strategy: type-guard

Validate before calling

// Detect view-transition support before rendering <ViewTransition>
const supportsVT =
  typeof document !== 'undefined' &&
  typeof document.startViewTransition === 'function';
const content = supportsVT
  ? <ViewTransition name="slide">{children}</ViewTransition>
  : <>{children}</>;

Type guard

function canUseViewTransition(element) {
  return (
    typeof document !== 'undefined' &&
    typeof document.startViewTransition === 'function' &&
    Boolean(element)
  );
}

Prevention

When it happens

Trigger: Rendering <ViewTransition> (or applying viewTransition name props) in a tree driven by react-native, a test renderer, or any custom renderer whose config re-exports NoViewTransition.

Common situations: Cross-platform component libraries using <ViewTransition> for animated layout changes, rendered on non-DOM targets; canary/experimental features reaching non-DOM renderers.

Related errors


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