I have installed KeenSlider from npm into my project, but I keep encountering a Uncaught ReferenceError: KeenSlider is not defined when attempting to use the package in my Astro ponent.

Here's my astro file:

---
import KeenSlider from "keen-slider";
---
<div id="carousel" class="keen-slider">
  <div class="keen-slider__slide">
     <h4>1</h4>
  </div>
  <div class="keen-slider__slide">
     <h4>2</h4>
  </div>
</div>
<script lang="js">
   var slider = new KeenSlider("#carousel", {
      slidesPerView: 1.25,
      spacing: 30,
   });
</script>

I have also tried import KeenSlider from "keen-slider", and import { useKeenSlider } from "keen-slider" (with and without brackets) as well with no luck.

I haven't made any changes to my astro.config.mjs file, as my understanding is that I don't need to - all I should have to do is install via npm, and reference it in the ponent I'm using it, and Astro handles the rest.

But clearly I'm doing something wrong. So how can I properly define 'KeenSlider'?

I have installed KeenSlider from npm into my project, but I keep encountering a Uncaught ReferenceError: KeenSlider is not defined when attempting to use the package in my Astro ponent.

Here's my astro file:

---
import KeenSlider from "keen-slider";
---
<div id="carousel" class="keen-slider">
  <div class="keen-slider__slide">
     <h4>1</h4>
  </div>
  <div class="keen-slider__slide">
     <h4>2</h4>
  </div>
</div>
<script lang="js">
   var slider = new KeenSlider("#carousel", {
      slidesPerView: 1.25,
      spacing: 30,
   });
</script>

I have also tried import KeenSlider from "keen-slider", and import { useKeenSlider } from "keen-slider" (with and without brackets) as well with no luck.

I haven't made any changes to my astro.config.mjs file, as my understanding is that I don't need to - all I should have to do is install via npm, and reference it in the ponent I'm using it, and Astro handles the rest.

But clearly I'm doing something wrong. So how can I properly define 'KeenSlider'?

• javascript
• npm
• astrojs

• you imported it in the server code, and tried to use it in the client code, try importing what you use on the client on the same script tag. – wassfila Commented Aug 22, 2023 at 19:08

1 Answer 1

Client-side scripts can be added using standard HTML <script> tags. Astro will processes and bundles these tags, adding support for importing npm modules, writing TypeScript, and more.

This means that in your example, the keen-slider import should be moved to the <script> tag.

<script>
import KeenSlider from "keen-slider";

const slider = new KeenSlider("#carousel", {
    slidesPerView: 1.25,
    spacing: 30,
});
</script>

You can also find a working example here where I import keen-slider CSS too.