aarsteinmedia / dotlottie-player-light

Light Web Component for playing SVG Lottie animations in your web app. Previously @johanaarstein/dotlottie-player-light
GNU General Public License v2.0
4 stars 1 forks source link

Nextjs route change gives error #1

Closed waltervanwoudenberg closed 2 months ago

waltervanwoudenberg commented 5 months ago

Hello,

When I use the player in two different pages: /login and /signup I get the following error when going from one page to the other:

Unhandled Runtime Error Error: This ChildPart has no parentNode and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's innerHTML or textContent can do this.

The component im using looks like this:

"use client";
import "@aarsteinmedia/dotlottie-player-light";

export default function DotLottieReact() {
  return (
    <dotlottie-player
      class=""
      autoplay=""
      loop=""
      subframe=""
      src="/fire-animation.lottie"
      style={{
        height: 950,
        width: "100%",
        display: "flex",
      }}
    />
  );
}

Do you have any idea how to fix this issue?

johanaarstein commented 5 months ago

Hi! Do you get the error during production or when running locally?

waltervanwoudenberg commented 5 months ago

Hi! Do you get the error during production or when running locally?

I got it only when running locally in dev mode, but what I do get in production and during dev is the animation stops playing when I focus/click on an input element or when I click in my dev tools. So somehow when the focus is somewhere else it stops playing.

johanaarstein commented 5 months ago

That's by design – to keep the animation from using CPU when the browser window isn't active. Input elements should maybe be excluded from this behavior, though. 🤔 I'll probably add it in the next update. 😇

johanaarstein commented 5 months ago

The error message, by the way, is common when using Lit-based web components with React in dev-mode. It's caused by the extra re-renders React does when in dev-mode.

johanaarstein commented 2 months ago

Version 3 out now, without Lit – so without this issue 😎