Saturday, 28 December 2019

Laravel javascript in file doesn't work, but does work if included through CDN

This works:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<script type="text/javascript">
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: false})
    .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i
});
</script>

But if I include the exact JS from the CDN in libraries.js as shown below, I get ReferenceError: Can't find variable: anime.

<script src=""></script>

<script type="text/javascript">
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: false})
    .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i
});
</script>

I checked and mix is compiling as it should, the JS is included in libraries.js.

It's the exact same script, included in the exact same location so I'm puzzled as to why this is not working. The only thing I can think of is that libraries.js is loaded after the script is ran. Is that the case? If so: how do I solve this?

I'm running into this issue more often. I would like to use mix() instead of asset(). The above is about 1 library, but I would prefer to include all of most of the libraries I use in the one file libraries.js, but today I'm loading most of them through CDNs because of the issue described above.



from Laravel javascript in file doesn't work, but does work if included through CDN

1 comment: