help me because splide does not work with Astro framework.

[uemura5683]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.4

Description

I implemented CDN as follows in Astro, but I encountered an error stating "assert.ts:12 Uncaught Error: [splide] null is invalid." Could you please inform me of the cause? There are no errors related to Astro.

---

const resnublog = {
  contents: [
    {
      id: 'cvrq1nmpt',
      title: 'sample1',
      image: 'aaa.png',
      date: '2020-11-02T15:00:00.000Z'
    },
    {
      id: 'mgxyrakl7',
      title: 'sample2',
      image: 'bbb.png',
      date: '2020-09-13T08:00:00.000Z'
    },
    {
      id: 'zprsef8bd',
      title: 'sample3',
      image: 'ccc.png',
      date: '2020-09-11T08:00:00.000Z'
    }
  ],
  totalCount: 19,
  offset: 0,
  limit: 10
}

import moment from "moment";
let setdate = function (str:any) {
  return moment(str).utc().format('YYYY-MM-DD');
};

---

<script is:inline src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link is:inline href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<script type="text/javascript">
  new Splide( '.splide' ).mount();
</script>

    <main id="l-main" class="tw-absolute tw-top-[0px] tw-left-[0px] tw-w-[100%] tw-h-[100vh]">
        <section aria-label="golf_slider">
            <ul class="card-wrap tw-flex tw-flex-wrap tw-gap-[10px] tw-mr-[-10px] tw-z-[10] sm:tw-gap-[20px] sm:tw-mr-[0px]">
                {
                    resnublog.contents.map((content: any) => (
                        <li class="cart-wrap-inner splide__slide">
                            <a href={content.link}>
                                <img
                                    src={content.image.url}
                                    alt={content.title}
                                    decoding="auto"
                                    class="tw-w-[100%]"
                                >
                                <p class="tw-top-[10px] tw-text-[14px] tw-text-shadow-white">{content.title}</p>
                            </a>
                        </li>
                    ))
                }
            </ul>
        </section>      
    </main>

Reproduction Link

No response

Steps to Reproduce

1.Install Astro. 2.Generate index.astro and insert the following code.

---

const resnublog = {
  contents: [
    {
      id: 'cvrq1nmpt',
      title: 'sample1',
      image: 'aaa.png',
      date: '2020-11-02T15:00:00.000Z'
    },
    {
      id: 'mgxyrakl7',
      title: 'sample2',
      image: 'bbb.png',
      date: '2020-09-13T08:00:00.000Z'
    },
    {
      id: 'zprsef8bd',
      title: 'sample3',
      image: 'ccc.png',
      date: '2020-09-11T08:00:00.000Z'
    }
  ],
  totalCount: 19,
  offset: 0,
  limit: 10
}

import moment from "moment";
let setdate = function (str:any) {
  return moment(str).utc().format('YYYY-MM-DD');
};

---

<script is:inline src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link is:inline href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<script type="text/javascript">
  new Splide( '.splide' ).mount();
</script>

    <main id="l-main" class="tw-absolute tw-top-[0px] tw-left-[0px] tw-w-[100%] tw-h-[100vh]">
        <section aria-label="golf_slider">
            <ul class="card-wrap tw-flex tw-flex-wrap tw-gap-[10px] tw-mr-[-10px] tw-z-[10] sm:tw-gap-[20px] sm:tw-mr-[0px]">
                {
                    resnublog.contents.map((content: any) => (
                        <li class="cart-wrap-inner splide__slide">
                            <a href={content.link}>
                                <img
                                    src={content.image.url}
                                    alt={content.title}
                                    decoding="auto"
                                    class="tw-w-[100%]"
                                >
                                <p class="tw-top-[10px] tw-text-[14px] tw-text-shadow-white">{content.title}</p>
                            </a>
                        </li>
                    ))
                }
            </ul>
        </section>      
    </main>

Expected Behaviour

I hope for the error to be resolved so that splide.js can function within the Astro framework.

[agrattan0820]

@uemura5683 It works within Astro if you install it via Node and import the scripts into a standard script tag!

What has been working for me:

<script>
  import "@splidejs/splide/css";
  import Splide from "@splidejs/splide";

  new Splide(".splide", {
    type: "loop",
    gap: "20vw",
    focus: "center",
  }).mount();
</script>

[uemura5683]

Thank you! I will check it out!

I will contact you if there are any questions! Thank you very much.

[adopted3]

This is not working for me, via npm and import in client script as @agrattan0820 suggested, or via CDN with is:inline directive in the script.

Were you able to get SplideJS working in your AstroJS project, @uemura5683 ?

Please see AstroJS component support #1171 for @Robin-Wils example that uses the npm package.