Qwik Lottie also rive not working shows same error "useClientEffectQrl is not a function"

Question

Qwik Lottie also rive not working shows same error "useClientEffectQrl is not a function"

173 Views Asked by Rishabh nayak At 20 October 2024 at 13:00

Qwik Lottie also rive not working shows same error "useClientEffectQrl is not a function". Someone please help me with this , I am not able to find the solution in the docs "Qwik version 1.0.0" . here is the code.

import { component$ ,useStore  } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import { QwikLottie } from 'qwik-lottie';
export default component$(() => {
  const store = useStore({
    options: {
      path: 'https://assets7.lottiefiles.com/packages/lf20_M6jA5UNDHa.json',
    },
  });
  return (
    <body>
      {/* for small screen */}
      <div class={"smallScreen"}>
      <div>
        <QwikLottie options={store.options} />
      </div>
           <div class={"fixed min-h-20 bg-purple-800 w-full bottom-0 p-2"}>
           <div>
        
           </div>
          
               <div class={"flex flex-col"}>
                   <div class={"flex justify-center w-full"}>
                   <img 
                   class={"w-14 mb-1"}
                   src="https://cmjanshikayat.cgstate.gov.in/landing-page-assest/assets/images/chips.jpg" alt="chips logo"/>
                   </div>
                   <div class={"select-none text-center font-normal text-white text-xs"}>वेबसाइट प्रबंधन कार्य छत्तीसगढ़ इन्फोटेक प्रमोशन सोसायटी, इलेक्ट्रॉनिक्स एवं सूचना प्रौद्योगिकी विभाग, छत्तीसगढ़ शासन द्वारा किया जा रहा है।</div>
                   <div class={"select-none text-center font-normal text-white text-xs"}>कॉपीराईट © 2022 <a href="https://chips.gov.in/" class={"font-semibold text-xxs"}>CHiPS</a></div>
               </div>
           </div>
           
      </div>
    </body>
  );
});

export const head: DocumentHead = {
  title: 'Test',
  meta: [
    {
      name: 'description',
      content: 'Test description',
    },
  ],
};

I Want to run simple lottie / rive animation on Qwik js framework

Original Q&A

There are 2 best solutions below

**Harsh Mangalam** · Answer 1

In the stable version of qwik useClientEffectQrl and useClientEffect$ is depricated and instead new useVisibleTask$ and useVisibleTaskQrl introduced. I have created a repo using latest stable version of qwik and lottie web https://github.com/harshmangalam/qwik-lottie-web

**royaltsp** · Answer 2

may be you can try @dotlottie/player-component

https://codesandbox.io/p/sandbox/hardcore-shirley-g9pg9y

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";

export default component$(() => {
  const content = useSignal(null);

  useVisibleTask$(async () => {
    await import("@dotlottie/player-component/dist/dotlottie-player");
    // content.value = (
    //   <dotlottie-player
    //     src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
    //     autoplay
    //     loop
    //     style={{ height: "100%", width: "100%" }}
    //   />
    // );

    const dotLottiePlayer = document.createElement("dotlottie-player") as Dot;
    dotLottiePlayer.src =
      "https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie";
    dotLottiePlayer.autoplay = true;
    dotLottiePlayer.loop = true;
    dotLottiePlayer.style = { height: "100%", width: "100%" };
    document.getElementById("lottie")!.append(dotLottiePlayer);
    // document.getElementById("lottie")!.innerHTML = `
    //   <dotlottie-player
    //     src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
    //     autoplay
    //     loop
    //     style={{ height: "100%", width: "100%" }}
    //   />
    // `;
  });

  return <div id="lottie">{content.value}</div>;
});

<!-- begin snippet: js hide: false console: true babel: false -->

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;" width="800" height="450" src="https://codesandbox.io/p/sandbox/hardcore-shirley-g9pg9y?embed=1" allowfullscreen></iframe>

Qwik Lottie also rive not working shows same error "useClientEffectQrl is not a function"

There are 2 best solutions below

Related Questions in REACTJS

Related Questions in LOTTIE

Related Questions in RIVE

Related Questions in QWIK

Related Questions in QWIKJS

Trending Questions

Popular # Hahtags

Popular Questions