Lottie-web: Failed to read the responseText error.

[majidawan]

I am exported an animation using latest version of bodymovin plugin but unable to get it work. works fine on demo file but not on the live page.

data.zip

Also, does it matter if i rename the data.json file to something else like xxxxx.json?

“Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘json’).”

[bodymovin]

Hi, can you share a link to the implementation?

[hiradary]

Same issue

[bodymovin]

@hiradary do you have a link where I can check the issue?

[Jesse121]

same issue, anyone can solve this problem?
Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').
I remmber that the old version is used jsonp,but this is xhr

[bodymovin]

@Jesse121 hi, do you have a link?

[ppfm]

Also getting this error. Animation works fine but this error pops up on Chrome and Firefox. No errors in JSON file

@bodymovin sorry no link to implementation however full console error below:

_lottie.js:4356 Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').
at formatResponse (/js/lottie.js:4356:27)
at XMLHttpRequest.xhr.onreadystatechange (/js/lottie.js:4374:36)
formatResponse @ lottie.js:4356
xhr.onreadystatechange @ lottie.js:4374
XMLHttpRequest.send (async)
(anonymous) @ VM24:1
loadAsset @ lottie.js:4370
AnimationItem.setParams @ lottie.js:11428
AnimationItem.setData @ lottie.js:11464
registerAnimation @ lottie.js:11167
searchAnimations @ lottie.js:11287
searchAnimations @ lottie.js:14445
checkReady @ lottie.js:14531
setInterval (async)
(anonymous) @ lottie.js:14556
(anonymous) @ lottie.js:9
(anonymous) @ lottie.js:12_

[allcaps]

I got the same error. Debugging it if found that I set an incorrect data.json path.

    bodymovin.loadAnimation({
      container: document.getElementById('animation'),
      path: '/path/to/data.json',  // <--
      renderer: 'canvas',
      loop: true,
      autoplay: true,
    })

Maybe this is just misconfiguration combined with a confusing error message?

[erulabs]

We have occasional reports of this with our Lottie animation on our homepage (https://kubesail.com)

But the basic recreation is:

      const animation = lottie.loadAnimation({
        container: this.animationNode,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: animationFile
      })
      animation.play()
      if (this.props.speed) {
        animation.setSpeed(this.props.speed)
      }

And maybe one in 1000 browsers will throw this error. My guess is that it's due to a network timeout, firewall, browser extension etc mangling the json file. Unfortunately, it seems wrapping lottie in a try/catch doesn't work... Will try to get more evidence :)

[matzneda]

I could get rid of this error by correcting my faulty JSON-file. I had a semi-colon ";" at the end of the JSON that caused the error.

[erulabs]

The culprit appears to be here: https://github.com/airbnb/lottie-web/blob/6f6ae544a5a658c5a08bac037a06f03110b9dfa2/player/js/utils/asset_loader.js#L4-L13

According to Rollbar, the error from my user looks like this:

InvalidStateError: responseText is only available if responseType is '' or 'text'. (Most recent call first)
File ../../node_modules/lottie-web/build/player/lottie.js line 4582 col 16 in createImageData
return JSON.parse(xhr.response);
File ../../node_modules/lottie-web/build/player/lottie.js line 4601 col 26 in createImgData
response = formatResponse(xhr);

I'd suspect the XHR request is blocked, timing out, etc

Perhaps we need to check the value of xhr.responseType? The error seems to be -fairly- clear: "responseText is only available if responseType is '' or 'text'" (see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText)

I would _guess_ the fix is like:

if ((xhr.responseType === 'text' || xhr.responseType === '') && xhr.responseText) {
  return JSON.parse(xhr.responseText);
}

For whatever its worth, I figured out how to capture the error and prevent it from bubbling up by adding an event listener:

this.animation.addEventListener('data_failed', err => {
  console.error('Lottie Animation failed:', { errMsg: err.message })
})

[martinmakesitwork]

I have the same Problem.

Here is the Link to my stackblitz:
https://stackblitz.com/edit/angular-ivy-dgbi4c?file=src%2Fapp%2Fapp.component.ts

@bodymovin can you help?

[Summer-andy]

you can place the json file to the public ~

[PoisonSnowFlying]

I could get rid of this error by correcting my faulty JSON-file. I had a semi-colon ";" at the end of the JSON that caused the error.

the file is ok at demo ,but online it add a ,

[carljustineoyales]

same issue in vuejs