#How can I make this code work?

3 messages · Page 1 of 1 (latest)

pliant parcel
# 
<script>
  import LottieAnimation from 'astro-integration-lottie/Lottie.astro';

  const lottieContainer = document.querySelector('#lottieContainer');
  lottieContainer.appendChild(LottieAnimation);
</script>
crisp wraithBOT
#

Hi @pliant parcel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, it seems like you're trying to use the astro-integration-lottie package in your Astro project. However, the way you're trying to use it in your script might not be the correct approach.

In Astro, components are not typically appended to elements using JavaScript as you would in a traditional web application. Instead, they are used directly in the Astro or HTML markup.

Here's an example of how you might use a component in Astro:

---
import LottieAnimation from 'astro-integration-lottie/Lottie.astro';
---

<LottieAnimation />

In this example, LottieAnimation is used as a custom HTML tag directly in the markup.

Also, it's worth noting that there was an issue reported with the astro-integration-lottie package on Astro version 2.0.15, where it was failing to load due to an empty exports file. If you're using this version of Astro, this could be causing problems (source (https://github.com/withastro/astro/issues/6403)).

If you're still having trouble, I would recommend checking the documentation or source code of the astro-integration-lottie package for more detailed usage instructions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: