Cannot properly import modules in dev/build. Always getting undefined error

sage
1

Hello,

I am running in an awkward (for me) issue. I a trying to import AOS and Swiper as libraries in Sage 10 (reference from my app.js below). And even though I am following every instruction, I always get AOS is not defined error (for example).

How do you do it?

import AOS from 'aos';

document.addEventListener('DOMContentLoaded', () => {
  AOS.init();
});

On build I am getting 3 JavaScript files combined:

<script src="/app/themes/sage/public/js/259.c99ee4.js"></script><script src="/app/themes/sage/public/js/582.40508d.js"></script><script src="/app/themes/sage/public/js/app.debd13.js"></script>

In the first, I am getting the import f domReady by Roots:

"use strict";(self.webpackChunk_roots_bud_sage=self.webpackChunk_roots_bud_sage||[]).push([[259],{"../node_modules/@roots/sage/lib/client/dom-ready.js":(e,o)=>{o.Z=e=>{window.requestAnimationFrame((async function o(){document.body?await e():window.requestAnimationFrame(o)}))}}}]);

In the second, I am getting all libraries imported

In the third:

"use strict";(self.webpackChunk_roots_bud_sage=self.webpackChunk_roots_bud_sage||[]).push([[143],{"./styles/app.css":()=>{},"./scripts/app.js":(s,e,o)=>{var a=o("../node_modules/@roots/sage/lib/client/dom-ready.js"),t=o("../node_modules/aos/dist/aos.js");o("../node_modules/swiper/swiper.esm.js"),window.jQuery,o("../node_modules/isotope-layout/js/isotope.js"),document.addEventListener("DOMContentLoaded",(()=>{t.init()})),(0,a.Z)((async()=>{}))}},s=>{var e=e=>s(s.s=e);s.O(0,[259,582],(()=>(e("./scripts/app.js"),e("./styles/app.css")))),s.O()}]);

Any idea what am I doing wrong?

Thanks!

1 Like