Search code examples
javascriptlaravellaravel-mix

Compiling and initializing external JS library in Laravel mix

I am using Laravel mix to compile all my assets, but I'm having trouble initializing an external library.

I have used npm install aos --save to get the dependency, and within my app.js I am calling it like this:

require('aos/dist/aos');
AOS.init();

My mix file:

mix
    .js('resources/js/app.js', 'public/js')
    .js('resources/js/index.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/index.scss', 'public/css');

Now inside a view I am including the file in head:

<script defer src="{{ mix('js/app.js') }}"></script>

But I keep getting in my view that 

Uncaught ReferenceError: AOS is not defined

How can I resolve it? If it is being referenced within same file and after the library requiring, why is it not working?

Solution

  • Going off the README on Github you can do:

    import AOS from 'aos';

AOS.init();

    If you're ever unsure about how to use a npm package it's always worth looking at the following (if they exist):

    • Description on www.npmjs.com - Google npm [package name] or use the search on npmjs.com
    • The repo README - The link for this is usually on the righthand side of the npmjs.com page
    • Official Documentation site - If there is one, it will usually be found in one of the above.