Data load error from URL

[Aurimas-stack]

Hello team,

I wanted to use dotlottie-react package for my Next.js application but I'm running into an error that seems to be coming from the library: Failed to load animation from URL: "exampleURL.lottie". IndexSizeError: Index or size is negative or greater than allowed amount . This error happens also for dotlottie-wc package component if I try using it in the application.

The setup I'm using is very basic, I'm just importing the component, add src, loop and autoplay attributes and that's it.

I'm not sure why this is happening, perhaps I'm missing something, previously with @dotlottie/player-component loaded .lottie animations from URL were (and still are) working fine.

Thank you for your input.

[StephenPCG]

I encountered the same problem. This error occurs randomly, on some page refresh it works fine, but errors on other page refresh. I didn't find the pattern after several hours trying, just random, fail more(9 out of 10), work less (1 out of 10).

I have already searched issues, found a similar one: #260, but in my scenario the component (and its direct parent) is renderd without any hidden like property.

My code is like:

        <DotLottieReact
          className="w-[400px] h-[200px]"
          src="https://.../some-animation.lottie"
          loop
          autoplay
        />

The rendered dom is:

<div class="w-[400px] h-[200px]">
    <canvas width="0" height="0" style="width: 100%; height: 100%;"></canvas>
</div>

I tried to pass props width="100%" height="100%" to DotLottieReact, with no luck, the rendered dom is same.

[Aurimas-stack]

I encountered the same problem. This error occurs randomly, on some page refresh it works fine, but errors on other page refresh. I didn't find the pattern after several hours trying, just random, fail more(9 out of 10), work less (1 out of 10).

I have already searched issues, found a similar one: #260, but in my scenario the component (and its direct parent) is renderd without any hidden like property.

My code is like:

    <DotLottieReact
      className="w-[400px] h-[200px]"
      src="https://.../some-animation.lottie"
      loop
      autoplay
    />

The rendered dom is:

I tried to pass props width="100%" height="100%" to DotLottieReact, with no luck, the rendered dom is same.

In my case it happens on every re-render. Also thanks for linking that issue, I'm going to try solutions mentioned in there and check whether any of them work.

[theashraf]

Can you provide the @lottiefiles/dotlottie-react version and the Next.js version you are using ?

[StephenPCG]

my versions:

• @lottiefiles/dotlottie-react: 0.12.1
• nextjs: 15.1.3

[Aurimas-stack]

Can you provide the @lottiefiles/dotlottie-react version and the Next.js version you are using ?

• @lottiefiles/dotlottie-react: ^0.12.1
• next: ^14.2.10

[Aurimas-stack]

Well, apparently my issue was caused because the player parent component was using display: none property. It would be good that this would be documented in lottie doc's somewhere if it is intended because if not for the linked issue above, I would have missed this fix.

Besides this, I still have 2 questions: 1) Is it possible to use dotLottie.play function in useEffect ? Because it seems to only work on event handler, such as onClick? 2) Is there any way to manipulate css properties of rendered animation? In my case (with @dotlottie/player-component,) I position animation parent component with position, give specific height or width so that the animation is styled in a particular way, but with this new react library these styles are now kinda broken and I have to re-do them. Do you have any suggestions for easier migration? I know that this happens because previously rendered element was an svg , now it is canvas.

Thanks for any input.

[theashraf]

duplicate #260

[theashraf]

@Aurimas-stack

Besides this, I still have 2 questions: 1) Is it possible to use dotLottie.play function in useEffect ? Because it seems to only work on event handler, such as onClick?

Yes, you can use the dotLottie.play method in a useEffect. but, you need to ensure that the dotLottieInstance is ready to be used by listening to the ready event. Here’s an example:

import { useState, useEffect } from "react";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

const App = () => {
  const [dotLottieInstance, setDotLottieInstance] = useState(null);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const onReady = () => {
      setIsReady(true);
    };

    if (dotLottieInstance) {
      dotLottieInstance.addEventListener("ready", onReady);
    }

    return () => {
      dotLottieInstance?.removeEventListener("ready", onReady);
    };
  }, [dotLottieInstance]);

  useEffect(() => {
    if (dotLottieInstance && isReady) {
      dotLottieInstance.play();
    }
  }, [dotLottieInstance, isReady]);

  return (
    <DotLottieReact
      dotLottieRefCallback={setDotLottieInstance}
      src={ANIMATION_URL}
      loop
    />
  );
};

export default App;

2. Is there any way to manipulate css properties of rendered animation? In my case (with @dotlottie/player-component,) I position animation parent component with position, give specific height or width so that the animation is styled in a particular way, but with this new react library these styles are now kinda broken and I have to re-do them. Do you have any suggestions for easier migration? I know that this happens because previously rendered element was an svg , now it is canvas.

The @lottiefiles/dotlottie-react library renders animations using a canvas instead of an SVG. If you require detailed control over styling and manipulation of animation elements, reverting to the @dotlottie/player-component could be a better choice, as it provides more direct access and flexibility for styling adjustments.

Alternatively, you might consider using the dotLottie theming feature available in Lottie Creator. This feature allows you to create multiple themes for the same animation and dynamically switch between them using the dotLottie players without direct CSS manipulation.

[Aurimas-stack]

@Aurimas-stack

Besides this, I still have 2 questions: 1) Is it possible to use dotLottie.play function in useEffect ? Because it seems to only work on event handler, such as onClick?

Yes, you can use the dotLottie.play method in a useEffect. but, you need to ensure that the dotLottieInstance is ready to be used by listening to the ready event. Here’s an example:

import { useState, useEffect } from "react";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

const App = () => {
const [dotLottieInstance, setDotLottieInstance] = useState(null);
const [isReady, setIsReady] = useState(false);

useEffect(() => {
const onReady = () => {
setIsReady(true);
};

if (dotLottieInstance) {
  dotLottieInstance.addEventListener("ready", onReady);
}

return () => {
  dotLottieInstance?.removeEventListener("ready", onReady);
};

}, [dotLottieInstance]);

useEffect(() => {
if (dotLottieInstance && isReady) {
dotLottieInstance.play();
}
}, [dotLottieInstance, isReady]);

return (

);
};

export default App;

2. Is there any way to manipulate css properties of rendered animation? In my case (with @dotlottie/player-component,) I position animation parent component with position, give specific height or width so that the animation is styled in a particular way, but with this new react library these styles are now kinda broken and I have to re-do them. Do you have any suggestions for easier migration? I know that this happens because previously rendered element was an svg , now it is canvas.

The @lottiefiles/dotlottie-react library renders animations using a canvas instead of an SVG. If you require detailed control over styling and manipulation of animation elements, reverting to the @dotlottie/player-component could be a better choice, as it provides more direct access and flexibility for styling adjustments.

Alternatively, you might consider using the dotLottie theming feature available in Lottie Creator. This feature allows you to create multiple themes for the same animation and dynamically switch between them using the dotLottie players without direct CSS manipulation.

Thanks for your input.

I don't think reverting back to @dotlottie/player-component is a good option because it is deprecated (https://www.npmjs.com/package/@dotlottie/player-component) but I'll see what can I do with this current library, thanks.

[theashraf]

@StephenPCG @Aurimas-stack This issue should be resolved in dotlottie-react v0.12.2. If the issue still persists, please feel free to reopen.