Closed majidawan closed 2 years ago
Hi, can you share a link to the implementation?
Same issue
@hiradary do you have a link where I can check the issue?
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
@Jesse121 hi, do you have a link?
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
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?
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 :)
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 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 })
})
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?
you can place the json file to the public ~
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 ,
same issue in vuejs
I found the ultimate solution for this. We just have to stringify the .json object using JSON.stringify(json) when passing it to the lottie-player component.
Had the same issue with Lottie AE plugin. Rendered the same animation with the Bodymovin' extension without errors.
I got the same issue as above. I solved it by changing "path" to "animationData". See documentation here. Under header "Other loading options".
In general, the reason for this is providing a non valid json, or the json not being in the correct path.
I have a same issue
anyone can solve this problem?
In general, the reason for this is providing a non valid json, or the json not being in the correct path.
yes, thanks @bodymovin, this fixed it.
I'm having the same problem with React in 2022. I'm loading a (presumably correct) .lottie
file via path
and getting the same error.
Anyone know a fix for this?
@nathanbabcock do you have an online link to check it?
same here anyone got a fix? EDIT: solved it by just fixing my path. I added a / before the json file name in the lottie object
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’).”