alpinejs-axios
alpinejs-axios copied to clipboard
markmead
Error with ESM CDN
trying to download the esm version of your package via cdn: https://www.jsdelivr.com/package/npm/alpinejs-axios
would have thought that this would work:
<script type="module"> import api from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm' </script>
but instead it seems there is an error building it:
/**
* Failed to bundle using Rollup v2.79.1: the file imports a not supported node.js built-in module "fs".
* If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr
*/
throw new Error('Failed to bundle using Rollup v2.79.1: the file imports a not supported node.js built-in module "fs". If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr')
please could you provide an instruction to download the esm version via cdn.
thanks
I don't import packages like that so I don't have much help I can offer, but why not just use the example in the README?
i don't use npm because I have no front end build step so I need to import via cdn link and use from the browser
Please forgive me because I am not trying to be frustrating. I understand if you are saying that you don't want to support the import of the esm via cdn but please understand that it is a legitimate import method and it is not the same as what you have written in the README. you could quickly see this if you tried either of these
<script type="module"> import api from 'https://unpkg.com/alpinejs-axios@latest/dist/api.min.js' </script>
or
<script type="module"> import api from 'https://unpkg.com/alpinejs-axios@latest/dist/api.esm.js' </script>
I believe it is because neither of those files exports api to be available for use in another module file.
Thanks
I know it's a legitimate method but I don't see why you need it when you could just use the CDN that is referenced in the README. What benefit does importing it via ESM have for you?
All you need to do is put this in your <head>, no extra steps. It's confusing why you'd not go this route.
<script
defer
src="https://unpkg.com/alpinejs-axios@latest/dist/api.min.js"
></script>
like I mentioned before, I don't have NPM or any build step for the frontend. In some projects I have Alpinejs and other libraries imported via ESM modules via cdn.
instead of copying multiple <script> lines for each page in a project you can just place all the imports into one file and import that single file on each page of the app.
app.esm.js:
import Alpine from "https://cdn...alpinejs-3.14.1.esm.min.js";
import persist from "https://cdn...alpinejs-persist.esm.min.js";
import { default as storage } from "https://cdn...alpinejs-persist-extended.esm.min.js";
import { api } from "https://cdn...alpinejs-axios.esm.min.js";
import intersect from "https://cdn...alpinejs-intersect.esm.min.js";
Alpine.plugin(persist);
Alpine.plugin(storage);
Alpine.plugin(api);
Alpine.plugin(intersect);
Alpine.start();
index.html:
<script type="module" src="/scripts/app.esm.js"></script>
anotherpage.html:
<script type="module" src="/scripts/app.esm.js"></script>
This gives your project's js files better stucture and a single entry point without having to use a tool like requirejs.org
All your other very useful alpine plugins work with this method, so I'm not sure why nothing got exported with this axios one.
Thanks for your time and work on all these plugins
Ah OK, I understand now, thank you for explaining! Weird that the other packages work, I'll take a look.
I've looked into it and there's not much I can do as the problem is with Axios, it doesn't seem to play nice with this way of importing. I'll look into making a version of this package but with fetch.
Give this a try - https://github.com/markmead/alpinejs-fetch
thanks this now imports properly, and I'll assume adding headers to the request works the same as it did in this repo https://github.com/markmead/alpinejs-axios/issues/2#issuecomment-1825805387