airbnb/lottie-web · error · Error

Canvas worker renderer cannot load animation from url

Error message

Canvas worker renderer cannot load animation from url

What it means

Thrown by the worker variant of setParams when params.animationData is absent but params.path is present. The worker build has no XHR/fetch path for fetching animation JSON (the worker context here only consumes an already-parsed animationData object). Passing a URL is treated as a programmer error rather than silently failing.

Source

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

        || 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;
  if (params.animationData) {
    dataManager.completeAnimation(
      params.animationData,
      this.configAnimation
    );
  } else if (params.path) {
    throw new Error('Canvas worker renderer cannot load animation from url');
  }
};

AnimationItem.prototype.setData = function () {
  throw new Error('Cannot set data on wrapper for canvas worker renderer');
};

AnimationItem.prototype.includeLayers = function (data) {
  if (data.op > this.animationData.op) {
    this.animationData.op = data.op;
    this.totalFrames = Math.floor(data.op - this.animationData.ip);
  }
  var layers = this.animationData.layers;
  var i;
  var len = layers.length;
  var newLayers = data.layers;
  var j;
  var jLen = newLayers.length;

View on GitHub (pinned to bede03d25d)

Solutions

1. Fetch/parse the JSON on the main thread and pass it as animationData: lottie.loadAnimation({ renderer: 'canvas', animationData: parsedJson }).
2. If you must drive from a URL, fetch() the JSON yourself (on main thread or in the worker) and hand the parsed object to loadAnimation.
3. Send the parsed animationData to the worker through postMessage and call loadAnimation with it there.

Example fix

// before (worker build)
lottie.loadAnimation({ renderer: 'canvas', path: 'anim/data.json' });
// after
const res = await fetch('anim/data.json');
const animationData = await res.json();
lottie.loadAnimation({ renderer: 'canvas', animationData });

function loadInWorker(lottie, params) {
  if (!params.animationData && params.path) {
    throw new Error('Worker build needs animationData, not path. Fetch the JSON first.');
  }
  return lottie.loadAnimation(params);
}
// usage: fetch first, then pass the parsed object
fetch(params.path).then(r => r.json()).then(data =>
  loadInWorker(lottie, Object.assign({}, params, { animationData: data, path: undefined }))
);

function hasAnimationDataForWorker(params) {
  const isWorker = (typeof WorkerGlobalScope !== 'undefined') || (typeof document === 'undefined');
  return !isWorker || (params.animationData != null && !params.path);
}

When it happens

Trigger: Calling lottie.loadAnimation({ path: 'data.json', renderer: 'canvas' }) with the worker build; passing a path instead of pre-loaded animationData in a worker context; reusing a main-thread config object (which uses path) unchanged inside a worker.

Common situations: Migrating to lottie_canvas_worker.js and assuming the path-based loader still works; sending a path string to a worker via postMessage and calling loadAnimation with it; SSR/test setups that rely on path loading.

Related errors

• Cannot load multiple segments in worker.
• Only canvas renderer is supported when using worker.
• Cannot set data on wrapper for canvas worker renderer
• 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/b50a266dd6aaaeb7. Report an issue: GitHub.