{"record":{"id":"19fc79f65d298f71","repo":"airbnb/lottie-web","slug":"only-canvas-renderer-is-supported-when-using-worke","errorCode":null,"errorMessage":"Only canvas renderer is supported when using worker.","messagePattern":"Only canvas renderer is supported when using worker\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"player/js/animation/AnimationItemWorkerOverride.js","lineNumber":23,"sourceCode":"  getExpressionsPlugin,\n} from '../utils/common';\n\nAnimationItem.prototype.setParams = function (params) {\n  if (params.context) {\n    this.context = params.context;\n  }\n  var animType = 'svg';\n  if (params.animType) {\n    animType = params.animType;\n  } else if (params.renderer) {\n    animType = params.renderer;\n  }\n  switch (animType) {\n    case 'canvas':\n      this.renderer = new CanvasRenderer(this, params.rendererSettings);\n      break;\n    default:\n      throw new Error('Only canvas renderer is supported when using worker.');\n  }\n  this.renderer.setProjectInterface(this.projectInterface);\n  this.animType = animType;\n\n  if (params.loop === ''\n        || params.loop === null\n        || params.loop === undefined\n        || params.loop === true) {\n    this.loop = true;\n  } else if (params.loop === false) {\n    this.loop = false;\n  } else {\n    this.loop = parseInt(params.loop, 10);\n  }\n  this.autoplay = 'autoplay' in params ? params.autoplay : true;\n  this.name = params.name ? params.name : '';\n  this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, 'autoloadSegments') ? params.autoloadSegments : true;\n  this.assetsPath = null;","sourceCodeStart":5,"sourceCodeEnd":41,"githubUrl":"https://github.com/airbnb/lottie-web/blob/bede03d25d232826e0c9dca1733d542d8a7754fb/player/js/animation/AnimationItemWorkerOverride.js#L5-L41","documentation":"This is thrown by the worker variant of AnimationItem.setParams (AnimationItemWorkerOverride.js), which only instantiates a CanvasRenderer. A Web Worker cannot create SVG or HTML DOM nodes, so the SVG (default) and HTML renderers are unsupported. The switch only has a 'canvas' case; every other renderer/animType value — including the 'svg' default used when neither params.renderer nor params.animType is supplied — falls through to the throw.","triggerScenarios":"Loading an animation with the worker build via lottie.loadAnimation({ renderer: 'svg' }) or { renderer: 'html' }, or calling loadAnimation without a renderer/animType so it defaults to 'svg', or passing renderer: 'canvas' alongside a typo'd value. Any setParams call whose resolved animType is not exactly 'canvas' triggers it.","commonSituations":"Copy-pasting a loadAnimation config from a project that used the normal lottie.js/svg build into a page that loads lottie_canvas_worker.js; forgetting that the default renderer is 'svg'; upgrading to the worker build to offload rendering but not updating existing call sites.","solutions":["Pass renderer: 'canvas' explicitly to loadAnimation when using the worker build.","If you need SVG or HTML output, switch the script tag back to the non-worker build (lottie.js / lottie_svg.js / lottie_html.js).","Drive renderer selection off a build/feature flag so worker builds always force 'canvas' rather than relying on a per-call value."],"exampleFix":"// before (worker build, defaults to 'svg')\nlottie.loadAnimation({ container, loop: true, path: 'data.json' });\n// after\nlottie.loadAnimation({ container, loop: true, path: 'data.json', renderer: 'canvas' });","handlingStrategy":"validation","validationCode":"// Run before loadAnimation when the worker build is loaded.\nconst isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');\nfunction assertWorkerRenderer(params) {\n  const r = params.animType || params.renderer;\n  if (isWorker && r !== 'canvas') {\n    // worker build requires canvas; force it instead of letting setParams throw\n    return Object.assign({}, params, { renderer: 'canvas', animType: 'canvas' });\n  }\n  return params;\n}\nconst anim = lottie.loadAnimation(assertWorkerRenderer({ container, loop: true, path: 'data.json' }));","typeGuard":"function isWorkerRendererParam(params) {\n  const r = params && (params.animType || params.renderer);\n  const isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');\n  return !isWorker || r === 'canvas';\n}","tryCatchPattern":null,"preventionTips":["Treat the worker build as canvas-only: never omit renderer, and never set it to svg/html when using lottie_canvas_worker.js.","Centralize loadAnimation behind a helper that forces renderer:'canvas' for worker builds.","Add an environment check (typeof document === 'undefined') to pick the renderer automatically."],"tags":["lottie","web-worker","renderer","configuration","canvas"],"backgroundTag":null,"analyzedSha":"bede03d25d232826e0c9dca1733d542d8a7754fb","analyzedAt":"2026-08-13T05:40:22.197Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}