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

Question

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="{{ mix('/js/libraries.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>

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.

Answer 1

I'm assuming you have a file resources/js/libraries.js with a bunch of require(); to import npm packages and another JS file to import custom code? Well I would like to suggest something:

You don't have to make a separate JS file for them, webpack can extract them automatically like:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .extract([
        'bootstrap', 
        'popper.js',
        'lodash',
        'axios',
        'jquery',
        'vue',
    ]);

mix.version();

Then you put this at the bottom of your layout:

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
@stack('scripts')

vendor.js is basically your libraries.js and app.js is your custom code.

When you mix.version(): If your custom code changes and you npm run prod, only app.js will change (which is a small JS file) and the vendor.js (which is a big file) will stay exactly the same. This is a huge advantage as old users will only have to load the small app.js and the vendor.js will still be cached, making the loading faster.

---

But to answer your question, it's not picking up the variable name anime, so import it like this in your JS file to be recognized:

window.anime = require('animejs');