Compiling and initializing external JS library in Laravel mix

Question

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?

Try with import AOS from 'aos'; AOS.init() or var AOS = require('aos'); AOS.init(); — porloscerros Ψ
– porloscerros Ψ, Commented Apr 30, 2020 at 17:52

Rwd · Accepted Answer · 2020-04-30 18:01:55Z

1

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.

edited Apr 30, 2020 at 18:01

answered Apr 30, 2020 at 17:55

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Compiling and initializing external JS library in Laravel mix

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related