remotion-dev/remotion · error · Error

Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CH

Error message

Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.

What it means

Thrown by <HtmlInCanvas> when a nested instance is detected (an ancestor <HtmlInCanvas> exists via HtmlInCanvasAncestorContext) and the current Chrome major version is below MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS (defined as 152). Nesting relies on OffscreenCanvas / drawElementImage behaviors that became stable only in Chrome 152+, so older versions would silently produce broken paints.

Source

Thrown at packages/core/src/HtmlInCanvas.tsx:401

			effects,
			children,
			onPaint,
			onInit,
			pixelDensity,
			controls,
			style,
		},
		ref,
	) => {
		const ancestor = useContext(HtmlInCanvasAncestorContext);
		assertHtmlInCanvasDimensions(width, height);
		const chromeMajorVersion = getChromeMajorVersion();
		if (
			ancestor &&
			chromeMajorVersion !== null &&
			chromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS
		) {
			throw new Error(
				`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.`,
			);
		}

		const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
		const canvasWidth = Math.ceil(width * resolvedPixelDensity);
		const canvasHeight = Math.ceil(height * resolvedPixelDensity);
		const {delayRender, continueRender, cancelRender} = useDelayRender();
		const {isClientSideRendering, isRendering} = useRemotionEnvironment();
		const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
		const usesDirectLayoutCanvas =
			onPaint === undefined && onInit === undefined;

		if (!isHtmlInCanvasSupported()) {
			cancelRender(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
		}

		const canvas2dRef = useRef<HTMLCanvasElement | null>(null);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Upgrade Chrome (or Remotion's bundled Chrome for Testing) to version 152 or newer.
2. If on Remotion Lambda, update to a layer release that ships Chrome >= 152.
3. Restructure the composition so <HtmlInCanvas> instances are siblings rather than nested (avoid effects that wrap <HtmlInCanvas> inside another <HtmlInCanvas>).
4. Pin your local Chrome version (`remotion browser ensure`) to a build >= 152.

Example fix

// before: nested HtmlInCanvas (effect wraps another HtmlInCanvas) on Chrome 140
<HtmlInCanvas width={1920} height={1080} effects={[ShapeWithEffect]}>...</HtmlInCanvas>
// after: upgrade Chrome to 152+, or flatten the tree
<HtmlInCanvas width={1920} height={1080}>...</HtmlInCanvas>
<HtmlInCanvas width={1920} height={1080} effects={[ShapeWithEffect]}>...</HtmlInCanvas>

const chromeVersion = getChromeMajorVersion();
if (ancestor && chromeVersion !== null && chromeVersion < 152) {
  // surface a user-friendly message before mounting the nested component
  throw new Error(`Nested <HtmlInCanvas> requires Chrome >= 152, got ${chromeVersion}`);
}

const supportsNestedHtmlInCanvas = (v: number | null): boolean =>
  v !== null && v >= 152;

When it happens

Trigger: Composing a shape with effects (e.g. an effect that itself renders <HtmlInCanvas>) inside another <HtmlInCanvas>; rendering an effects-driven element tree where effects internally use <HtmlInCanvas>; running Remotion with an older Chrome for Testing bundled by an older Remotion Lambda layer.

Common situations: Upgrading @remotion/effects to a version that uses nested <HtmlInCanvas> while pinned to an old Remotion Lambda Chrome; CI environments with a system Chrome older than 152; nested shapes/effects inside another canvas-painted component.

Related errors

• Cannot call `getInputProps()` - window.remotion_inputProps i
• "Worker" is not available. Cannot call parseMediaOnWebWorker
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/5d621545f294a76c. Report an issue: GitHub.