Nextjs route change gives error

[waltervanwoudenberg]

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]

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

[waltervanwoudenberg]

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]

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]

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]

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