facebook/react · error · Error

handleCommitFiberRoot not supported by this renderer

Error message

handleCommitFiberRoot not supported by this renderer

What it means

The legacy renderer adapter defines handleCommitFiberRoot as a throwing stub because fiber commit notifications only exist in the fiber reconciler (React 16+). Normally nothing calls it on a v15 renderer — fiber renderers invoke __REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot, which routes to their own interface — so this throw indicates fiber commit wiring (or a frontend fiber API) was pointed at a legacy renderer interface.

Source

Thrown at packages/react-devtools-shared/src/backend/legacy/renderer.js:1192

              props: copyWithSet(element.props, path, value),
            };
            forceUpdate(publicInstance);
            break;
          case 'state':
            setInObject(publicInstance.state, path, value);
            forceUpdate(publicInstance);
            break;
        }
      }
    }
  }

  // v16+ only features
  const getProfilingData = () => {
    throw new Error('getProfilingData not supported by this renderer');
  };
  const handleCommitFiberRoot = () => {
    throw new Error('handleCommitFiberRoot not supported by this renderer');
  };
  const handleCommitFiberUnmount = () => {
    throw new Error('handleCommitFiberUnmount not supported by this renderer');
  };
  const handlePostCommitFiberRoot = () => {
    throw new Error('handlePostCommitFiberRoot not supported by this renderer');
  };
  const overrideError = () => {
    throw new Error('overrideError not supported by this renderer');
  };
  const overrideSuspense = () => {
    throw new Error('overrideSuspense not supported by this renderer');
  };
  const overrideSuspenseMilestone = () => {
    throw new Error('overrideSuspenseMilestone not supported by this renderer');
  };
  const startProfiling = () => {
    // Do not throw, since this would break a multi-root scenario where v15 and v16 were both present.

View on GitHub (pinned to eafeac097b)

Solutions

  1. Remove duplicate React copies (npm ls react / check vendored builds) so only one renderer registers with the hook.
  2. Align DevTools frontend and backend versions so fiber commit events never route to a v15 interface.
  3. Upgrade the app off React 15 so the tree is fiber-based.
  4. For embedders: check renderer.findFiberByHostInstance before calling handleCommitFiberRoot on a rendererInterface.

Example fix

// before
rendererInterface.handleCommitFiberRoot(root);

// after
if (typeof renderer.findFiberByHostInstance === 'function') {
  rendererInterface.handleCommitFiberRoot(root);
}
Defensive patterns

Strategy: validation

Validate before calling

const isFiberRenderer = renderer =>
  typeof renderer.findFiberByHostInstance === 'function';
if (isFiberRenderer(renderer)) {
  rendererInterface.handleCommitFiberRoot(root);
}

Type guard

function isFiberRenderer(renderer) {
  return typeof renderer.findFiberByHostInstance === 'function';
}

Try / catch

try {
  rendererInterface.handleCommitFiberRoot(root);
} catch (error) {
  if (/not supported by this renderer/.test(error.message)) return;
  throw error;
}

Prevention

When it happens

Trigger: Something calls rendererInterface.handleCommitFiberRoot(root) on an interface created by the legacy adapter — e.g. hook.onCommitFiberRoot dispatching with a crossed renderer id, or custom code invoking the fiber commit API against a v15 renderer.

Common situations: Two copies of React (15 and 16+) registered on the same page so renderer ids get crossed; hand-written renderers or test harnesses that imitate the fiber DevTools hook protocol; DevTools extension/backend version skew.

Related errors


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