Compiling and initializing external JS library in Laravel mix Code Answer

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?

Answer

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.