airbnb/lottie-web · error · Error

Only canvas renderer is supported when using worker.

Error message

Only canvas renderer is supported when using worker.

What it means

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.

Source

Thrown at player/js/animation/AnimationItemWorkerOverride.js:23

  getExpressionsPlugin,
} from '../utils/common';

AnimationItem.prototype.setParams = function (params) {
  if (params.context) {
    this.context = params.context;
  }
  var animType = 'svg';
  if (params.animType) {
    animType = params.animType;
  } else if (params.renderer) {
    animType = params.renderer;
  }
  switch (animType) {
    case 'canvas':
      this.renderer = new CanvasRenderer(this, params.rendererSettings);
      break;
    default:
      throw new Error('Only canvas renderer is supported when using worker.');
  }
  this.renderer.setProjectInterface(this.projectInterface);
  this.animType = animType;

  if (params.loop === ''
        || params.loop === null
        || params.loop === undefined
        || params.loop === true) {
    this.loop = true;
  } else if (params.loop === false) {
    this.loop = false;
  } else {
    this.loop = parseInt(params.loop, 10);
  }
  this.autoplay = 'autoplay' in params ? params.autoplay : true;
  this.name = params.name ? params.name : '';
  this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, 'autoloadSegments') ? params.autoloadSegments : true;
  this.assetsPath = null;

View on GitHub (pinned to bede03d25d)

Solutions

1. Pass renderer: 'canvas' explicitly to loadAnimation when using the worker build.
2. 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).
3. Drive renderer selection off a build/feature flag so worker builds always force 'canvas' rather than relying on a per-call value.

Example fix

// before (worker build, defaults to 'svg')
lottie.loadAnimation({ container, loop: true, path: 'data.json' });
// after
lottie.loadAnimation({ container, loop: true, path: 'data.json', renderer: 'canvas' });

// Run before loadAnimation when the worker build is loaded.
const isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');
function assertWorkerRenderer(params) {
  const r = params.animType || params.renderer;
  if (isWorker && r !== 'canvas') {
    // worker build requires canvas; force it instead of letting setParams throw
    return Object.assign({}, params, { renderer: 'canvas', animType: 'canvas' });
  }
  return params;
}
const anim = lottie.loadAnimation(assertWorkerRenderer({ container, loop: true, path: 'data.json' }));

function isWorkerRendererParam(params) {
  const r = params && (params.animType || params.renderer);
  const isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');
  return !isWorker || r === 'canvas';
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Canvas worker renderer cannot load animation from url
• Cannot set data on wrapper for canvas worker renderer
• Cannot load multiple segments in worker.
• Cannot access DOM from worker thread
• The property has no keyframe at index {ind}

AI-assisted analysis of airbnb/lottie-web@bede03d25d (2026-08-13). Data as JSON: /api/errors/19fc79f65d298f71. Report an issue: GitHub.