{"record":{"id":"5d621545f294a76c","repo":"remotion-dev/remotion","slug":"nested-htmlincanvas-components-require-chrome","errorCode":null,"errorMessage":"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.","messagePattern":"Nested <HtmlInCanvas> components require Chrome (.+?) or newer, but the current browser is Chrome (.+?)\\. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/HtmlInCanvas.tsx","lineNumber":401,"sourceCode":"\t\t\teffects,\n\t\t\tchildren,\n\t\t\tonPaint,\n\t\t\tonInit,\n\t\t\tpixelDensity,\n\t\t\tcontrols,\n\t\t\tstyle,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ancestor = useContext(HtmlInCanvasAncestorContext);\n\t\tassertHtmlInCanvasDimensions(width, height);\n\t\tconst chromeMajorVersion = getChromeMajorVersion();\n\t\tif (\n\t\t\tancestor &&\n\t\t\tchromeMajorVersion !== null &&\n\t\t\tchromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS\n\t\t) {\n\t\t\tthrow new Error(\n\t\t\t\t`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.`,\n\t\t\t);\n\t\t}\n\n\t\tconst resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);\n\t\tconst canvasWidth = Math.ceil(width * resolvedPixelDensity);\n\t\tconst canvasHeight = Math.ceil(height * resolvedPixelDensity);\n\t\tconst {delayRender, continueRender, cancelRender} = useDelayRender();\n\t\tconst {isClientSideRendering, isRendering} = useRemotionEnvironment();\n\t\tconst canRetryMissingPaintRecord = !isRendering || isClientSideRendering;\n\t\tconst usesDirectLayoutCanvas =\n\t\t\tonPaint === undefined && onInit === undefined;\n\n\t\tif (!isHtmlInCanvasSupported()) {\n\t\t\tcancelRender(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));\n\t\t}\n\n\t\tconst canvas2dRef = useRef<HTMLCanvasElement | null>(null);","sourceCodeStart":383,"sourceCodeEnd":419,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/HtmlInCanvas.tsx#L383-L419","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Upgrade Chrome (or Remotion's bundled Chrome for Testing) to version 152 or newer.","If on Remotion Lambda, update to a layer release that ships Chrome >= 152.","Restructure the composition so <HtmlInCanvas> instances are siblings rather than nested (avoid effects that wrap <HtmlInCanvas> inside another <HtmlInCanvas>).","Pin your local Chrome version (`remotion browser ensure`) to a build >= 152."],"exampleFix":"// before: nested HtmlInCanvas (effect wraps another HtmlInCanvas) on Chrome 140\n<HtmlInCanvas width={1920} height={1080} effects={[ShapeWithEffect]}>...</HtmlInCanvas>\n// after: upgrade Chrome to 152+, or flatten the tree\n<HtmlInCanvas width={1920} height={1080}>...</HtmlInCanvas>\n<HtmlInCanvas width={1920} height={1080} effects={[ShapeWithEffect]}>...</HtmlInCanvas>","handlingStrategy":"validation","validationCode":"const chromeVersion = getChromeMajorVersion();\nif (ancestor && chromeVersion !== null && chromeVersion < 152) {\n  // surface a user-friendly message before mounting the nested component\n  throw new Error(`Nested <HtmlInCanvas> requires Chrome >= 152, got ${chromeVersion}`);\n}","typeGuard":"const supportsNestedHtmlInCanvas = (v: number | null): boolean =>\n  v !== null && v >= 152;","tryCatchPattern":null,"preventionTips":["Pin Chrome for Testing to >= 152 in CI and Lambda layers.","Document the minimum Chrome version wherever you ship nested <HtmlInCanvas>.","Detect the browser at runtime and downgrade to non-nested layouts when below 152.","Keep the Remotion Lambda layer version aligned with the Chrome requirement."],"tags":["html-in-canvas","chrome-version","nested","environment","browser"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}