How to use NPM packages for svelte ?

[xinha-sh]

I'm trying to use https://unpic.pics/img/svelte/ but getting an error:

<script lang="ts">
  import { Image } from "@unpic/svelte";
</script>

<nav>
  <div class="flex flex-col justify-center sm:items-start">
    <a
      href="/"
      dir="auto"
      class="break-words whitespace-pre-wrap text-base inline-flex w-max justify-center text-gray-700 no-underline hover:text-gray-600 hover:no-underline sm:justify-start select-none"
      ><div class="flex flex-col relative w-12">
        <Image
          alt="Website name"
          priority={false}
          width={40}
          height={40}
          layout="constrained"
          decoding="async"
          class="bg-transparent object-contain object-center"
          src="/images/app/logo-t-s.webp"
        />
      </div>
    </a>
  </div>
</nav>

Error:

For typescript support, I've simply added typescript as devDependencies

[woutdp]

Can you try again with version 0.5.1

I think the issue is that we needed to set the condition field in the build.js file.

https://github.com/woutdp/live_svelte/blob/master/assets/copy/build.js#L14

Make sure it's both set in the client and server config inside the build.js file.

Or you can just run mix live_svelte.setup again after installing version 0.5.1

Let me know if that works for you.

[xinha-sh]

Can you try again with version 0.5.1

I think the issue is that we needed to set the condition field in the build.js file.

https://github.com/woutdp/live_svelte/blob/master/assets/copy/build.js#L14

Make sure it's both set in the client and server config inside the build.js file.

Or you can just run mix live_svelte.setup again after installing version 0.5.1

Let me know if that works for you.

@woutdp It worked. Thanks for the quick response.