import

[andreatrygit]

hi there!
I'm using ky from within alpinejs.
I am having trouble importing for the browser.
I do plain:

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/distribution/index.min.js"></script>

in my head, but then i get that ky is not defined.
if I do import ky from 'ky' i get that import cannot be used outside a module...
Please help!! :):):):)

[sholladay]

<script type="module">
    import ky from 'https://cdn.jsdelivr.net/npm/[email protected]/distribution/index.min.js';
    
    const json = await ky('https://jsonplaceholder.typicode.com/todos/1').json();

    console.log(json.title);
    //=> 'delectus aut autem
</script>

[andreatrygit]

Thanks for your replies.
I use alpinejs and for some reasons ky does not get imported the right way.
I cannot get a reference to it from within Alpinejs but I suppose then I should investigate with alpinejs team.

[sholladay]

I took a few minutes to read their docs. Looks like Alpine expects all of your dependencies to be global, which is gross but maybe they'll fix that in Alpine v3 which is apparently coming out soon and will be "a complete overhaul".

For now, you'll have to attach Ky to the global scope.

<script type="module">
    import ky from 'https://cdn.jsdelivr.net/npm/[email protected]/distribution/index.min.js';
    globalThis.ky = ky;
</script>

[andreatrygit]

This is straightforward!
Love for the time you took for doing this!!
I must admit I would not have understood the point reading it by myself.
Thanks really much!!!
Oh, one more thing: please point me where you found that point. I'd like to ask them make it more visible...

[sholladay]

I found the docs pretty confusing. I mostly figured it out by seeing the bits of JavaScript that are sprinkled throughout the markup outside of <script> tags in these code examples and I didn't see any kind of module system being used.

I did also see some places where <script> tags are used. If you're using Ky inside of a <script> tag like that, then I imagine you could probably add type="module" to it and then import Ky in there, without attaching it to the global scope. But I have a feeling that might be a bit inconvenient if you need Ky in many places. As opposed to React, where everything is a module so it's easier to import Ky in multiple places without adding more script tags.

[andreatrygit]

I really appreciate this! Thank you once more!