Support to Astro 3

[ruizdiazever]

Dont work with the new version of Astro

[giuseppelt]

what's the error? I tested with astro@3 and it works.

[ruizdiazever]

Hi, the error see:

<LottieAnimation> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <LottieAnimation>.

My package.json

{
  "name": "solar-spiral",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/svelte": "^4.0.2",
    "@astrojs/tailwind": "^5.0.0",
    "astro": "^3.1.0",
    "astro-integration-lottie": "^0.2.3",
    "axios": "^1.5.0",
    "cssnano": "^6.0.1",
    "daisyui": "^3.7.5",
    "js-cookie": "^3.0.5",
    "lottie-web": "^5.12.2",
    "svelte": "^4.2.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.3.3"
  }
}

My astro config astro.config.mjs

import { defineConfig } from 'astro/config';
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import lottie from "astro-integration-lottie";

// https://astro.build/config
export default defineConfig({
  integrations: [
    svelte(), 
    tailwind(),
    lottie()
  ]
});

And my Svelte component:

<script>
    import LottieAnimation from "astro-integration-lottie/Lottie.astro";
    import Dog from "../lib/lotties/dog.json"
</script>

<div>
    <LottieAnimation class="mx-auto lg:w-auto md:w-auto sm:w-64 xs:w-64" src={Dog} autoplay="visible" />
</div>

I try with client:only="svelte" following this https://docs.astro.build/en/reference/directives-reference/#clientonly but nothing, some idea? thanks for your time!

[giuseppelt]

You cannot use astro components inside svelte. Checkout the guide https://docs.astro.build/en/core-concepts/framework-components/#:~:text=You%20cannot%20import%20.astro%20components,components%20inside%20an%20.astro%20component.

If you can’t resolve, maybe can ask on twitter, I’m on twitter too, and I can support if I need to change something

---

From: Ever @.> Sent: Sunday, September 17, 2023 10:17:23 PM To: giuseppelt/astro-lottie @.> Cc: Giuseppe La Torre @.>; Comment @.> Subject: Re: [giuseppelt/astro-lottie] Support to Astro 3 (Issue #6)

Hi, the error see:

is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a . My package.json { "name": "solar-spiral", "type": "module", "version": "0.0.1", "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "astro preview", "astro": "astro" }, "dependencies": { ***@***.***/svelte": "^4.0.2", ***@***.***/tailwind": "^5.0.0", "astro": "^3.1.0", "astro-integration-lottie": "^0.2.3", "axios": "^1.5.0", "cssnano": "^6.0.1", "daisyui": "^3.7.5", "js-cookie": "^3.0.5", "lottie-web": "^5.12.2", "svelte": "^4.2.0" }, "devDependencies": { "tailwindcss": "^3.3.3" } } My astro config astro.config.mjs import { defineConfig } from 'astro/config'; import svelte from ***@***.***/svelte"; import tailwind from ***@***.***/tailwind"; import lottie from "astro-integration-lottie"; // https://astro.build/config export default defineConfig({ integrations: [ svelte(), tailwind(), lottie() ] }); And my Svelte component:

I try with client:only="svelte" following this https://docs.astro.build/en/reference/directives-reference/#clientonly but nothing, some idea? thanks for your time! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[ruizdiazever]

OMG! Its true, I haven't thought about that and you're absolutely right! Thank you very much anyway, I'm going to have to make that component directly with Astro, another simpler solution doesn't occur to me!